Overlays

With Sailthru’s Overlays, engage site visitors with targeted messaging as they browse.

The overlay UI showing a preview of the overlay and the website it appears on

Create Overlays on your site with an easy-to-use interface in My Sailthru. Display user signup forms, special offers, and more–each as a modal window or a bar at the top of the page.

  • Target users based on their Sailthru lists or onsite activity
  • Restrict messages to specific pages or page types
  • Create content with a simple WYSIWYG editor, uploaded images, or custom HTML

Overlays require Onsite. If you do not see the Onsite menu at the top of My Sailthru, please contact us to inquire about adding these features. Overlays also require that the latest Sailthru JS is embedded on your site.

Overlay Goals

Each overlay can be displayed as a modal window or a top bar that the user can close or interact with, for example, by entering information and clicking a “submit” button.

You can select from two types of overlay goals, each including your own custom message and design:

  • Promote Something (Announcement) – A simple message without any interactive elements.
  • Grow Mailing List (User Signup) – Include a form for the user to enter their email address.

Overlay List and Metrics

You can view details of all existing overlays when you open the Overlays section of My Sailthru. For each overlay, the following information is displayed:

  • Name – Internal name you have set for the overlay. Click to view or edit its settings.
  • Status – Active or inactive.
  • Schedule – The start and end time for the display of the overlay, or “Indefinite”.

    Note: An Overlay must also be active in order to be displayed, regardless of schedule time. Even if currently scheduled, an inactive Overlay will not display.

  • Priority – The Priority level of the overlay. This determines when the overlay shows if there are multiple overlays attached to one page. Possible values are Default, Medium, and High.
  • Goal – The type of challenge to solve for with the overlay: Announcement or User Signup.
  • Audience – The targeted users: Lists, Anonymous, Known, or All users.
  • Views – Number of times the overlay was displayed.
  • Click Rate – The number of clicks on a link within the Overlay, inclusive of anything that is marked up with an anchor tag set . This excludes any clicks on the X to close the Overlay or on the Submit button.
  • Conversion Rate – The number of conversions divided by views. Conversions are currently only available in User Signup Overlays.

Create an Overlay

Choose an Overlay Template

When you click New Overlay, the Choose a basic template screen opens:

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

Setting Options Availability
Change Background URL Enter the URL for your selected background. All Overlays
List to add subscribers to The lists to which the user should be added.

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

User Sign-Up
Source to attribute to each subscribers’ profile Enter a source var which will be added to each subscriber’s profile. User Sign-Up
Confirm subscription via email If enabled, the selected Confirmed Opt-In template is sent and the user is not added to the list until they click the link you have provided in the email. If disabled, the user is added to the Destination Lists immediately upon their submission of their email address, and the sailthru_hid cookie is set to identify the user for current and future browsing sessions.

Using confirmed opt-in can cut down on the number of bot sign-ups.

User Sign-Up
Overlay cannot be dismissed When selected, the Overlay cannot be dismissed. All Overlays

Confirmed opt-in with the signup_confirm() function

  1. A user clicks to sign up from your Overlay. Sailthru 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"]}

  2. Automatically pipe the array into the signup_confirm() function. The function is contained in the link you send in your signup confirmation template.

    Click here to confirm your email address

  3. When the user clicks the link in the confirmation email, Sailthru adds them to the selected lists.
  4. 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

Setting Options Availability
Overlay Type
  • Modal – Overlay is displayed as a pop-up in your page (in the same browser window as your page).
  • Bar – Overlay is displayed as a bar located at the top of your page.
All Overlays
Dimensions For desktop browsing environments only. Sets the maximum width in pixels for the Overlay. If the viewport width is less than the value in this field, the modal will adapt responsively, reflow the content of the overlay, and fit to the narrower viewport size. When the viewport is 550px or less, a mobile view is initiated which always sets the Overlay width to 90% of the current viewport width. Modals
Height The minimum height when the content within the bar does not force a greater height. Bars
Position Modal Overlays
Select whether the modal should be located near the top, middle, or bottom of the browser window. The modal will always be centered horizontally on the page.

Bar Overlays
Select the pinned location of the bar within the browser window. The bar can be pinned to the top or bottom of the page.

Modals
Padding Set the padding for your Overlay’s content. Modals
Background Color
  • Use the color-picker tools, or manually enter a 6-character HTML hex code or set of R/G/B color values. Manually entering either of these is recommended if you are attempting to match your brand’s color.
  • The last slider, which corresponds to the “A” box, specifies the overlay’s opacity on a scale of 0 to 100.
