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
- Once you're in a campaign and have an audience added, click, 'Add Element' within the Elements Section.
- Create a name for your Overlay and select the 'Overlay CTA' button
- Select a template from our template library
- 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:
- Click on the text or link you wish to edit
- Type the new text or link into the text area editor that appears
- Additional styling pieces will appear when editing text and links. Choose fonts, colors, margin, padding, etc. to give the card the right look.
- Click on the image you wish to change
- Select "Change Image" and either upload the new image from your computer or put in the image URL
- 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"
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
- Choose the domain for the personalization
- Type in the regular expression to match for included pages
- Optionally, enter a regular expression to match for excluded pages
- Type in a sample URL to preview the personalization. This must match the include regex rules.
Element in Page
|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
|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
|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 Header
Full Width Footer
- Fixed Size
To adjust these settings:
- In "Design" view, look beneath the CTA's editing area to see the default height and width
- 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!
- In the personalization editor, navigate to the Deploy tab in the top left
- Make sure a location for the deployment is set (this doesn't have to be the final location, just a page to test on)
- 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
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.