Creating and Customizing Convertables

What is a Convertable?

We're glad you asked!

Convertables are relevantvalue-driven triggered overlays that allow you to convert more of the traffic that goes to your website, blog, landing page, or any other web page.

As of October 3rd, 2016, you can now build your totally customizable Convertable using Unbounce and add it into any webpage by copying and pasting a little bit of Javascript.

Convertables are available on both desktop and mobile. Not sure whether mobile-responsiveness overlays are right for your campaign? Check out Mobile Overlays Best Practices for some more insight.

Wait, so how are they different from pop-ups?

Convertables are different from pop-ups because:

  1. They don't open in a separate window; instead, they appear within the same window the user was currently browsing.
  2. They are controlled by site owners, not third-party advertisers. Site owners have different intentions, and must take into consideration the on-site user experience.
  3. They can be triggered not only by a visitor arriving on the page, but also by one leaving or idling on the page.
  4. They use targeting options to specify who is or isn't shown the overlay, instead of being shown to every user who visits a page.

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


Creating your Convertable

  1.  Click "Convertables" from the All Pages screen.
  2. Choose a Template (or start with a blank template if you prefer), name your Convertable, and select "Start with this Template"
  3. Design your Convertable however you'd like and when you're done, click "Save".
    Customize_and_Click_Save.png

    You can copy and paste elements directly from your Unbounce landing pages onto your Convertables.

Adding a Close-on-Click Button

Provide a more delightful experience to your visitors with a second “Close” button on your Convertable, 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" and "Overview" to publish your changes from the "Convertables Overview" page. Your visitors now have two easy options for closing your Convertable!

Setting the Trigger and Frequency

All triggers are available on both desktop and mobile except Trigger on Exit, which is only available on desktop and will not work on mobile.

  1. Choose when your Convertable will be triggered:

    Trigger on Exit: ("When a visitor tries to exit the page") allows your Convertable to be triggered by cursor movements that signal a page exit. 

     

    Trigger-on-exit Convertables 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 Convertables 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 Convertable. Keep in mind that if multiple elements are using the same Selector/ID/Class they will all trigger the Convertable 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. Click the "See how often your Convertable appears" drop-down menu to choose how often your Convertable will be shown to visitors:

Setting the Location Targeting

This feature is available for all Premium and up plans.

Location targeting allows you to show (or not show) your Convertable 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 Convertable 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.

Setting the Cookie Targeting

This feature is available for all Premium and up plans. 

Cookie targeting allows you to show (or not show) your Convertable 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.

Setting the Referrer Targeting

This feature is available for all Premium and up plans.

Referrer targeting allows you to show (or not show) your Convertable 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 Convertable 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.

Setting the URL Location

  1. Enter the domain where you'd like your Convertable to appear (don't worry about including "http"/"https").
  2. Select the page(s) of your domain where you'd like your Convertable to be included.
  3. If needed, select the page(s) of your domain that you would like your Convertable to be excluded from.

  4. Click the "Publish" button at the top of your screen.

    Even when published, your Convertable won’t be live until you paste a line of Javascript onto the back-end of your website/store/blog post.


Installing your Convertable

Depending on which service you're using to host your website, continue onto one of the following articles to find specific instructions below on how to install your Embed code:

Convertables: Installing your Embed Code in WordPress
Convertables: Installing your Embed Code in Google Tag Manager
Convertables: Installing your Embed Code in Shopify
Convertables: Installing your Embed Code in Magento
Convertables: Installing your Embed Code in Unbounce

To install your embed code on a platform not listed above or on a static website, scroll down to "Installation"click "Copy" to copy your embed code, and paste this line of Javascript at your platform/website (ensuring to include the Javascript within the <head> section).


Glossary Terms

Frequency: How often your Convertable will appear

Trigger: When your Convertable will appear


Known Issues

  1. Video backgrounds and embedded videos for "on exit" and "timed" Convertables not firing correctly in Safari
  2. Auto-play for video backgrounds and embedded videos for "on exit" and "timed" Convertables not firing correctly

Back to: Convertables

About_The_Author.png

Powered by Zendesk