Create and Manage Classic Overlays

Create engaging messaging for specific audiences with an easy-to-use interface.

Create an Overlay

Choose an Overlay Template

1. Select New Overlay.
2. From the dropdown menu, select Classic Editor.
3. The Choose a basic template screen opens:
   
4. Click an image to select either bar or modal for the type of Overlay you want to create. The Overlay Builder opens.

The Overlay Builder

On the Overlays page, when you click New Overlay or click the name of an existing overlay, the Overlay Builder opens.

• The Top Bar displays the editable Overlay Name and Status (Active or Inactive), its Last Saved Date/Time, and a Save button to commit your changes.Pre-click and Post-click options are available for the Email Signup modal and bar Overlays. Post-click shows your selected Display Message.The overlay will not be displayed to any visitors when set to "Inactive."
• The Side Bar offers the tools for creating and editing your overlay, with five tabs: Setup, Style, Content, Targeting, Preview. Note that different options may be displayed on each tab depending on the type of overlay you have selected.
  • Setup - Set the background preview URL and Overlay dismissal option. Setup options vary depending on the type of Overlay you're creating.
    

    Note: Only Natural Lists are supported in User Sign-Up Overlays. Smart Lists are not available for selection.

    
    
    

    Announcement	Email Signup

  • Style - Set the overlay position, color, optional image, and background opacity. Options vary depending on the Overlay type you're creating.
    
    

    Bar Overlay	Modal Overlay

  • Content - Enter the overlay content. Content options vary depending on the Overlay type you're creating.
    
    

    Announcement	Email Signup

  • Targeting - Select which pages, users, or user activity should launch the overlay, with optional frequency, time period, and priority settings.

    Note: Smart Lists are available for selection under Visitor > Lists.

    
    
  • Preview - See a live preview of your Overlay exactly as it will appear on your site after all CSS processing. It will open up in a new tab and load the Overlay on your site, provided the Engage by Sailthru Javascript tag is on the target page.
    
    
• The Preview pane shows the current appearance of your overlay against the URL you set as the background.
  • Set the preview URL in the Setup tab Change Background URL dialog box.

For more information about any of the individual settings within the builder, see Overlay Settings, below.

Overlay Settings

Setup

Confirmed opt-in with the signup_confirm() function

• A user clicks to sign up from your Overlay. The system creates an array called "signup_lists".
  • The array contains the lists you selected from the Destination List drop-down menu. For example, if you select "Daily Newsletter" and "Weekly Deals", then the signup_lists array resembles the following:{signup_lists=["Daily Newsletter", "Weekly Deals"]}

1. Automatically pipe the array into the signup_confirm() function. The function is contained in the link you send in your signup confirmation template.<a href="{signup_confirm(signup_lists)}">Click here to confirm your email address</a>
2. When the user clicks the link in the confirmation email, the system adds them to the selected lists.
3. The user is redirected to a confirmation page. To use a custom page instead of your default Thank You page, create an "Other"-type Hosted page named "signup-confirm".Note: The type "Other" and the name "signup-confirm" are required to access and edit the signup confirmation page.

Style

Content

Note: Safari does not support changing text alignment of drop-down elements (<select>). They will always be left aligned.

Additional Content Options

Adding Custom Elements in HTML

You may wish to add additional form elements to your Overlay that are not available in the UI, like a radio button or checkbox. Add any additional HTML elements in a Text field. To add a Text field to your Overlay:

1. From the Content tab, click the plus icon in the Visual Editor panel to open the Add Element menu. Select Text from the menu to add a Text field.
   
2. Select the new text field to open it. Add your HTML in the Copy section:
   

Adding a Checkbox If you want to allow users to select multiple options, you'll need to add checkboxes to your Overlay. To add a checkbox, add the following markup to your Copy field. <input type="checkbox"> To capture user data with the checkboxes, create a form:

<label>Select your favorites: </label><form class="sailthru-var" data-var-name="flavor" data-var-attribute="value">  <input type="checkbox" name="flavor" value="vanilla">Vanilla
  <input type="checkbox" name="flavor" value="chocolate">Chocolate
  <input type="checkbox" name="flavor" value="pistachio">Pistachio  
</form>

For more information, see Capture Additional Data in an Overlay.

Targeting

Create an Email-Triggered Overlay

Trigger an overlay for users who click from an email.

1. Create a new overlay or select an existing overlay.
   1. Set the Trigger Event from the Targeting tab. Select "User clicks from an email" from the dropdown menu.
   2. To use a promo code, set it up as you usually would in your campaign and call it in your message template. To show the code in your overlay, use {page.STpromo} in your overlay text.
   3. Save your work. You can move to the next step without activating your overlay, but it must be activated before sending the email.
2. Go to your Campaigns page.
   1. Create a new campaign or modify an existing campaign to link it to your overlay.
   2. In the Campaign workflow Configure tab, go to the Personalize section.
   3. Select the name of your email-triggered overlay from the Triggered Overlay dropdown menu. You may link an inactive overlay to your campaign, but you must activate the overlay for the email link to trigger the overlay.

Targeting with Key-Value Pairs

