How to Create an Overlay Campaign

Overlay CTA cards are the 'pop up', 'slide in', 'footer', and 'header' modals that appear across your site. These are particularly effective at generating conversions.

Add an Overlay CTA Element

  1. Once you're in a campaign and have an audience added, click, 'Add Element' within the Elements Section.
  2. Create a name for your Overlay and select the 'Overlay CTA' button
  3. Select a template from our template library
  4. Click the Edit button next to the new Overlay element to get started!

Design Tab: Editing Overlay CTA Card

There are two ways to edit an overlay: the Design tab and the Advanced tab. When you first create an overlay, it takes you to the design tab where you can make simple edits like changing the text, images, and links without using any code. You can also add styling to the cards to update the font size, color, position, padding, margins, etc. All underlying CSS and HTML can be accessed in the Advanced section. See below for Advanced Overlay options.

To edit text or links:

  1. Click on the text or link you wish to edit 
  2. Type the new text or link into the text area editor that appears
  3. Additional styling pieces will appear when editing text and links. Choose fonts, colors, margin, padding, etc. to give the card the right look.
To edit an image:
  1. Click on the image you wish to change
  2. Select "Change Image" and either upload the new image from your computer or put in the image URL
  3. A crop box with suggested dimensions automatically appears around the image.  If you want to crop, position the box around the area to display and click "Update Image"

Deploy Tab

To configure the location and deployment settings for the Overlay, click the Deploy tab. There are two main sections of the Deploy tab: where and how.

Where: Location Settings

Single Location,   Multi-location   and Element in Page are options for determining where your personalizations appear. 
Single Location
Displays your personalization on one URL. If you include a   url   parameter, it will require that URL parameter to match. If you exclude URL parameters, the base URL will match regardless of URL parameters that load   with   the page. 
Multi-location
This option allows you to show or hide your personalization on a group of pages.
  1. Choose the domain for the personalization
  2. Type in the regular expression to match for included pages
  3. Optionally, enter a regular expression to match for excluded pages
  4. Type in a sample URL to preview the personalization. This must match the include regex rules. 
Element in Page
This option allows you to display Overlay CTAs (not available for Messaging) on pages where the HTML contains specific text.
Option What it does Example
Selector only Displays the personalization when a specified element exists on the page Targeting "span#tags" will match any page that contains  
<span id="tags">
Selector + Attribute Displays personalization when an element with a specific attribute exists  Targeting selector "span#tags" and attribute "persona" will match any page that contains  
<span id="tags" persona="anything_here">
Selector + Attribute + Value Displays Overlay CTAs on pages where the HTML contains specific markup Targeting selector "span#tags", attribute "persona", and value "customer" will match any page that contains  
<span id="tags" persona="customer">

How: Deployment Type

Once you have finished creating your overlay, click the Deploy tab. Here you can change how the Overlay CTA appears on the screen based on the size of the card, web page layout, or offer.

Label What it means Example Use Case
Slide from left Have the card slide-in on the screen from the left side of the page Show a "Chat with an expert" CTA over product page
Slide in from right The card appears to slide-in from the right side of the page.  Have the card appear from the top, middle, or bottom of the page. Show a "Download White Paper" CTA on relevant blog posts
Slide up from the top/bottom of page Show the card from the top or bottom of the page Display a persistent footer offering a webinar
Pop-up The card will pop up in the middle of the screen over the page's content Offer a "Last chance" discount as user is exiting page

How: 'Reveal When' Settings

The reveal rules determine when an overlay appears on the page. 

Label What it Does Example Use Case
After period of time Trigger a CTA to reveal after a specific number of seconds Re-engage idle users with proactive chat
Scrolled __% down the page Trigger a CTA to reveal when the user scrolls far enough down the page Show a "Next article" suggestion to visitors near the end of a blog post
Right Away Trigger a CTA to reveal as soon as the script loads Gate a page behind a popup form ("Welcome Mat")
Mouse out of Browser Trigger a CTA to reveal when the visitors mouse leaves the window to exit the page Capture a visitors information before they abandon site to nurture them with emails
User is on mobile Display the CTA when visitor is on mobile site Show the card to mobile visitors
Custom Function Write custom code to deploy the card Display a card when the visitor clicks on a specific button
Visited page number of times  Ensure the visitor has been to the page at least x number of times before displaying the card Make sure the visitor is interested before offering them a "20% discount"

