Dashboard
Edit Article Logout

DailyStory JavaScript API

The BigCommerce 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 relies on 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 a specified amount. This functionality enables integrations such as Shopify (and others) to associate monetary transactions with your marketing activity.

Integrations that support conversion funnels

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
  • 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 function earnLoyalty() { window.Ds && window.Ds?.earnLoyalty('1f4e5f42-7e80-4e5f-b709-9eb6329ff09a') }

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 ghg0ctulvdx7bu10 loads its JSON from:

https://us-1.dailystory.com/ds/ghg0ctulvdx7bu10.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.

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

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

How helpful was this article?

👍 or 👎

Related Articles