Installing Your Popup/Sticky Bar

Follow

Overlays.pngSticky_Bars.png

So you've customized your first popup and/or sticky bar and you're ready to launch it for the world to see!

This article will help you out with:

Note:

Only one embed code from each client can be added to a page at a time. If more than one embed code is added to a page, only the first one to load will fire.

Note:

It is not currently possible to launch Popups and lightboxes from Sticky Bars.

Installing your Popup/Sticky Bar in Google Tag Manager

Click To Expand

  1. Copy and paste your Embed code (either with your mouse or by clicking the "Copy" button).
    Copy_Setup_Script.png
  2. Log in to your Google Tag Manager account and click “New Tag” or “Add a New Tag”.

  3. Click the “Choose a tag type to begin setup...” icon.

  4. From the “Choose tag type” menu, select “Custom HTML”.

  5. In the Tag Configuration HTML field, paste your line of Popup or Sticky Bar script and click “Save”.

  6. Scroll down and click the “Choose a trigger to make this tag fire...” icon to set your trigger.

  7. To choose an All Pages trigger, click “All Pages”. To create a custom trigger, click the “+” button.

  8. If choosing an All Pages trigger, click “Save” to save your changes.

  9. If creating a custom trigger, click “Choose a trigger type to begin setup…”, choose your custom trigger type, and click “Save”.



  10. Click “Tags” from the left side menu to see your new tag, and click “Publish” to publish your tag.

  11. Wahoo! Mosey on over to your page to test out your shiny new Popup or Sticky Bar.

Installing your Popup/Sticky Bar in Magento

Click To Expand
  1. Copy and paste your Embed code (either with your mouse or by clicking the "Copy" button).
    Copy_Setup_Script.png
  2. Log in to your Magento account. From the “System” drop-down menu, select “Configuration”.

  3. From the “General” menu on the left side, select “Design”.

  4. Scroll to the “Miscellaneous Scripts” text field, paste your line of Popup or Sticky Bar script, and click the “Save Config” button to save your changes.

  5. Yahtzee! Your Popup or Sticky Bar should be up and running - go to your website to check it out!

Installing your Popup/Sticky Bar in Shopify

Click To Expand

  1. Copy and paste your Embed code (either with your mouse or by clicking the "Copy" button).
    Copy_Setup_Script.png
  2. Log in to your Shopify account. From the Dashboard, select “Online Store” from the left side menu.

  3. Select “Themes”.

  4. Click the “Ellipses” button on the right.

  5. From the “Ellipses” drop-down menu, select “Edit HTML/CSS”.

  6. Click “theme.liquid”.

  7. Paste your line of Popup or Sticky Bar script into your post, anywhere either between the <head> and </head> tags or between the <body> and </body> tags.
  8. Click “Save” to publish your changes.

  9. Ba-da-bing, ba-da-boom! To test your Popup or Sticky Bar, click the “Online Store” button on the left side menu to view your store.

Installing your Popup/Sticky Bar in Unbounce

Click To Expand
  1. Copy and paste your Embed code (either with your mouse or by clicking the "Copy" button).
    Copy_Setup_Script.png
  2. Log in to your Unbounce account, open up the Page Builder for the landing page where you’d like your Popup or Sticky Bar to appear, and click “Javascripts”.

  3. Click the green “Add Script to this Variant” button, select “Before Body End Tag” from the Placement drop-down menu, and paste your line of Popup or Sticky Bar script in the textbox below. Ensure your <Script> tags are included in this text field, and click “Save”.

  4. Donezo! Navigate to your Unbounce landing page to test your Popup or Sticky Bar out.

Installing your Popup/Sticky Bar in WordPress (Single Page or Post)

Click To Expand

These steps will work for both Wordpress blog posts and general Wordpress pages.

Instructions on installing your Popup/Sticky Bars on Unbounce pages with Wordpress domains can be found here.
  1. Copy and paste your Embed code (either with your mouse or by clicking the "Copy" button).
    Copy_Setup_Script.png
  2. Log in to your Wordpress account. From the Dashboard, select "Posts" from the left side menu. 
  3. Click on the title of the blog post where you’d like your Popup or Sticky Bar to appear.

  4. Click “Text” to switch your edit view.

  5. Paste the Embed code Javascript at the top of your post, before the content of the post begins.

  6. Double-check that the path on your WordPress account matches your Popup or Sticky Bar location (to check this, see Step One under the Step Three: Setting the URL Location section above).
    Checking this in WordPress:

    Checking this in Unbounce:

  7. Click "Update" to save your changes.

  8. You're done! Feel free to go test out your Popup or Sticky Bar live.

Installing your Popup/Sticky Bar in WordPress (Entire Domain)

Click To Expand

Installing your Embed Code to WordPress (entire domain)

You must be an administrator of your Wordpress site to add the Popup or Sticky Bar Embed code at the domain level.

Instructions on installing your Popup/Sticky Bars on Unbounce pages with Wordpress domains can be found here.
      1. Copy and paste your Embed code (either with your mouse or by clicking the "Copy" button).
        Copy_Setup_Script.png
      2. Log in to your Wordpress account. From the Dashboard, select "Appearance" from the left side menu and click "Editor".
      3. From the Templates list on the right side menu, select “Header.php”.

      4. Paste the Embed code into your post, anywhere between the <head> and </head> tags.

      5. Click “Update” to save your changes.
      6. You're done! Go check out your Popup or Sticky Bar live.
If you are updating the header.php file, any future updates to your theme may overwrite these changes.

Installing your Popup/Sticky Bar Anywhere Else

Click To Expand

To install your embed code on a platform not listed above or on a static website, follow these instructions:

Scroll down to the "Installation" section from the Popup or Sticky Bar Overview page, click the "Copy" button to copy your embed code, and paste this copied line of Javascript at your platform/website (ensuring to include the Javascript within the <head> section).

Copy_the_Embed_Code.png


Was this article helpful?
9 out of 13 found this helpful