Overview
Overlays hover over your site's content. There are two types of overlays:
Call-to-action (CTA) overlays provide an easy way to let your customers know about your referral program without the need to negotiate real-estate on your page. CTA overlays are useful if you want to get up and running quickly without trying to create "holes in the page" for your social referral program to appear. In addition, they're great for grabbing your customers' attention.
Reward landing pages are part of the redemption flow for your campaign incentives, and are launched from links in either referral or reward emails. They can be configured to present advocates and friends with single or multiple reward options. The multiple reward options overlay provides a quick and easy interface for advocates and friends to select their reward from up to five options.
Overlay CTAs
Appearance
Overlay CTAs can be deployed onto any of your pages that contain Extole's JavaScript library. They are typically configured to be fixed in the bottom right corner of the browser window (and across the bottom on a mobile device). Overlay CTAs display in three modes:
Standard: Shows a simple line of text telling customers about your program.
Expanded: Pops up to show more text to your customer. This provides more information about your program and catches your customer's attention. Overlay CTAs will automatically switch to this mode to "tickle" your customer and grab their attention.
In any mode, if your customer clicks or taps on the CTA, it will launch the sharing experience.
Standard Mode
Standard mode is how the CTA first appears to your customers. It should contain a single line of simple text telling your customer about the referral program, such as "Share with a friend and get $10," or "Give your friend 15% off and get 15% off."
Your customers are able to hover over overlay CTA to make them expand and show more information about your program.
Expanded Mode
This mode provides more room for the CTA to display additional information about your referral program. Overlay CTAs will change into this mode when your customers hover their mouse over it.
The expanded mode automatically pops up or "tickles" your customer to catch their attention. This is useful for customers on a touch device that cannot hover over it or customers that just don't notice it. After the customer has been on your page for period of time, such as 30 seconds, an overlay CTA will automatically expand. Your customer can minimize it by pressing the close icon, otherwise the CTA will automatically minimize itself after a short period of time.
Once the overlay CTA has tickled your customer, it won't do so again for a week. They can always see it again by tapping it or hovering over it.
Configuration
Overlay CTAs consist of the following elements:
Element Name | Description | Default |
Headline | Text that displays in the minimized portion of the overlay. | Refer a friend and GET Our Gratitude |
Headline Text | The headline text of the expanded version when you hover over the overlay. | Refer a friend |
Subheadine Text | The subheadline text of the expanded version when you hover over the overlay. | GET Our Gratitude when they make a purchase |
Button Text | Button text of the expanded version when you hover over the overlay. | Refer Now |
Background Color | Background color of the CTA. | #000000 |
Font Color | Color of the font in both the minimized and expanded version of the overlay. | #ffffff |
Accent Color | Button color and word bubble color. | #3395b0 |
Reward Landing Experiences
Appearance
Reward landing experiences can be deployed onto any page with Extole's JavaScript library. They are typically configured to appear in the center of the browser window (or mobile device).
Configuration
Reward landing experiences are configured by Extole. You'll need to submit a request to your Client Services team to help you through this process.
Element Name | Description | Default |
Primary Color | The primary color to use for the overlay. | |
Accent Color | The accent color to use for the overlay. | |
Header Background Color | The background color to use for the header. | |
Footer Background Color | The background color to use for the footer. | |
Header Text | The text to display in the header. This should be generic copy, since rewards will vary. | Claim your referral reward! |
Header Text Font/Font Size/Color | The font, font size, and color to use for the header text. | Helvetica Neue, 12, #FFFFFF |
Destination Email Text | The text pointing to the email address where any rewards will be sent. | Your rewards will be sent to [advocate email] |
Destination Email Text Font/Font Size/Color | The font, font size, and color to use for the destination email text. | Helvetica Neue, 10, #000000 |
Reward Confirmation Text | The text that displays once the advocate has selected their reward. | Your reward is on its way to: [advocate email] |
Reward Confirmation Text Font/Font Size/Color | The font, font size, and color to use for the destination email text. | Helvetica Neue, 12, #000000 |
Button Text | The text to display in the referral button. | Refer more friends |
Button Text Font/Font Size/Color | The font, font size, and color to use for the referral button text. | Helvetica Neue, 10, #FFFFFF |
Button Color | The color to use for the referral button. | |
Checkbox | A checkbox for advocates to tick in lieu of an e-signature (optional). |