Menu

Website Popup Setup

At a high level, our client-side popup API allows you to control popup behavior, listen and respond to events, and poll for current states. Here we’ll cover how to get set up and interact with your popups programatically.

SlickText Tag

The SlickText Tag is a snippet of code that powers all of the SlickText-related functionality on your website. In order for popups to display on site, you'll need to install your SlickText tag. This tag is unique to your account and only needs to be installed once for any and all future popups.

Your code can be found in your SlickText dashboard under My Account >> SlickText Tag.

The code should be pasted into every page of your site, just before the closing </body> tag. Once it’s on your website, you won't have to change it again and will work with all future features.

If you have an e-commerce integration installed on your account, you do not need to add this code to your website. It’s been auto-installed for you.

Sample SlickText Tag


    <!-- Begin SlickText Tag -->
    <script defer src="https://cdn.slicktext.com/scripts/stag.min.js"></script>
    <script>
    window.sTagConfig = window.sTagConfig || [];
    function sTag(){sTagConfig.push(arguments);}
    sTag("ut", "ha11d72j4dfa42cafdbd7254a4e92kc0");
    </script>
    <!-- End SlickText Tag -->

There are a few configuration options that can be passed to your tag...

Option Type Description
ut (required) String The unique identifier that represents your SlickText account.
delay Integer The number of seconds to delay before fetching account data. This is helpful if you want to defer the running of your popup scripts.
popup Integer A specific popup ID that you'd like the tag to load.

Popup Classes

We support certain css classes that, when applied to a link or other clickable HTML element, can control the behavior of your popups. The associated actions are applied regardless of your popup's current state.

Class Action
.st-popup-open Opens the popup
.st-popup-close Closes the popup
.st-popup-minimize Minimizes the popup

Example


    <a class=".st-popup-open" href="#">Click Me to Open the Popup</a>

Popup Functions

Similar to the action classes, we support certain action functions that control the behavior of your popups. The associated functions run regardless of your popup's current state.

Function Action
window.SlickText.popup.open() Opens the popup
window.SlickText.popup.close() Closes the popup
window.SlickText.popup.minimize() Minimizes the popup

Example 1


    <a href="#" onclick="window.SlickText.popup.open()">Click Me to Open the Popup</a>

Example 2


    var container = document.querySelector('#container');

    container.addEventListener('hover', function(){
        window.SlickText.popup.open();
    });

    // Opens the popup when container is hovered

Popup Events

In some cases it’s helpful to know when the state of your popup has changed. This allows your application to act accordingly based on the user’s behavior. We support five specific events that are dispatched with the document as the event target.

Event Action
st-popup-ready Popup is loaded and ready to be interacted with
st-popup-opened Popup was opened
st-popup-closed Popup was closed
st-popup-minimized Popup was minimized
st-popup-submitted Popup was submitted

Example


    document.addEventListener('st-popup-opened', function(){
        alert('The popup was just opened!');
    });

Popup States

In addition to listening for events when your popup state changes, you can also check the current state.

Example


    alert(window.SlickText.popup.state);

    // Alerts "open"

Debugging

With the wide array of targeting rules we provide for hiding and showing popups, you may find yourself wondering why yours is or isn’t showing on any given page load. Our debugging tool allows you to follow the logic of why a popup is allowed or not allowed to be displayed.

Simply open up your browser's console, type window.SlickText.debug() and hit enter.

In the case below, we are trying to figure out why a popup isn’t showing on https://www.slicktext.com/pricing.php. After running the debug function, we find that there’s a page targeting hide rule preventing the popup from showing when the URL contains “pricing”.

Example Output


    Debug Started...

    ### sTag Script ###
     - script loaded. 
     - ha11d72j4dfa42cafdbd7254a4e92kc0 set as user token.
     - https://slicktext.s3.us-west-2.amazonaws.com/stag-data/slicktext.com-ha11d72j4dfa42cafdbd7254a4e92kc0.json as data url.
     - data loaded.
     - 1 popup found in data.
     - including popup script.

    ### Popup Script ###
     - script loaded.
     - evaluating the following popups for display: 144.
     - evaluating popup 144 for display.
     - page targeting hide rule ["https://www.slicktext.com/pricing.php" contains "pricing"] matched.
     - page targeting requirements not satisfied.
     - no date targeting rules set.
     - date targeting requirements satisfied.
     - device targeting show rule ["desktop" in ("desktop", "tablet", "mobile")] matched.
     - device targeting requirements satisfied.
     - popup ineligible for display.
     - no popup selected for display.

    Debug Complete.