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.

Conversion API

The conversion API is used to track conversions that happen during a web session. This is separate from the conversion REST APIs that can be called using an authorization key.

// Example function wrapping a call to the conversion API
function conversion(amount) {
  const funnel_uuid = 'ad045403-2141-4043-acde-babe9e5f6d8c';
	window.Ds && window.Ds?.conversion(funnel_uuid, amount);
}

In the example above, a call to the conversion() function along with an amount would create a conversion associated with the current user for the Shopify funnel for a specified amount.

The funnel UUID can be found by logging into DailyStory and navigating to Campaign > Funnels. Then view the settings for an individual funnel.

Custom funnels can be created, but integration install funnels automatically and use a standard UUID:

BigCommerce: 6b3817f6-23f0-406a-9de7-8c19f4f0b45a"
Flowhub: b1edd57c-4142-47d5-a9d8-c4dac7fa638a
Instamojo: 44720f61-0bcb-4543-8128-c09b071de3b9
Magento: d1287965-c147-4de8-a9e7-e14b2f68234b
Shopify: ad045403-2141-4043-acde-babe9e5f6d8c
Stripe: 8ef012e3-8752-4e75-9791-fa3698f8e304
Square: b976ff64-1247-426c-b31e-eef0283dda93
WooCommerce: e4da5976-df0e-43c4-8dd7-77523836f3ff

Loyalty and Rewards

Use the earnLoyalty DailyStory JavaScript API to assign points to the current DailyStory contact.

<!-- DailyStory Loyalty and Rewards -->

<script type="text/javascript">
    function earnLoyalty() {
        window.Ds && window.Ds?.earnLoyalty('1f4e5f42-7e80-4e5f-b709-9eb6329ff09a')
    }
</script>

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');
});

Disable all popups on a page

Sometimes it is useful to ensure all popups are disabled on a given page:

// Listen for the event.
window.addEventListener('ds_ready', function (e) {
  // Disable all popups
  window?.Ds.toggleUx(false);
});

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
}

DailyStory JavaScript Events

Below are the events raised by various components of the DailyStory JavaScript API:

ds_ready - raised when the DailyStory JavaScript library is loaded and ready.
ds_popup_ready - raised when the DailyStory popups are ready.
ds_form_submit - when a web form is submitted.
ds_hellobar_ready - raised when the DailyStory Hello Bar is ready.
ds_hellobar_close - raised when the user closes the DailyStory Hello Bar.
ds_hellobar_submit - raised when the DailyStory Hello Bar is valid and submitted.
ds_magicform_ready - raised when the DailyStory Magic Form is ready.
ds_magicform_submit - raised when the DailyStory Magic Form is submitted.
ds_exit - raised when DailyStory detects the visitor is about to exist the page.

WebToLead

The WebToLead JavaScript API enables you to add leads using custom JavaScript. For example, if your website uses a custom form and is unable to use a DailyStory Magic Form. Unlike previous examples, the WebToLead API does not require the DailyStory JavaScript library. It is also a CORS enabled web API that allows POST requests.

Before using the WebToLead API, you will need some data about your application:

TenantUID - Found in Account Settings > Support > My Account
Data Center - Found in Account Settings > Support > My Account
Campaign Id - Navigate to Campaign Settings. Expand Advanced Options and copy the campaign id.

Next, you will need data to describe the lead you are creating. See Create or Edit Lead API for the field naming convention. At a minimum you will need to provide either email and/or mobilePhone.

Additionally custom fields may be used, the example below shows passing a custom field called customer id.

// ┌────────────────────────────────────────────────────────────────────
// │ Document Ready
// └────────────────────────────────────────────────────────────────────
document.addEventListener("DOMContentLoaded", function () {

  document.getElementById('submit_button').addEventListener('click', postWebToLead);

});

// ┌────────────────────────────────────────────────────────────────────
// │ Example function called when a form is submitted to POST a lead
// └────────────────────────────────────────────────────────────────────
function postWebToLead() {

  const data_center = "[data center]";
  const tenantuid = "[tenant uid]";
  const campaignId = [numberic campaign id];

  fetch(`https://${data_center}.dailystory.com/api/v1/public/webtolead/${tenantuid}`, {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      firstName:document.getElementById('firstname').value,
      lastName:document.getElementById('lastname').value,
      email: document.getElementById('email').value,
      mobilePhone: document.getElementById('mobilephone').value,
      campaignid: campaignId,
      extendedProperties: {
        customerId: document.getElementById('customerid').value
      }
    })
    .then(response => response.json())
    .then(json => {
      if (json.Status) {
        // request was successful - redirect to confirmation page/etc
        console.log('success.');
      } else {
        // request was not successful - handle error/problems
        console.log('not successful.');
      }
    });
  }