Working With Overlays

Overlays.png

Overlays are modals/lightboxes that appear over a page's content (and are part of the Unbounce Convertables 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 overlays are right for your campaign? Check out Mobile Overlays Best Practices for some more insight.

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


Building your Overlay

This feature is available for all paid plans.

Creating a New Overlay

  1. Click "Convertables" from the All Pages screen.
    Select_Convertables.png
  2. Click "Create New Convertable".
    Click_Create_New_Convertable.png
  3. Click "Create an Overlay".Click_Create_an_Overlay.png
  4. Choose a Template (or start with a blank overlay if you prefer), name your overlay, and select "Start with this Template"
    Choose_a_Template__Name_Your_Overlay_and_Click_Start.png
  5. Design your overlay however you'd like, using the "Desktop" and "Mobile" toggle buttons to switch between Desktop and Mobile versions of your overlay. 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 overlays.

    Switch_between_Desktop_and_Mobile.png
  6. When you're done, click "Save".
    Click_Save__Overlay_.png
  7. Click "Publish" from the "Convertables Overview" page to publish your changes. 
    Click_Publish__Overlay_.png

Don't worry! Even when published, your Convertable won’t be live until you install your Convertable.

Adding a Close-on-Click Button

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

  1. Select your button in the Builder.
  2. In the Properties pane on the right, click the "Action" drop-down menu and select "Close on click".
  3. Click "Save".
    Click_Save.png
  4. Click "Publish" from the "Convertables Overview" page to publish your changes.
    Click_Publish__Overlay_.png

    Your visitors now have two easy options for closing your Convertable!

Don't worry! Even when published, your Convertable won’t be live until you install your Convertable.


Setting URL Targeting

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

    Don't worry! Even when published, your overlay won’t be live until you install your Convertable.


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 overlay will be triggered:
    Scroll_to_Trigger_Section.png

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

     

    Trigger-on-exit overlays 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 Click: ("When a visitor clicks an element with [] matching []") allows your overlay 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 overlay. Keep in mind that if multiple elements are using the same Selector/ID/Class they will all trigger the overlay 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 overlay being triggered.

  2. In the Frequency section, choose how often your overlay will be shown to visitors:
    Scroll_to_Frequency_Section.png
  3. Click the "Publish" button at the top of your screen.
    Click_Publish.png

    Don't worry! Even when published, your overlay won’t be live until you install your Convertable.


Setting the Location Targeting

This feature is available for all Premium and up plans.

Location targeting allows you to show (or not show) your overlay to users visiting from a specific country (or specific countries), based on their IP address.

  1. Scroll to the Advanced Targeting section.
  2. Click the "On/Off" switch to enable Location targeting. When this feature is turned off, the overlay will be viewable from any location.
  3. Select one or more countries (there is no limit) to customize your Location targeting based on the country/countries users are visiting from.
  4. Click the "Publish" button at the top of your screen.
    Click_Publish.png

    Don't worry! Even when published, your overlay won’t be live until you install your Convertable.


Setting the Cookie Targeting

This feature is available for all Premium and up plans. 

Cookie targeting allows you to show (or not show) your overlay to users based on the presence of a specific cookie they may have picked up that has been stored in their browser.

  1. Scroll to the Advanced Targeting section.
  2. Click the "On/Off" switch to enable Cookie targeting.
  3. Use "Show" and/or "Don't Show" drop-down menus to customize your Cookie targeting based on whether a specific cookie has been picked up by the visitor. You can add just one rule to this feature.
  4. Click the "Publish" button at the top of your screen.
    Click_Publish.png

    Don't worry! Even when published, your overlay won’t be live until you install your Convertable.


Setting the Referrer Targeting

This feature is available for all Premium and up plans.

Referrer targeting allows you to show (or not show) your overlay to users arriving to your website via a direct path from a specific URL.

  1. Scroll to the Advanced Targeting section.
  2. Click the "On/Off" switch to enable Referrer targeting.
  3. Use "Show" and/or "Don't Show" drop-down menus to customize your overlay targeting based on the specific URL from which users are arriving to your website. You can add an unlimited number of rules in this feature. Any "don't show" rules are applied after "show" rules.
  4. Click the "Publish" button at the top of your screen.
    Click_Publish.png

    Don't worry! Even when published, your overlay won’t be live until you install your Convertable.


Installing your Overlay in GTM, Magento, Shopify, Unbounce, or WordPress


Installing your Overlay Anywhere Else

  • To install your embed code on a platform not listed above or on a static website, follow these instructions:
    1. Scroll down to the "Installation" section from the Convertable 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).

Glossary Terms

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

Frequency: How often your Convertable will appear

Trigger: When your Convertable will appear


Known Issues

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

Back to: Convertables

About_The_Author.png

Was this article helpful?
2 out of 3 found this helpful
Powered by Zendesk