Building your Popups

We have recently renamed Convertables to Popups & Sticky Bars. We are in the process of updating all screenshots and videos in our guides to reflect this name change. All steps provided within this guide will remain the same.

Overlays.png

Popups are modals/lightboxes that appear over a page's content (and are part of the Unbounce Popups & Sticky Bars family). They're available for both desktop and mobile landing pages.

This article will help you out with:

Are you pondering whether or not mobile-responsive popups are right for your campaign? Check out Mobile Popups Best Practices for some more insight.

Ready to create, customize, and install your first popup? Let's go!


Building your Popup

Step 1: Creating a New Popup

This feature is available for all paid plans.

Before you begin, you can ensure you're using an Unbounce-compatible browser to create your popup by hopping over to Supported Browsers for Building/Viewing Your Content.

  1. Click "Popups & Sticky Bars" from the All Pages screen, then select "+ Popup or Sticky Bar" at the top left. Then, click "Create a Popup."

  2. Choose a Template (or start with a blank popup if you prefer), name your popup, and select "Start with this Template"
    popup1-min.png
  3. Design your popup however you'd like, using the "Desktop" and "Mobile" toggle buttons to switch between Desktop and Mobile versions of your popup. If you're new to the Unbounce Builder, check out "Working with the Unbounce Builder" for some pointers!

    You can copy and paste elements directly from your Unbounce landing pages to your popups.

    popup2-min.png
  4. When you're done, click the "Save" button at the top right corner. Click "Publish" from the "Popups & Sticky Bars Overview" page to publish your changes. 
    Click_Publish__Overlay__3-min.png
  5. Click "Copy" to grab your embed code.
    popup_4-min.png
  6. 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.

Step 2: Setting URL Targeting

  1. In the URL Targeting section, enter the domain where you'd like your popup to appear (aka: your web page's address). Don't worry about including "http"/"https".
    popup5-min.png
  2. Select the page(s) of your domain where you'd like your popup to be shown. You can also select the page(s) of your domain on which you would like your popup not to show.
    Select_Your_Exclude_Pages.png
  3. Click the "Publish" button at the top of your screen.

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

Step 3: Setting the Trigger and Frequency

Trigger on Exit is only available on desktop and will not work on touch-screen devices. All other triggers are available on both desktop and mobile.

  1. In the Trigger section, choose when your popup will be triggered:
    Scroll_to_Trigger_Section.png

    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 cancelled by scrolling or the cursor re-entering the middle of the screen.

     

    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 [] matching []") 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.

  2. In the Frequency section, choose how often your popup will be shown to visitors:
    image_6-min.png
  3. Click the "Publish" button at the top of your screen when you're finished.

    Don't worry! 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.
    image_7-min.png
  2. In the Properties pane on the right, click the "Action" drop-down menu and select "Close on click".
    image_8-min.png
  3. Click "Save" at the top right corner when you're done.

  4. Click "Publish" from the "Popups & Sticky Bars Overview" page to publish your changes.

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

Don't worry! Even when published, your Popup or Sticky Bar won’t be live until you install your Popup or Sticky Bar.


Enabling the Form Confirmation Dialog Auto-Close Option

What’s even cooler than Inspector Gadget’s secret messages that would self-destruct after being read?
A form confirmation dialog that auto-closes after a visitor converts!

  1. In the Form Confirmation Dialog tab for your form, click the "Close dialog after ____ seconds" box under the "Behavior" section.
    image_9-min.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 lock in your changes.

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

  1.  


Glossary Terms

Popups & Sticky Bars: Conversion tools that allow you to show relevant, value-driven offers to targeted web page visitors. We currently offer two types: Popups and sticky bars.

Frequency: How often your Popup or Sticky Bar will appear

Trigger: When your Popup or Sticky Bar will appear


Known Issues

  1. A/B Testing is not yet available for Popups & Sticky Bars.
  2. The Location Targeting feature does not currently support city-specific targeting.
  3. Video backgrounds and embedded videos for "on exit" and "timed" Popups & Sticky Bars are not firing correctly in Safari.
  4. Auto-play for video backgrounds and embedded videos for "on exit" and "timed" Popups & Sticky Bars are not firing correctly. 

image_10-min.png

Was this article helpful?
5 out of 7 found this helpful
Powered by Zendesk