Boost your targeting power with nearly anything your site is capable of passing through Javascript. Targeting Overlays has been connected to profile recognition. Now, through a Javascript parameter, you can leverage almost any site visitor information you track, whether through cookies, local storage, or URL parameters. Prerequisites

• Sailthru.JS is already installed
• Working implementation of overlays
• You have an Engineering team or someone capable of making the JS changes

What to expect about targeting using key-value pairs

1. Initial adjustments to sailthru init
2. Example to grab values from cookies and insert a key and a value to init
3. Advisory on other use cases (url params, local storage)

Adjustments to sailthru init

There is a new parameter called overlayKeyValue which is an object with string values for key and value. A user can include any number of keys and values, and will match one pair given the setup done in my.sailthru. That is, out of the one-or-more key-value pairs passed via the JS, our service will see if a key-value pair matches with an Overlay. If the case is true, then the Overlay will return. Other key-value pairs that do not match are silently ignored. Note that only string values are supported at this time, and values such as numbers or Booleans are not.

<script src="https://ak.sail-horizon.com/spm/spm.v1.min.js"></script><script>Sailthru.init({ customerId: '<yourID>', overlayKeyValue: {test_key: "test_value"} });</script>

If your website is built with Single Page Application framework (no reload on navigation), use the following code:

<script src="https://ak.sail-horizon.com/spm/spm.v1.min.js"></script>
<script>Sailthru.init({hostWebsiteType:"spa", customerId: '<yourID>', overlayKeyValue: {test_key: "test_value"} });</script>

Example to grab values from cookies and insert a key value to init

