Getting Started With Popups

Follow

Popups are smaller browser windows that appear over a landing page. You can add a popup for both desktop and mobile landing pages. Need some inspiration before you get started? Mosey on over to the One-Stop Popup Shop to check out use cases, success stories, and tips and tricks for creating the ultimate popup and sticky bar strategy. 

This article will explain the following:

What you will need: 

Follow these steps within our documentation, or, check out this video tutorial for more on launching a popup. 


Building your Popup

  1. Log into the Unbounce app, and select Popups & Sticky Bars from the left-hand menu. 
  2. Click the blue Create New button on the right-hand side. 
  3. Select Popups under Pick a content type:
    gettingstartedpopups.png
  4. Select a template from our assortment of popup templates (or click Blank Popup if you prefer).
  5. Name your page to suit your campaign and click Start with this Template.
  6. Design your popup however you'd like, using the Desktop and Mobile toggle buttons to switch between Desktop and Mobile versions of your popup.
  7. When you're done, click the Save button at the top right corner. Navigate back to the Popup Overview page (by clicking the Overview button at the left-hand corner of the builder) to edit its trigger settings and frequency. 

Setting URL Targeting

  1. Navigate back to the Overview Page of your popup. 
  2. In the URL Targeting section, enter the domain where you'd like your popup to appear (in other words, your web page's address). Don't worry about including "http"/"https" at the start of the URL.
    Enter_The_Domain.png
  3. Add in the URL paths of your domain where you'd like your popup to be shown. Such as www.yourawesomewebsite.com/signup. You can also select the page(s) of your domain on which you would like your popup not to show.
    Select_Your_Exclude_Pages.pngYou can also select the page(s) of your domain on which you would like your popup not to show.

See Targeting Your Popups/Sticky Bars to learn more about URL targeting. Do note that Advanced URL Targeting is available for Accelerate and Concierge plans only. 


Setting the Trigger and Frequency

Popup_Triggers.png

You can set the Trigger and Frequency to appear:

  • On arrival
  • On delay
  • On click
  • On exit
  • On scroll
  1. In the Trigger section, choose when you'd like the popup to appear on the page:
    Scroll_to_Trigger_Section.png
  2. In the Frequency section, choose how often your popup will be shown to visitors:
    Choose_Frequency.png

Trigger Functionality 

Trigger on Exit: ("When a visitor tries to exit the page") allows your popup to be triggered by cursor movements that signal a page exit (e.g., mouse movement out of the browser window).

Trigger-on-exit popups will launch 1.5 seconds after a cursor moves to the left, right, or bottom borders of the screen, and they will launch immediately when a cursor moves up into the first 20 pixels at the top of a user's browser.

The trigger will be canceled by scrolling or the cursor re-entering the middle of the screen. This trigger setting only works on desktop devices. 

Trigger on Scroll Up: ("When a visitor scrolls up the page") allows your Popup or Sticky Bar to be triggered the first time a user scrolls up your page.

Trigger on Click: ("When a visitor clicks an element with [ ] of [ ]") allows your popup to be triggered with a clickable element on your website, such as a button, a text link, or a photo.

To enable this feature, find the Selector, ID, or Class that is already being used for the element to which you would like to attach your popup.

Keep in mind that if multiple elements are using the same Selector/ID/Class they will all trigger the popup when clicked.
If your trigger element has a default click action (for example, a link to another page), this will still fire in addition to your popup being triggered. 

Note:

A Selector can be any element found on your page linked to a specific CSS or HTML tag. For example, span, class, or input.

Note:

Even when published, your popup won’t be live until you install your Popup or Sticky Bar.


Adding a Close-on-Click Button

Provide a more delightful experience to your visitors with a second Close button on your popup, in addition to the built-in “X” button.

  1. Select your button in the Builder.
    Select_Your_Button.png
  2. In the Properties pane on the right, click the "Action" drop-down menu and select "Close on click".
    Click_Action_and_Select_Close_On_Click.png
  3. Click Save at the top right corner when you're done.

Your visitors now have two easy options for closing your Popup or Sticky Bar!


Enabling the Form Confirmation Dialog Auto-Close Option

You can edit the form confirmation dialog within your popup to automatically close after users complete a form submission.  

  1. In the Form Confirmation Dialog tab for your form, click the Close dialog after __ seconds box under the Behavior section:
    Click_Close_Dialog_Box.png
  2. Enter the number of seconds you wish your form confirmation dialog to wait after being triggered before automatically closing, and click Save to finalize these changes.

You're done! Your form confirmation dialog will now automatically close after your visitor converts, without them needing to manually dismiss the message.


Publishing & Installing Your Popup

Before publishing your Popup, you will want to install its embed code on the website or landing page where you'd like this popup to appear.  

  1. Scroll down within the Overview page, and click Copy to grab your embed code.
    Click_Copy.png
  2. Before you publish your Popup or Sticky Bar, you’ll want to install this embed code to your page. Follow these steps for instructions on installing your embed code in GTM (Google Tag Manager), Magento, Shopify, Unbounce, or WordPress. Follow these steps for instructions on installing your embed code anywhere else.
  3. Once you've installed the embed code, click Publish from the top of the Overview page to publish your changes:Click_Publish__Overlay_.png

You're all set! To test your popup, load your website or landing page in a new window. Be sure to clear your browser cache and history to test the most up-to-date version of your page. 


Check out these best practice/feature guides for some tips and tricks on getting the best conversion rate possible for your popups:

See our documentation for more on Targeting Your Popups/Sticky Bars!

Known Issues

  • Auto-play for video backgrounds and embedded videos are currently not firing correctly for "Timed" and "On Exit" triggers.

Glossary Terms

Popups & Sticky Bars: Conversion tools that allow you to show relevant, value-driven offers to targeted web page visitors. Frequency: How often your Popup or Sticky Bar will appear. Trigger: When your Popup or Sticky Bar will appear.