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:
- 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"
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
|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|
- 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">
Sizing Overlay CTA
Overlay CTAs can be deployed in four basic size configurations:
- Full screen
- 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
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.|
||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
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!
- 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.
Edit Code Directly for Overlay CTA
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.