How to install our global embed code (2.0)

You install the global embed code once per site. After that, you can publish pop-ups without editing your site again, and each inline campaign needs only a placement — no re-installing code page by page.

Get your code

The code comes from the Publish Wizard the first time you embed a campaign on a site.

1. In the Campaign Builder, click Publish Campaign.
2. Select Embed Inline (or Embed Pop-up) and click Continue.
3. Enter the full URL of the page where the campaign will appear, or choose your site from the list, then click Continue.
4. Select Install Global Embed Code.
5. Copy the code shown, paste it into your site using the steps for your platform below, and publish your site changes.
6. Back in the wizard, click Validate to confirm the code is installed. Once it's validated, click Continue to place and publish your campaign.

After installation, be sure to publish changes and clear any caches (site cache, plugin cache, or CDN cache) so your updates show right away.

If your website builder won't let you add a script, see Can't add a script to your site?

WordPress

WordPress powers millions of sites, and the easiest way to add site-wide code is through a plugin.

Steps:

1. Log in to your WordPress Admin Dashboard.
2. Install and activate a plugin such as WPCode – Insert Headers & Footers.
3. From the plugin's settings, open the Header & Footer code areas.
4. Paste your ShortStack embed code into the Header box.
5. Save changes, then clear any cache if you're using a caching plugin or CDN.

Shopify

Shopify requires adding your embed code to your theme so it loads on every page.

Steps:

1. From the Shopify admin, go to Online Store → Themes.
2. Next to your active theme, click Actions → Edit code.
3. Open the file layout/theme.liquid.
4. Paste your embed code just after the opening <body> tag.
5. Click Save. Your code will now load across your store.

Wix

Wix allows custom code through its dashboard.

Steps:

1. Go to your site Dashboard → Settings → Custom Code (under the Development & Integrations section).
2. Click + Add Custom Code.
3. Paste your ShortStack embed code.
4. Choose Place Code in: Head.
5. Select All Pages.
6. Save and Publish your site.

Squarespace

Squarespace provides a global code injection tool.

Steps:

1. From the main menu, go to Website → Pages → Custom Code → Code Injection.
2. Paste your embed code into the Header box (code added here is injected into the <head> tag on every page).
3. Click Save.

Webflow

Webflow lets you insert site-wide code from your project settings.

Steps:

1. Open your Project Settings.
2. Navigate to the Custom Code tab.
3. Paste your embed code into the Head Code section.
4. Save changes.
5. Publish your site to push the update live.

BigCommerce

BigCommerce has a built-in Script Manager for global scripts.

Steps:

1. From the admin, go to Storefront → Script Manager.
2. Click Create a Script.
3. Set Placement to Header and Location to All Pages.
4. Paste your embed code into the script content field.
5. Save.

Magento / Adobe commerce (Magento 2)

Magento allows adding code through the design configuration.

Steps:

1. Go to Content → Design → Configuration in the admin panel.
2. Edit your active store view.
3. Under Other Settings → HTML Head → Scripts and Style Sheets, paste your embed code.
4. Click Save Configuration.
5. Go to System → Cache Management and Flush Cache.

HubSpot CMS

HubSpot CMS lets you add scripts globally via header settings.

Steps:

1. In HubSpot, go to Settings → Advanced.
2. Find Site header HTML.
3. Paste your embed code.
4. Save changes.

Duda

Duda provides site-wide code areas for headers and footers.

Steps:

1. Open your site in the Duda editor.
2. Go to More → Settings → Header HTML.
3. Paste your embed code into the Header HTML box (this places code in the <head> of your site).
4. Publish your site.

Drupal

Drupal requires a module for header and footer code.

Steps:

1. Install and enable a module such as Header and Footer Scripts.
2. In the configuration screen, find the Header Scripts field.
3. Paste your embed code.
4. Save configuration.
5. Clear your Drupal cache so the code takes effect immediately.

Square/Weebly

1. Click Theme in the top menu.
2. In the lower left corner, click the Edit HTML / CSS button.
3. Look for a file named header.html in the sidebar and click it to open it in the file editor.
4. Find the opening <body> tag and paste our global embed code just after it.
5. Click Save in the upper-right corner to save the theme.

Other platforms and custom sites

If you're using a developer-focused platform or hosting service, the process may look different. Here are a few common scenarios:

Static hosts (Netlify, GitHub pages, etc.)

1. Add the embed code to your global HTML layout file (e.g., baseof.html in Hugo, _layouts/default.html in Jekyll).
2. Place it in the <head> or just after the opening <body> tag to ensure it runs on every page.

Vercel / Next.js / react apps

