How To Configure The Slickstream Highlighter

The Slickstream Highlighter allows you to draw your visitors' attention to any element on your page.  When the element comes into view, the rest of the content on the page is greyed out, temporarily highlighting the selected element.  Scroll down to see a live example.

Highlight Anything

The Slickstream Highlighter will highlight anything on your page.

  • Text:  A quote or specific paragraph you'd like to bring to your visitors' attention.
  • Forms:  A form you'd like your visitors to consider filling in.  Highlighter will work with any form from any provider including all inline subscription forms from all email service providers (ConvertKit, ActiveCampaign, etc.). 
  • Images:  An image on the page you'd like to highlight.
  • Custom elements:  Any custom block of content like a recipe card or an infographic that you'd like to stand out.
  • Calls to action:  Any call to action that you'd like to highlight as the next step in your visitors' journey.

How To Configure The Highlighter

The Slickstream Highlighter will highlight one element per page when it comes into view for the first time.  Once an element has been highlighted, it will not be highlighted again during that pageview.  Should a visitor navigate away from a page and then return to it, the element will again be highlighted.

To turn on the Highlighter, in your Slickstream portal, click on the Config tab and then select Features.

Highlight - features-2

Scroll down to find Highlighter, enable it and save the change.

Highlight - feature setting

Now switch to the Site Wide tab and select Highlighter.  Enter the CSS selector(s) for the elements you wish to highlight on desktop (large screens) and mobile (small screens).  Most valid CSS selectors can be used.  If you'd like help identifying a selector, don't hesitate to contact Slickstream Support.

You can also set the time in seconds that you would like the element to remain highlighted if the visitor stops scrolling.  The default is 10 seconds.

Highlighter - highlight settings


Below is an example of an element on this page that is being highlighted.  To see the effect again, just refresh this page.

Highlighter - highlighted element


Additional Styling

There are some additional CSS properties that can be used to further control the highlighting behavior.  These styles should be applied to the Body element on the page.  

--highlight-backdrop-color: sets the color of the backdrop. Default value is rgba(0,0,0,0.6)
--highlight-backdrop-zindex: sets the z-index of the backdrop. Default value is 999.
--highlight-element-zindex: sets the z-index of the element being highlighted, when highlighted. This value should be higher than the z-index of the backdrop. Default value is 999999.

In addition to these CSS properties, Highlighter will add a class name highlighter-is-highlighting to the specified element when it is being highlighted. This allows you to customize the look and feel of the element if you'd like it to change when highlighted.

To add these properties using Slickstream, in your portal, select the CSS option under the Site Wide tab and add the properties in the Global CSS text box as shown below.

Highlighted - CSS-1