Overview

An overlay CTA is a floating element that appears over your website’s content, typically anchored to a corner of the screen. In Extole, overlays are commonly used to promote your referral program without occupying permanent space on the page.

Unlike pop-ups, overlay CTAs are persistent and non-intrusive. They remain visible and clickable without disrupting the user experience, and they’re designed to surface at high-engagement moments.

Why Overlay CTAs Drive the Most Shares

Overlay CTAs are among the highest-performing placements for referral engagement because they are:

• Always visible on-screen
• Contextually relevant to the user journey
• Visually prominent and hard to miss
• Frictionless—offering instant access to sharing

This makes them especially effective at activating Advocates during peak moments of enthusiasm.

Customizing Your Overlay

Overlay CTAs are fully customizable—text, styling, icons, and behavior can all be configured to match your brand. They will display anywhere your site includes Extole’s JavaScript.

Display Options

You can configure how your overlay CTA appears using the Behavior panel:

• Button: A minimalist floating button. Ideal for lightweight, unobtrusive design.
• Tile: An image that can either include or not include copy
• Side-anchored: A CTA anchored to the screen edge (typically bottom-right).
• Icon + Button: A button that includes a custom icon for added emphasis.

These settings are available in the Behavior panel of your overlay configuration. The overlay can be added via tag or triggered automatically through the core.js snippet, no extra implementation needed if that tag is already on your site.

Advanced Behavior and Triggers

While the default has the overlay showing on all pages, Extole can customize the overlay to be more personalized based on the customer’s past activity. Examples include triggering it for:

• 3rd page load to avoid interfering with welcome offers
• Past customers only via cookies
• Customers indicating exit-intent on thank-you pages to capture additional shares

Best Practices

Iconography and Visual Cues

• Use recognizable icons (envelope for email, chain link for copy link, etc.)
• Add subtle motion or attention cues to icons or CTA copy
• Include a success state with a message like “Your invite is on its way!” and keep the overlay visible for further sharing

Copy

Use action-oriented headlines like:

• “You’ve unlocked a reward: Share to get started!”
• “Don’t keep the savings to yourself—invite friends.”

Include dynamic fields when possible, such as the Advocate’s name, purchase amount, or offer tier.

Mobile-First Design

• Ensure tap targets are large enough for finger interaction
• Stack elements vertically with a clear visual hierarchy: offer → share link → buttons
• Use collapsible overlays with a referral icon badge when minimized

>

Overlays are easy to add and test! Check out How to Add an Onsite CT A and A/B Testing Your Campaign to get started.

>