All Overlays
Border Set the pixel width of the Overlay border. All Overlays
Background Image You can use this feature to upload an image to display in the overlay. The image can be displayed above, below, or alongside text, or as a background image.
Note: It is also possible to display an inline image that is instead hosted on your site or elsewhere by embedding it with your own custom HTML.
To upload an image, click the toggle next to the words “Background Image”. Then:

  1. Click “upload image” and select an image from your computer.
  2. Under Position, select whether you want the image to show:
    • Above other content
    • Below other content
    • To the left of other content
    • To the right of other content
    • Behind other content. When this option is selected, additional Background Image Options are displayed.
      1. Fit – Resizes the image to fit inside the overlay, maintaining the image’s aspect ratio. Will cause letterboxing (background color to appear) above or beside the image if it does not match the overlay’s aspect ratio.
      2. Fill – Resizes the image to fit the width or height of the overlay-matching whichever side of the image is short of the overlay’s aspect ratio-so that there is no letterboxing and may be some cropping.
      3. Tile – Orients the image at the top-left of the overlay. Repeats image if it is smaller than the overlay. Maintains the image’s original size and aspect ratio.
      4. Center – Preserves image’s original size and aspect ratio. Cropping will occur if the image is larger than the overlay.
Modals
Background Screen Opacity The percentage visibility of the page behind the overlay when the overlay is displayed. All Overlays
Page Flow Inline – Pushes the page content down
Fixed – Covers the top portion of the page
Bars
Animation Because the bar loads after your page, customers will experience a “jump” – page content will move down to make space for the bar. Using animation helps to ease this transition. Bars
Custom CSS Add custom css to style your Overlay.
Any CSS entered in this field applies to the entire Overlay, and is the simplest way to do advanced style customization, rather than inputting CSS in other text fields within the Content tab.
All Overlays

Content

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

Setting Options Availability
Text Overlay text field. Use the editor options to change the font, size, color, and other attributes.
HTML is supported in text fields for adding additional form elements to your Overlay that are not available in the editor.
All Overlays
Email Input Set and format email field placeholder text. User Sign Up
Button Select a button color, enter button copy text, and configure a Post-Click Action.
For the Post-Click Action, you may either enter a message to display or a URL to which the user will be redirected. If you enter a message, after the user submits their email address, the message is displayed for 5 seconds before the overlay is automatically closed.

For the Post-Click Redirect, the user’s submitted email address will be automatically appended to the URL as a query parameter named em. For example, if you enter example.com/?utm_source=spm#welcome and your user enters user@example.com, the user will be redirected to example.com/?utm_source=spm&em=user%40example.com#welcome

Note that if you have included custom JavaScript functions to handle Sailthru’s response to the user’s email submission, your function may be configured to override the above Post-Click Actions. See the Sailthru.initfunction’s onSignupSuccess/onSignupError parameters.

User Sign Up

Additional Content Options

Setting Options Availability
Drop-down Set and format options to select from a drop-down list. Add a custom field name to collect additional information in your Overlay. User Sign Up
Input Field Set and format an additional input field. Add a custom field name to collect additional information in your Overlay. User Sign Up
Text Additional text field. Use the editor options to change the font, size, color, and other attributes. HTML is supported but not required. All Overlays
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 button, 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 Button
You may wish to give users an extra button for an action other than submitting information.

For example, if you want to give users an extra button, add a Text field following the preceding instructions. Then add the following markup as your Text field Copy:
<input type="button">
To create a labeled, working button, you’ll need to add an onclick event and a value.
<input type="button" onclick="alert('This is an alert box')" value="Click Me!">
To add a reset button, use the following markup as your Copy:
<input type="reset">
This allows users to return any fields to their default state.

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

Setting Options Availability
Where You can select to display the overlay “Sitewide” or only on “Specific Page(s)”.

When you select “Specific Page(s)”, additional options are displayed for selecting those pages.

Click “Add URL” to add at least one URL or URL pattern. A field for the URL/pattern is displayed, and it will be treated based on your chosen type of matching below: Simple, Exact, or Contains. (See URL Targeting Details.) If you add multiple URLs/patterns, they are treated with ‘OR’ logic-the URL must match only one of your entries in order for the overlay to be displayed.

All Overlays
Who Display the user to:

  • List(s) – Only those visitors who exist on one or more of your Sailthru Lists
  • Everyone – All visitors
  • Logged-in visitors only
  • Anonymous visitors only