'Do Not Reveal When' Settings

The don't reveal when rules are in place to ensure the overlay doesn't get activated too often and diminish user experience.

Label What it does
Visited domain in last period of time (hours) Will not display the overlay if the visitor has been on the domain in the past number of specified hours
Any form submitted on the page If a form has been submitted in the past number of specified hours, the overlay will not appear
Closed in last period of time (days) If the overlay has been closed by the visitor, they will not see it again for a specified number of days (use decimals for hours)
 Closed last number of times After the user has closed the overlay a set number of times, they will never see it again
Clicked the yes button in last period of time (days) If any button with class "tr-yes" has been clicked, the overlay won't display for determined number of days
Any overlay has been shown in last period of time (hours) If any overlay has displayed to a user, another will not appear for a specified number of hours
Another personalization was closed If a certain personalization was closed, this personalization will not display

How: Sizing Overlay CTA

Overlay CTAs can be deployed in four basic size configurations:

  • Full Screen
  • Full Width H eader
  • Full Width F ooter
  • Fixed Size
The full-screen mode does not accept any size inputs. Full-width headers and footers accept a height input, but width  is always 100% of the screen. Finally, Fixed Size CTAs take both height and width inputs, but leaving the height blank will trigger an automatic height detection (which will be preferable in most cases).

To adjust these settings:

  1. In "Design" view, look beneath the CTA's editing area to see the default height and width
  2. Enter in new number values to automatically updates the size of the CTA

Preview Overlay CTA on Website

It's always smart to preview overlay CTA cards before deploying them live.  In order to preview the cards, make sure Triblio's Chrome Extension is installed!

  1. In the personalization editor, navigate to the Deploy tab in the top left
  2. Make sure a location for the deployment is set (this doesn't have to be the final location, just a page to test on)
  3. Click 'Preview at Location' and a new tab will open with the personalization

Notes: If the preview isn't loading, make sure the 'Reveal When' setting to display the card is active (i.e. mouse out of browser or 50% scroll). Location settings will not apply when you use 'Preview at Location' so if you test it on the page it should appear on, click through and land on the desired landing page where you specified the card shouldn't appear, it will show up in the preview. 'Do not reveal' settings do activate with the preview settings - to test multiple times turn off the 'Do not reveal when' settings before previewing.

Advanced Editor for Overlay CTAs

Custom code is a great way to add personal touches or advanced design (such as CSS animations or JavaScript effects) to an Overlay CTA.
To use the code editor, open an Overlay CTA and click on the "Advanced" tab. You will see three text fields as well as a live preview of your code. We recommend separating the CSS and HTML into separate fields, but doing so is not necessary. The third field, "Frame Source," controls code outside of the Overlay CTA in the HTML structure of the page (e.g. the close button and the background for a popup).

Edits will automatically update the card shown on the right side of the screen, but will not auto-save. To save your progress, use the "Save" button on the top right. 

A few special CSS elements to be aware of:

  • Use <button> or <a> for any link you want tracked
  • The "x" button is inserted into the CSS element  a.close:before,  so create your markup accordingly
  • Use <span> tags to enclose any blocks of text you want users to be able to style independently of each other
  • To reveal a form, a button must have the tr-yes class on it

Creating New Templates

Your Triblio instance comes with several Overlay CTA templates pre-installed, including a few with your branding. These templates appear as options to choose from when you create a new Overlay CTA personalization.

You can continue to add more to this library by coordinating with your CSM. They will ask you to provide HTML and CSS, and then load it into your instance under the template name that you select. 

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.