How to Install Our Embed Code (2.0)

Installing your ShortStack embed code globally (so it loads on every page of your site) gives you the most flexibility. Once installed:

• You can publish popups without ever editing your site again.

• Inline campaigns only require dropping a single <div> where you want the campaign to appear.

• You avoid the hassle of editing individual pages or re-installing the code later.

Best practice: Place your embed code in the Footer or just before the closing </body> tag. This ensures the script loads after your page content and reduces conflicts.

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

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 Footer 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 above the closing </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.

2. Click Add Custom Code.

3. Paste your ShortStack embed code.

4. Choose Place Code in: Body – end.

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 Footer box.

3. Click Save.

Note: Code Injection is available on paid Squarespace plans only.

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 Footer 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 Location to Footer and Pages 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 → Footer → Miscellaneous HTML, 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 footer settings.

Steps:

1. In HubSpot, go to Settings → Advanced.

2. Find Site footer 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 Settings → Site Settings → Body-End HTML.

3. Paste your embed code into the Body-End HTML box.

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 Footer 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. Scroll to the bottom and paste our global embed code just before the closing body tag  </body> .
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.)

• Add the embed code to your global HTML layout file (e.g., baseof.html in Hugo, _layouts/default.html in Jekyll).

• Place it before the closing </body> tag to ensure it runs on every page.

Vercel / Next.js / React Apps

• Add the embed to your global layout file, usually _document.js or _app.js.

• 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

• 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

• Always place it before the closing </body> tag.

Blogger, GoDaddy Builder

• Blogger: Go to Theme → Edit HTML, and add before </body>.

• GoDaddy Website Builder: Use Site-wide Code Injection under Settings.

After Installation

• Verify: Open your homepage and another page of your site, then view the page source or use browser dev tools to confirm the embed is present.

• Inline campaigns: Add the ShortStack <div> only where you want inline content to display.

• Popups: No extra steps are needed — once the global embed is installed, they’ll work across your site.

FAQS