DailyStory JavaScript API

The DailyStory beacon adds activity tracking, but it also loads the DailyStory JavaScript API.

The DailyStory JavaScript API is pure JavaScript and has no dependencies on jQuery or other JavaScript frameworks.

Important the DailyStory JavaScript API is loaded asynchronously. This ensures it does not interfere with your page load time, but also means that the API is not available immediately.

To ensure that the DailyStory JavaScript API is available you should run any JavaScript code that uses the API after the ds_ready event fires:

    // Listen for the event.
    window.addEventListener('ds_ready', function (e) {
    	
        console.log('The DailyStory JavaScript API is ready')

    });

The DailyStory JavaScript API is then accessed using the object reference Ds.

Popup API

DailyStory Popups are loaded from the data center specific URL of your DailyStory tenant. For example, a tenant in data center US-1 with the tenant id of 1a2b3c4d loads its JSON from:

    https://us-1.dailystory.com/ds/1a2b3c4d.json

This file will include any DailyStory Popups that are enabled for the tenant as well as other DailyStory features you have enabled.

Important: due to caching of the file, if you enable or change a popup in DailyStory it may take up to 20 minutes for changes to be available to your website.

Showing a popup when the page loads

To show a popup when the page loads using the JavaScript API add the following script (replacing 35 with the numeric id of your popup).

    // Wait for the event to indicate popups are ready/loaded
    window.addEventListener('ds_popup_ready', function(e) {   
        Ds.Pop.showPopup('35');
    });

The DailyStory API uses browser events to call your code after DailyStory is loaded.

Important DailyStory loads all its files after the main page loads. This ensures that the user's content is displayed as quickly as possible.

Show a specific popup offer when the visitor is leaving

To show a popup when the visitor is leaving your website using the JavaScript API, add the following script to your page:

    // Wait for the event to indicate popups are ready/loaded
    window.addEventListener('ds_popup_ready', function(e) {
        Ds.Pop.showPopupOnExit('35');
    });

Helper Functions

There are a number of helper functions available.

Ds.getQueryString(field)

This helper function returns the value of data sent on the query string. If no value is found it return null.

    var name = Ds.getQueryString("name");

Ds.loadJson(url, callback)

This helper function loads a Json object from a given url and calls a delegated function upon completion. You can also use it with an anonymous function.

    // anonymous function
    Ds.loadJson('https://mysite.com/some.json', function(err, json) {
    	// do something here
    });

    // delegated function
    Ds.loadJson('https://mysite.com/some.json', myFunction);

    // called after json is loaded
    function myFunction(err, json) {
        // do something here
    }
    	

Ds.addEvent(obj, event, callback)

Ensures events are safely added for all browser types. For example, if you want to listen to the click event of a button:

    <button id="mybutton" >click me</button>

    // add click handler to mybutton
    var button = document.getElementById('mybutton');
    Ds.addEvent(button, 'click', buttonClicked);
    
    function buttonClicked(e) {
    	console.log('The button was clicked');
    }
    

Ds.hasClass (element, className)

Checks an element to see if it contains a class name.

    <input type="text" id="myTextbox" class="error" >

    // is the error class present?
    var textbox = document.getElementById('myTextbox');
    var exists = Ds.hasClass(textbox, 'error');
    

Ds.addClass (element, className)

Adds a class name to an element.

    <input type="text" id="myTextbox" >

    // is the error class present?
    var textbox = document.getElementById('myTextbox');
    Ds.addClass(textbox, 'error');
    

Ds.removeClass (element, className)

Removes a class name from an element.

    <input type="text" id="myTextbox" class="error" >

    // is the error class present?
    var textbox = document.getElementById('myTextbox');
    Ds.removeClass(textbox, 'error');