Within your implementation, we encourage you to pass in more key-value pairs via the JS than needed. That is, the more information about the user that your web application manages or depends upon which gets passed to the system, the easier it is to grant a marketer flexibility in their targeting schemes! We expect that passing more key-value pairs can simplify the JS implementation and make Overlays targeting setup (from a marketer's perspective) less dependent on an engineer.

foo: Sailthru.getCookie('sailthru_hid'),

In the example snippet above, an engineer would place the following inside of the overlayKeyValue object which would then be parsed by our service. On the marketer's end, when they set up an Overlay, in order to match the example above so that the Overlay only fires for that key and value, they would set the key field to read foo and the value field to read [specific hid value] if the intention is to target a very specific user. Other system or non-system cookie values can be passed in as desired.

Advisory on Other Use Cases

We know that in today's landscape, for retail or media customers alike, there's plenty of trends that have been happening over the past few years. Some examples include:

• Expanded paid advertising campaigns which pass users over by UTM parameters.
• The increase of quiz experiences to guide a user through several questions and acquire information, which is either stored in cookies or in local storage.
• The increase of third-party libraries that customers may depend upon to power features like currency and translation services (i18n) or audience matching (DMPs, etc.).

Instead of developing bespoke solutions for each of these scenarios, we've developed a broader solution to help engineering teams unlock the targeting potential using Javascript. That means you can use industry-standard Javascript APIs for deriving key-values to pass to the system.

As a brief reminder, we like to refer to documentation resources broadly available such as the ones listed here:

• MDN: Local Storage
• MDN: Location (for accessing data in URL)
• MDN: URLSearchParams (for accessing query string values, modern browsers only)

URL Targeting Details

URL Targeting allows you to specify which of your site's URLs will display the overlay. There are four types of URL targeting available. The URL targeting results will be different depending on whether or not you choose to exclude a URL.

When the Exclude this URL checkbox is not selected

Simple

Enter a URL and the system will disregard any query string and protocol, matching only those URLs that contain the same domain and path or file extension.

Exact

Matches the entered URL exactly. Trailing slashes will be ignored.

Contains

Matches only URLs that contain or exactly match the entered text

Pattern

Matches only URLs that contain specified "regular expression" pattern within them.

When the Exclude this URL checkbox is selected:

Simple

Enter a URL and the system will disregard any query string and protocol, matching only those URLs that contain the same domain and path or file extension.

Exact

Matches the entered URL exactly. Trailing slashes will be ignored.

Contains

Matches only URLs that contain or exactly match the entered text

Pattern

Matches only URLs that contain specified "regular expression" pattern within them.

URL Fragment Targeting

When you want to display an overlay based on a website path that contains a #, use URL fragment targeting.

This option involves adding code to the Engage by Sailthru JS on your website. You may need developer resources to activate fragment targeting.

1. Alter the Engage by Sailthru JS init block to include the 'fragmentEnabled' flag.
   Copy

   //Customers must set this flag to enable fragment targeting.
   //This is not a breaking change for customers who decide not to use this feature.
   //In cases where this flag is not enabled, then targeting will operate such that the fragment character and trailing values are ignored.
   
   Sailthru.init({
   customerId:,
   fragmentEnabled: true
   });

2. Push the change and verify that the new init block is in place on the website.
3. Create an overlay's targeting, in the 'Targeting' portion of the Editor, either with or without the '#' character as you require. Your URL matching rules may resemble the following image:
   

Preview Your Overlay On-Site

You can use a special query parameter in your site's URLs to preview any overlay to see how your overlay design and website CSS will interact, regardless of its status (active or inactive) and targeting rules. Stats are not counted for this feature. Simply append the following to your URL:

#STpreview=<overlayID>&STshowOverlay=1

To obtain the overlayID, open the overlay's configuration page within My Sailthru. The ID is the portion of the URL after the last slash. For example: https://my.sailthru.com/spm/overlays#/0c4ed9e1-32ba-4124-94b9-d0ea7909cb01

Capture Additional Data in an Overlay

Add form elements to your Overlays to collect and record user information that's relevant to your marketing efforts. Any information you captured in a standard form you can now capture through your Overlays. Segment, target, and message your users more effectively with additional information.

Using Built-In Form Elements

Overlays offer built-in form elements to capture user data with no code needed. Add form elements from the Visual Editor by clicking the plus sign:

This opens the Add Element menu:

Selecting an Input Field or Drop-down element allows you to add custom fields to capture information.

When a user makes a selection from a drop down options list or enters a value into an input field, it is added to their profile under your selected custom profile field name.

Using HTML Elements and Attributes

The best way to collect more user information on signup is with HTML form elements. For example, the following markup indicates the class, var name, and var attribute:

<input type="text" class="sailthru-var" data-var-name="first_name" data-var-attribute="value">

The sailthru-var class indicates to JavaScript that the element contains var data. The markup above also specifies the var name and the name of the element that contains the var value.

Capture vars using element tags

Here are some examples of capturing user information using element tags:

Capture a user's first name

<input type="text" class="sailthru-var" data-var-name="first_name" data-var-attribute="value">

Capture a user's favorite subject

What's your favorite subject? 
<select class="sailthru-var" data-var-name="favorite_subject" data-var-attribute="value">
  <option value="ela">Readin'</option>
  <option value="law">Ritin'</option>
  <option value="math">Rythmatic</option>
</select>

Capture a user's gender

The option name must match the data-var-name. In this example, the data-var-name is gender, which is matched by the input element's name.

<label>Gender: </label><form class="sailthru-var" data-var-name="gender" data-var-attribute="value">  <input type="radio" name="gender" value="male">Male
  <input type="radio" name="gender" value="female">Female
  <input type="radio" name="gender" value="other">Other  
</form> 

Capture a user's birth date

<input type="date" class="sailthru-var" data-var-name="birth_date" data-var-attribute="value"/>

Add an additional opt-in option

<label><input type="checkbox" class="sailthru-var" data-var-name="books_signup" data-var-attribute="checked"/>Sign up for exclusive books news!
</label>

Signup var Precedence

userSignup and userSignupConfirmedOptIn ,two functions in the JavaScript API, use the following var sources in this order of precedence:

1. Sailthru.signupVars
2. HTML elements
3. User vars passed through the "integration" module to the signup functions:Sailthru.integration("userSignup", {vars: {...}, ...}).This can happen at user conversion or at any time.

Conditional Overlay Rendering

When you wish to conditionally control which users see an overlay, use the onBeforeOverlayRender function in your site Javascript. Replace someVar in the sample with your chosen value.

const someVar = false
const showOverlay = () => {
    if (!someVar) {
        return false
    }
}
Sailthru.init({ customerId: '', onBeforeOverlayRender: showOverlay });

Add Custom CSS to Overlays

When creating an overlay, you may need to add custom elements. Overlays allow you to use both custom CSS and HTML.

Use Overlapping Elements

Using CSS allows you to add both a custom input element, like a date picker, and a label for it. The following uses both HTML and CSS to add and style a date picker.

Add HTML

1. Create a new Overlay or open an existing one. This example uses a User Sign-up overlay.
2. In the Content tab, add a text element. Select the element to edit the options.
3. Add the following HTML in the Copy textbox. The input you're adding will send the entered birthdate as a custom field or variable.
   
   Copy

   <div id="DOB">
   <div>
   <input type="date" id="birth_date" name="birth_date" class="sailthru-var" data-var-name="birth_date" data-var-attribute="value" placeholder="YYYY-MM-DD" style="font-size: 14px; font-color: inherent;" />
   </div>
   <div><label id="label">Birthday</label>
   </div>
   

4. This adds a new section to your overlay, identified as DOB. The input and label elements within the section also have an id, which allows you to use CSS to add styling. You should see a date picker with the label Birthday underneath it in your overlay.

Add CSS

1. Open the Style tab for your Overlay.
2. First, add the CSS selector and declaration for the input and select elements. This will set everything at the same width and use a height relative to the font size:
   
   Copy

   input, select {
     width: 260px;
     height: 2.1em;
   }

3. Next, set the position for the DOB section.
   
   Copy

   #DOB {
     position: relative;
   }

4. Add styling for the label.
   
   Copy

   #label {
     position: absolute;
     top: 7px;
     left: 182px;
     color: rgba(55,61,63,0.8);
   }

5. Set the position for the date picker element. This sets it to the right of the container, keeping it from overlapping with the label.
   
   Copy

   #birth_date {
     color: rgba:(55,61,63,0.8);
     text-align: right !important;
   }

6. Your overlay should resemble the following image: