Overlay CTAs

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.

Editing Overlay CTA Card

Editing any campaign can be done through the WYSIWYG editor.  Change 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.

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.
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"

Position Overlay CTA

Change how the card 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

'Reveal When' Settings

The reveal rules determine when a card 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

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">

Sizing Overlay CTA

Overlay CTAs can be deployed in four basic size configurations:

  • Full screen
  • Full-width  header
  • Full width  footer
  • 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

Choosing an Overlay CTA Template

When you choose to add an overlay CTA personalization in the campaign designer template options will appear.  As part of the onboarding process your CSM set up brand specific templates for you and there are additional templates that will load.  Feel free to select each one as is or modify to fit your current offer. 

Standard Templates Include:

Template Name       Use of Template
Branded Resource Offer This overlay is best used with offers you want to present on exit. The template is set up with your logo, a headline, a description, benefit list, image, and a get resource or no thanks button.
Branded Resource Overlay with Form The same as the "Branded Resource Offer" on the first page and as the visitor clicks the get resource button, a second view of the card appears where a form is displayed.  On form submission, choose whether to show a thank you message, close the overlay, or redirect to a new URL.
Slide-In  Card The slide-in card template is best used as a slide-in from the right side of the screen.  It gets attention but is not intrusive to the content being viewed.  The card works nicely when triggered on 50% scroll or after a certain number of seconds. It has a single CTA button, top image, and headline text.
Slide-In Card with Form The slide-in with form is the same as the slide-in card but as the visitor clicks on CTA button, it directs them to a different view of the same card where a form is.  On form submission, choose whether to show a thank you message, close the overlay, or redirect to a new URL.
Footer The footer is a narrow bar the full width of the screen.  It remains at the bottom of the screen to display a persistent offer.  This is great to use for an offer someone may not want the first time seeing  it,  but would like easy access to as they engage with the site and see your solutions. The template has a sentence of text and a CTA button.

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. 

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

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.

Edit Code Directly for Overlay CTA

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.