Overlays 01/06/20

Add HTML Buttons on Overlay announcements!

In cases where a client may want to implement a button on an Announcement-type overlay with a custom design and custom close action, then Sailthru allows the use of a combination of the Editor and JS code to:

  • Implement a button in the Editor.
  • Have the button reference a function.
  • Host the function on the website that calls supported Sailthru methods (i.e. GDPR/cookie setting, overlay hiding) and other behavior accessible to the client.

Prerequisites

  • Client has a license for Overlays
  • Sailthru.JS is already installed
  • Working implementation of overlays
  • Recommended: the client has an Engineering team to make the JS function change

What to expect about the function

The default JavaScript setup referenced on our developer documentation (LINK) will render an Overlay based on the client Product subscription and any active Overlay campaigns where valid targeting criteria are active. The default JS also includes several public functions.

The relevant Sailthru functions for this document are:

  1. To hide an overlay – use Sailthru.overlay('hide');
  2. To set the GDPR Do Not Track flag – use Sailthru.track('gdprDoNotTrack');
  3. To set a cookies Do Not Track flag – use Sailthru.track('cookiesDoNotTrack');

Code Snippet Examples

The following demonstrates a button, which calls a custom function. The custom function then sets the Sailthru cookies DNT flag and also hides the overlay from view of the end user.

Example – Creating a button, with custom inline styling, that allows the user to click to hide the overlay and set cookies to DNT.

Snippet in the Editor (located at Messaging > Onsite / Overlays > [your overlay] > Content)

  • Within an Announcement overlay of your choosing, add a new content block of type ‘Text’
  • Within the content block, in the ‘Copy’ field, include the following HTML or modify it to suit your needs:

<span style="font-weight: 400;"><button type="button" onclick="customCloser" style="background-color:#4CAF50; border:none; color:white; padding:15px 32px; text-align:center; text-decoration:none; display:inline-block; font-size:16px;">Close Me</button></span>
  • The style parameters specified are an example only, to illustrate the use of inline CSS.

Snippet hosted on your website

// This function is called from the Sailthru Editor UI.
function customCloser() {
	Sailthru.track('cookiesDoNotTrack');
	Sailthru.overlay('hide');
};

Frequently Asked Questions

Q: Does the click handler need to be declared before the overlay fires?

A: Ideally, the order of placement on the webpage should be as follows: first, the Sailthru <script> tag, then, the click handler, and then, the Sailthru.init().

 

Top