Devices:

  • Desktop only – Enables the option to display on page Exit Intent
  • Desktop & mobile
  • Mobile only
All Overlays
When: Trigger
  • Display the overlay to a given user only after your chosen number of:
    • Pageviews (during the current session)
    • Value of cart
    • Seconds of time on page
    • Seconds of inactivity on page. Activity is defined by mouse movement, clicks, or scrolling
  • Display the overlay when a user tries to leave the site. Exit intent is triggered when a user moves their mouse to within 20 pixels of the top of the browser’s viewport, indicating that they might close the window or enter a different address.
    Note: Exit intent is only available for desktop overlays.
  • The user clicks through from an email.

A user’s session is considered to have ended 30 minutes after the user’s last pageview.

All Overlays
When: Frequency Capping Limit the number of times that the Overlay may be displayed for the user:

  • Once per visit – Once per site session. A session is is considered to have ended when the user’s last pageview occurred more than 30 minutes ago.
  • Once ever – Only once for this user. (If the user visits again in a new browser or with cleared cookies, the user may see the overlay again.)
  • Every pageview – The user will see the overlay on every pageview.
All Overlays
When: Start and End Dates
  • Start Date – The date to begin displaying an active Overlay.
    • Will not start an inactive Overlay
    • When blank, the Overlay will display as soon as it is set to Active.
  • End Date – The date to stop displaying an Overlay.
    • When blank, the Overlay will continue running until it is set to Inactive.
All Overlays
When: Priority Available Priority options include High, Medium, and Default. By default, all Overlays have a priority rating of Default.
Overlays are prioritized according to the following rules:

  1. Targeting filters are applied first. If one overlay can target a page view and another cannot, only the applicable overlay is considered, irrespective of priority ratings.
  2. If 2 or more overlays can target a page view, Sailthru compares their priority ratings. The higher rating wins: High > Medium > Default
  3. If the selected overlays have the same priority rating, the overlay creation time is used for comparison. The more recent creation time wins. Last modified time is not used for prioritization.
All Overlays
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 Sailthru 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.

URL Targeting Details

URL Targeting allows you to specify which of your site’s URLs will display the overlay. Four types of URL targeting are available:

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

Enter:
example.com/category or
example.com/category?item=123

Matches Include:
http://www.example.com/category
https://example.com/category
http://www.example.com/category/item
http://example.com/category/cat2/pg.htm?x=1
http://example.com/category?item=456

Does Not Match:
http://www.example.com/other/
http://shop.example.com/category/


Enter:
example.com/category/page.html

Matches Include:
http://www.example.com/category/page.html
https://www.example.com/category/page.html
http://example.com/category/page.html
https://example.com/category/page.html

Does Not Match:
http://www.example.com/category/
http://www.example.com/category/contact.html
https://shop.example.com/category/

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

Enter:
https://example.com/

Matches Include:
https://example.com
https://example.com/

Does Not Match:
http://example.com
https://www.example.com
https://example.com/item/123

Contains Matches only URLs that contain or exactly match the entered text

Enter:
apparel

Matches Include:
http://example.com/category/apparel
http://example.com/blog/check-out-our-apparel

Does Not Match:
http://example.com/accessories


Enter:
http://example.com/category/apparel

Matches Include:
http://example.com/category/apparel
http://example.com/category/apparel/item/123

Does Not Match:
https://example.com/category/apparel

Pattern Matches only URLs that contain specified “regular expression” pattern within them. Enter:
example

Matches include:
https://example.com
https://example.net
https://www.example.com/something.html
https://baddomain.com/example

Does not match:
https://exam.com


Enter:
^.*\.example\.com

Matches include:
http://example.com
https://www.example.com/something.html

Does not match:
https://example.net
https://baddomain.com/example
https://exam.com


Enter:
^((?!fox).)*$

Matches include:
https://example.net
https://baddomain.com/example

Does not match:
https://baddomain.com/fox
https://fox.net
https://www.example.com/fox.html
https://example.com/path?fox

Test Your Overlay On-Site

You can use a special query parameter in your site’s URLs to view any overlay for testing purposes, 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 Sailthru 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.

Attribute Description Allowed Values
class Associates CSS styles with the element. Sailthru JS will use a special class to indicate that the element contains var data. sailthru-var
data-var-name Specifies the name of the var to populate. Any valid profile var name.
data-var-attribute Specifies the name of the element attribute that contains the var value. Any valid HTML element attribute name.

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

Signup var Precedence

userSignup and userSignupConfirmedOptIn ,two functions in the Sailthru 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.

Top