1. Add the embed to your global layout file, usually _document.js or _app.js.
2. If you import it into a .js file instead of HTML, remove the <script> and </script> tags, and include only the JavaScript inside.

Custom CMS or frameworks

1. Place the embed code in your main template:

   • Rails: app/views/layouts/application.html.erb
   • Laravel: resources/views/layouts/app.blade.php
   • Django: templates/base.html
   • Joomla: edit index.php in your active template

2. Place it in the <head> or just after the opening <body> tag.

Blogger, GoDaddy builder

• Blogger: Go to Theme → Edit HTML, and add just after <body>.
• GoDaddy Website Builder: Use Site-wide Code Injection under Settings, and paste in the Header section.

After installation

• Validate: In the Publish Wizard, click Validate. If the code isn't found, ShortStack shows more information to help you fix it.
• Inline campaigns: Place each campaign with the Visual Picker Tool, or paste its ShortStack <div> where you want it to display. See How to embed a campaign inline (2.0).
• Pop-ups: No extra steps are needed — once the global embed is installed, they'll work across your site.

Validated, but the campaign still doesn't show? See Troubleshooting embed issues.

Can't add a script to your site?

If your CMS or website builder won't accept a script, you can embed a campaign with a self-contained <iframe> instead. It needs no global embed code, so there's no validation step.

1. Click Publish Campaign and select Embed Inline, then click Continue.
2. Add your site or choose it from the list. When adding a new site, enter its domain, then select Install on Each Page.
3. Click Continue, enter the exact URL of the page where the campaign will appear, and click Publish. The code appears only after you publish.
4. Between the two code snippets, check I don't want to use the embed script. Use iframe code instead (iframe height is fixed).
5. Copy the iframe code into your page and publish your site.

FAQs

Do I need to do anything extra for mobile?

No. A campaign embedded with the global embed code (or the <div> and script) resizes to fit the screen on its own. If it's cut off or leaves a gap on phones, it's probably embedded with an iframe, which has a fixed height. See Troubleshooting embed issues.

Will replacing my old iframe with the new code affect entries I've already collected?

No. Switching from an iframe to the <div> and script only changes how the campaign is displayed on your page. Your entries stay with the campaign.

How many sites can I embed campaigns on?

It depends on your plan's connected sites: 1 on Free and Launch, 3 on Build, 5 on Scale and 10 on Max. Each connected site includes its aliases, such as www and a staging subdomain, so one site can cover both staging and live. Landing pages, pop-ups and embeds are unlimited on every plan. See pricing for details.

Can I still use the old embed method?

Yes. The legacy method is publishing with an iframe, and it's still available. See Can't add a script to your site? for the steps. An iframe has a fixed height, though, so use the global embed code whenever your site allows it. Once the global code is installed, each new campaign needs only a placement.

How does the global embed code work?

Think of the embed code like a smart assistant for your website. When someone visits your page:

• The code wakes up and checks which ShortStack campaigns you've set up
• It downloads a list of your active campaigns from ShortStack's servers
• It watches your webpage for special placeholder spots you've designated
• When it finds one, it inserts your ShortStack campaign into that spot
• For pop-up campaigns, it waits for the right moment before showing them

The campaigns themselves appear in a protected "window within a window" (iframe), keeping your website and the campaign content separate and safe.

Does it capture any information or track visitors' behavior?

Very minimal, and it stays on the visitor's device: The code only remembers how many times someone has seen a specific campaign and when they last saw it. This is stored only on the visitor's browser.

What it does NOT do: Track visitors across different websites, collect personal information, set marketing cookies, or send data to analytics services.

What functionality does the global embed code enable?

The embed code lets you show campaigns inside your webpage, display pop-up campaigns (center, sliding, or notification bars), and control when pop-ups appear based on time, scroll depth, exit intent, or specific page location.

Are there any security implications or concerns?

The embed code is designed with security in mind: Campaigns run in a protected space, your website's styling stays separate, and the code has no access to sensitive information like passwords or private form data.

What security headers are being added to the page?

None. The embed code is like a guest on your website—it can add content, but it cannot change your website's security settings. Those are controlled by your web server. If your site sends a Content Security Policy header, add *.lndg.page to its script-src directive so the embed script is allowed to load.

What JavaScript or CSS libraries are being used?

The embed code is completely self-contained and uses no external tools or libraries. This prevents conflicts with other tools, ensures a smaller footprint for faster loading, and reduces potential security vulnerabilities.

Related resources

How to embed a campaign inline (2.0) (Help Doc)

How to embed a campaign as a pop-up (2.0) (Help Doc)

Troubleshooting embed issues (Help Doc)

Connected Sites Manager (Help Doc)