{"Status":true,"Message":"","Response":{"post":{"postuid":"8242c533-7697-4e36-bb7c-6faa0016472a","tenantuid":"d8b744fc-2e70-4089-bb80-dd1d08f6c7b2","projectuid":"542e5f51-33cf-401f-aebe-4324ebe36fe4","title":"DailyStory JavaScript API","slug":"docs/javascript-api","html":"\u003Cp\u003EThe DailyStory JavaScript API is pure JavaScript and has no dependencies on jQuery or other JavaScript frameworks.\u003C/p\u003E\u003Ccite class=\u0022important\u0022\u003E\u003Cspan class=\u0022title\u0022\u003EImportant\u003C/span\u003E\u003Cp\u003EThe 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.\u003C/p\u003E\u003C/cite\u003E\u003Cp\u003ETo ensure that the DailyStory JavaScript API is available you should run any JavaScript code that relies on the API after the\u0026nbsp;\u003Ccode\u003Eds_ready\u003C/code\u003E\u0026nbsp;event fires:\u003C/p\u003E\u003Cdiv class=\u0022code_wrapper\u0022\u003E\u003Cdiv class=\u0022code\u0022 data-language=\u0022javascript\u0022\u003E// Listen for the event.\r\nwindow.addEventListener(\u0026#39;ds_ready\u0026#39;, function (e) {\r\n\r\n  console.log(\u0026#39;The DailyStory JavaScript API is ready\u0026#39;)\r\n\r\n});\u003C/div\u003E\u003C/div\u003E\u003Cp\u003EThe DailyStory JavaScript API is then accessed using the object reference\u0026nbsp;\u003Ccode\u003EDs\u003C/code\u003E.\u003C/p\u003E\u003Ch2 id=\u0022event_api\u0022\u003EEvent API\u003C/h2\u003E\u003Cp\u003EEvents are real-time records of actions users take - such as clicking a button, completing a purchase, or reaching the end of a page. By tracking these activities, you can trigger automated campaigns and build dynamic segments based on exactly how people engage (or fail to engage).\u0026nbsp;\u0026nbsp;\u003C/p\u003E\u003Cdiv class=\u0022code_wrapper\u0022\u003E\u003Cdiv class=\u0022code\u0022 data-language=\u0022javascript\u0022\u003E// Example function wrapping a call to the event API\r\nfunction checkout_click(e) {\r\n    ...\r\n    \r\n    // Now send an event\r\n\twindow.Ds \u0026amp;\u0026amp; window.Ds?.sendEvent(\u0026#39;website\u0026#39;, \u0026#39;checkout_click\u0026#39;);\r\n}\u003C/div\u003E\u003C/div\u003E\u003Cp\u003EThe \u003Ccode class=\u0022inline-code\u0022\u003EsendEvent\u003C/code\u003E API supports the following properties:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003E\u003Cb\u003Eid\u003C/b\u003E - a unique id, use any value this is reserved for future use.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003Eaction\u003C/b\u003E - the action taken, e.g. button_click.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003Evalue\u003C/b\u003E - additional data. JSON objects are supported.\u003C/li\u003E\u003Cli\u003E\u003Cb\u003Elabel\u003C/b\u003E - reserved for future use.\u003C/li\u003E\u003C/ul\u003E\u003Cp\u003EAn example of how the Event API is used is for Conversion Funnels. The Conversion Funnels functionality uses the events API to send conversion data.\u003C/p\u003E\u003Cp\u003EIf you want to use the REST API to send your event \u003Ca href=\u0022/reference/event-tracking\u0022\u003Esee the Event Tracking endpoint\u003C/a\u003E.\u003C/p\u003E\u003Ch2 id=\u0022conversion_apia_hrefhttpsdevdailystorycomdocsjavascriptapiconversionapia\u0022\u003EConversion API\u003Ca href=\u0022https://dev.dailystory.com/docs/javascript-api#conversion-api\u0022\u003E\u003C/a\u003E\u003C/h2\u003E\u003Cp\u003EThe 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.\u003C/p\u003E\u003Cdiv class=\u0022code_wrapper\u0022\u003E\u003Cdiv class=\u0022code\u0022 data-language=\u0022javascript\u0022\u003E// Example function wrapping a call to the conversion API\r\nfunction conversion(amount) {\r\n  const funnel_uuid = \u0026#39;ad045403-2141-4043-acde-babe9e5f6d8c\u0026#39;;\r\n\twindow.Ds \u0026amp;\u0026amp; window.Ds?.conversion(funnel_uuid, amount);\r\n}\u003C/div\u003E\u003C/div\u003E\u003Cp\u003EIn the example above, a call to the \u003Ccode class=\u0022inline-code\u0022\u003Econversion()\u003C/code\u003E 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.\u003C/p\u003E\u003Ch3 id=\u0022integrations_that_support_conversion_funnels\u0022\u003EIntegrations that support conversion funnels\u003C/h3\u003E\u003Cp\u003ECustom funnels can be created, but integration install funnels automatically and use a standard UUID:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003E\u003Ca href=\u0022https://docs.dailystory.com/article/mpl7zsbbvm-integrations-big-commerce\u0022\u003EBigCommerce\u003C/a\u003E: 6b3817f6-23f0-406a-9de7-8c19f4f0b45a\u0022\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022https://docs.dailystory.com/article/eju41pn77i-integrations-flowhub\u0022\u003EFlowhub\u003C/a\u003E: b1edd57c-4142-47d5-a9d8-c4dac7fa638a\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022https://docs.dailystory.com/article/muwnwn6yco-integrations-magento\u0022\u003EMagento\u003C/a\u003E: d1287965-c147-4de8-a9e7-e14b2f68234b\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022https://docs.dailystory.com/article/obw4omogkg-integrations-shopify\u0022\u003EShopify\u003C/a\u003E: ad045403-2141-4043-acde-babe9e5f6d8c\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022https://docs.dailystory.com/article/q1rhes3fq4-stripe-integration\u0022\u003EStripe\u003C/a\u003E: 8ef012e3-8752-4e75-9791-fa3698f8e304\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022https://docs.dailystory.com/article/d1na6q03zm-square-integration\u0022\u003ESquare\u003C/a\u003E: b976ff64-1247-426c-b31e-eef0283dda93\u003C/li\u003E\u003Cli\u003E\u003Ca href=\u0022https://docs.dailystory.com/article/8jpx3fj1r4-integrations-woocommerce\u0022\u003EWooCommerce\u003C/a\u003E: e4da5976-df0e-43c4-8dd7-77523836f3ff\u003C/li\u003E\u003C/ul\u003E\u003Ch2 id=\u0022loyalty_and_rewardsa_hrefhttpsdevdailystorycomdocsjavascriptapiloyaltyandrewardsa\u0022\u003ELoyalty and Rewards\u003Ca href=\u0022https://dev.dailystory.com/docs/javascript-api#loyalty-and-rewards\u0022\u003E\u003C/a\u003E\u003C/h2\u003E\u003Cp\u003EUse the\u0026nbsp;\u003Ccode\u003EearnLoyalty\u003C/code\u003E\u0026nbsp;DailyStory JavaScript API to assign points to the current DailyStory contact.\u003C/p\u003E\u003Cdiv class=\u0022code_wrapper\u0022\u003E\u003Cdiv class=\u0022code\u0022 data-language=\u0022javascript\u0022\u003E// DailyStory Loyalty and Rewards\r\nfunction earnLoyalty() {\r\n    window.Ds \u0026amp;\u0026amp; window.Ds?.earnLoyalty(\u0026#39;1f4e5f42-7e80-4e5f-b709-9eb6329ff09a\u0026#39;)\r\n}\u003C/div\u003E\u003C/div\u003E\u003Ch2 id=\u0022popup_apia_hrefhttpsdevdailystorycomdocsjavascriptapipopupapia\u0022\u003EPopup API\u003Ca href=\u0022https://dev.dailystory.com/docs/javascript-api#popup-api\u0022\u003E\u003C/a\u003E\u003C/h2\u003E\u003Cp\u003EDailyStory\u0026nbsp;\u003Ca target=\u0022_self\u0022 href=\u0022https://docs.dailystory.com/article/ptshg9vhir-daily-story-popups\u0022\u003EPopups\u003C/a\u003E\u0026nbsp;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:\u003C/p\u003E\u003Cp\u003Ehttps://us-1.dailystory.com/ds/ghg0ctulvdx7bu10.json\u003C/p\u003E\u003Cp\u003EThis file will include any DailyStory Popups that are enabled for the tenant as well as other DailyStory features you have enabled.\u003C/p\u003E\u003Ccite class=\u0022important\u0022\u003E\u003Cspan class=\u0022title\u0022\u003EImportant\u003C/span\u003E\u003Cp\u003EDue 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.\u003C/p\u003E\u003C/cite\u003E\u003Ch3 id=\u0022showing_a_popup_when_the_page_loadsa_hrefhttpsdevdailystorycomdocsjavascriptapishowingapopupwhenthepageloadsa\u0022\u003EShowing a popup when the page loads\u003Ca href=\u0022https://dev.dailystory.com/docs/javascript-api#showing-a-popup-when-the-page-loads\u0022\u003E\u003C/a\u003E\u003C/h3\u003E\u003Cp\u003ETo show a popup when the page loads using the JavaScript API add the following script (replacing 35 with the numeric id of your popup).\u003C/p\u003E\u003Cdiv class=\u0022code_wrapper\u0022\u003E\u003Cdiv class=\u0022code\u0022 data-language=\u0022javascript\u0022\u003E// Wait for the event to indicate popups are ready/loaded\r\nwindow.addEventListener(\u0026#39;ds_popup_ready\u0026#39;, function(e) {   \r\n  Ds.Pop.showPopup(\u0026#39;35\u0026#39;);\r\n});\u003C/div\u003E\u003C/div\u003E\u003Cp\u003EThe DailyStory API uses browser events to call your code after DailyStory is loaded.\u003C/p\u003E\u003Ccite class=\u0022important\u0022\u003E\u003Cspan class=\u0022title\u0022\u003EImportant\u003C/span\u003E\u003Cp\u003EDailyStory loads all its files after the main page loads. This ensures that the user\u0027s content is displayed as quickly as possible.\u003C/p\u003E\u003C/cite\u003E\u003Ch3 id=\u0022show_a_specific_popup_offer_when_the_visitor_is_leavinga_hrefhttpsdevdailystorycomdocsjavascriptapishowaspecificpopupofferwhenthevisitorisleavinga\u0022\u003EShow a specific popup offer when the visitor is leaving\u003Ca href=\u0022https://dev.dailystory.com/docs/javascript-api#show-a-specific-popup-offer-when-the-visitor-is-leaving\u0022\u003E\u003C/a\u003E\u003C/h3\u003E\u003Cp\u003ETo show a popup when the visitor is leaving your website using the JavaScript API, add the following script to your page:\u003C/p\u003E\u003Cdiv class=\u0022code_wrapper\u0022\u003E\u003Cdiv class=\u0022code\u0022 data-language=\u0022javascript\u0022\u003E// Wait for the event to indicate popups are ready/loaded\r\nwindow.addEventListener(\u0026#39;ds_popup_ready\u0026#39;, function(e) {\r\n  Ds.Pop.showPopupOnExit(\u0026#39;35\u0026#39;);\r\n});\u003C/div\u003E\u003C/div\u003E\u003Ch3 id=\u0022disable_all_popups_on_a_pagea_hrefhttpsdevdailystorycomdocsjavascriptapidisableallpopupsonapagea\u0022\u003EDisable all popups on a page\u003Ca href=\u0022https://dev.dailystory.com/docs/javascript-api#disable-all-popups-on-a-page\u0022\u003E\u003C/a\u003E\u003C/h3\u003E\u003Cp\u003ESometimes it is useful to ensure all popups are disabled on a given page:\u003C/p\u003E\u003Cdiv class=\u0022code_wrapper\u0022\u003E\u003Cdiv class=\u0022code\u0022 data-language=\u0022javascript\u0022\u003E// Listen for the event.\r\nwindow.addEventListener(\u0026#39;ds_ready\u0026#39;, function (e) {\r\n  // Disable all popups\r\n  window?.Ds.toggleUx(false);\r\n});\u003C/div\u003E\u003C/div\u003E\u003Ch2 id=\u0022helper_functionsa_hrefhttpsdevdailystorycomdocsjavascriptapihelperfunctionsa\u0022\u003EHelper Functions\u003Ca href=\u0022https://dev.dailystory.com/docs/javascript-api#helper-functions\u0022\u003E\u003C/a\u003E\u003C/h2\u003E\u003Cp\u003EThere are a number of helper functions available.\u003C/p\u003E\u003Cp\u003EThis helper function returns the value of data sent on the query string. If no value is found it return null.\u003C/p\u003E\u003Ch2 id=\u0022dailystory_javascript_eventsa_hrefhttpsdevdailystorycomdocsjavascriptapidailystoryjavascripteventsa\u0022\u003EDailyStory JavaScript Events\u003Ca href=\u0022https://dev.dailystory.com/docs/javascript-api#dailystory-javascript-events\u0022\u003E\u003C/a\u003E\u003C/h2\u003E\u003Cp\u003EBelow are the events raised by various components of the DailyStory JavaScript API:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003E\u003Ccode class=\u0022inline-code\u0022\u003Eds_ready\u003C/code\u003E\u0026nbsp;- raised when the DailyStory JavaScript library is loaded and ready.\u003C/li\u003E\u003Cli\u003E\u003Ccode class=\u0022inline-code\u0022\u003Eds_popup_ready\u003C/code\u003E\u0026nbsp;- raised when the DailyStory popups are ready.\u003C/li\u003E\u003Cli\u003E\u003Ccode class=\u0022inline-code\u0022\u003Eds_form_submit\u003C/code\u003E\u0026nbsp;- when a web form is submitted.\u003C/li\u003E\u003Cli\u003E\u003Ccode class=\u0022inline-code\u0022\u003Eds_hellobar_ready\u0026nbsp;\u003C/code\u003E- raised when the DailyStory Hello Bar is ready.\u003C/li\u003E\u003Cli\u003E\u003Ccode class=\u0022inline-code\u0022\u003Eds_hellobar_close\u0026nbsp;\u003C/code\u003E- raised when the user closes the DailyStory Hello Bar.\u003C/li\u003E\u003Cli\u003E\u003Ccode class=\u0022inline-code\u0022\u003Eds_hellobar_submit\u0026nbsp;\u003C/code\u003E- raised when the DailyStory Hello Bar is valid and submitted.\u003C/li\u003E\u003Cli\u003E\u003Ccode class=\u0022inline-code\u0022\u003Eds_magicform_ready\u0026nbsp;\u003C/code\u003E- raised when the DailyStory Magic Form is ready.\u003C/li\u003E\u003Cli\u003E\u003Ccode class=\u0022inline-code\u0022\u003Eds_magicform_submit\u0026nbsp;\u003C/code\u003E- raised when the DailyStory Magic Form is submitted.\u003C/li\u003E\u003Cli\u003E\u003Ccode class=\u0022inline-code\u0022\u003Eds_exit\u0026nbsp;\u003C/code\u003E- raised when DailyStory detects the visitor is about to exist the page.\u003C/li\u003E\u003C/ul\u003E\u003Ch2 id=\u0022webtolead\u0022\u003E\n\nWebToLead\u003C/h2\u003E\u003Cp\u003EThe WebToLead JavaScript API enables you to add leads using custom JavaScript. \u003C/p\u003E\u003Cp\u003EFor example, if your website uses a custom form and is unable to use a\u0026nbsp;\u003Ca target=\u0022_self\u0022 href=\u0022https://docs.dailystory.com/article/dw3bqm0v03-daily-story-magic-forms\u0022\u003EDailyStory Magic Form\u003C/a\u003E. 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.\u003C/p\u003E\u003Cp\u003EBefore using the WebToLead API, you will need some data about your application:\u003C/p\u003E\u003Cul\u003E\u003Cli\u003ETenantUID\u0026nbsp;- Found in\u0026nbsp;\u003Ccode\u003EAccount Settings \u0026gt; Support \u0026gt; My Account\u003C/code\u003E\u003C/li\u003E\u003Cli\u003EData Center\u0026nbsp;- Found in\u0026nbsp;\u003Ccode\u003EAccount Settings \u0026gt; Support \u0026gt; My Account\u003C/code\u003E\u003C/li\u003E\u003Cli\u003ECampaign Id\u0026nbsp;- Navigate to\u0026nbsp;\u003Ccode\u003ECampaign Settings\u003C/code\u003E. Expand\u0026nbsp;\u003Ccode\u003EAdvanced Options\u003C/code\u003E\u0026nbsp;and copy the campaign id.\u003C/li\u003E\u003C/ul\u003E\u003Cp\u003ENext, you will need data to describe the lead you are creating. See\u0026nbsp;\u003Ca target=\u0022_self\u0022 href=\u0022https://dev.dailystory.com/reference/create-or-edit-a-lead\u0022\u003ECreate or Edit Lead API\u003C/a\u003E\u0026nbsp;for the field naming convention. At a minimum you will need to provide either\u0026nbsp;\u003Ccode\u003Eemail\u003C/code\u003E\u0026nbsp;and/or\u0026nbsp;\u003Ccode\u003EmobilePhone\u003C/code\u003E.\u003C/p\u003E\u003Cp\u003EAdditionally\u0026nbsp;\u003Ca target=\u0022_self\u0022 href=\u0022https://docs.dailystory.com/article/h1vsml1ve0-create-or-edit-custom-contact-field\u0022\u003Ecustom fields may be used\u003C/a\u003E, the example below shows passing a custom field called customer id.\u003C/p\u003E\u003Cdiv class=\u0022code_wrapper\u0022\u003E\u003Cdiv class=\u0022code\u0022 data-language=\u0022javascript\u0022\u003E// \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n// \u2502 Document Ready\r\n// \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\ndocument.addEventListener(\u0026quot;DOMContentLoaded\u0026quot;, function () {\r\n\r\n  document.getElementById(\u0026#39;submit_button\u0026#39;).addEventListener(\u0026#39;click\u0026#39;, postWebToLead);\r\n\r\n});\r\n\r\n// \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n// \u2502 Example function called when a form is submitted to POST a lead\r\n// \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction postWebToLead() {\r\n\r\n  const data_center = \u0026quot;[data center]\u0026quot;;\r\n  const tenantuid = \u0026quot;[tenant uid]\u0026quot;;\r\n  const campaignId = [numberic campaign id];\r\n\r\n  fetch(\u0060https://${data_center}.dailystory.com/api/v1/public/webtolead/${tenantuid}\u0060, {\r\n    method: \u0026#39;POST\u0026#39;,\r\n    headers: {\r\n      \u0026#39;Accept\u0026#39;: \u0026#39;application/json\u0026#39;,\r\n      \u0026#39;Content-Type\u0026#39;: \u0026#39;application/json\u0026#39;\r\n    },\r\n    body: JSON.stringify({\r\n      firstName:document.getElementById(\u0026#39;firstname\u0026#39;).value,\r\n      lastName:document.getElementById(\u0026#39;lastname\u0026#39;).value,\r\n      email: document.getElementById(\u0026#39;email\u0026#39;).value,\r\n      mobilePhone: document.getElementById(\u0026#39;mobilephone\u0026#39;).value,\r\n      campaignid: campaignId,\r\n      extendedProperties: {\r\n        customerId: document.getElementById(\u0026#39;customerid\u0026#39;).value\r\n      }\r\n    })\r\n    .then(response =\u0026gt; response.json())\r\n    .then(json =\u0026gt; {\r\n      if (json.Status) {\r\n        // request was successful - redirect to confirmation page/etc\r\n        console.log(\u0026#39;success.\u0026#39;);\r\n      } else {\r\n        // request was not successful - handle error/problems\r\n        console.log(\u0026#39;not successful.\u0026#39;);\r\n      }\r\n    });\r\n  }\u003C/div\u003E\u003C/div\u003E\u003Cp\u003E\u003C/p\u003E","publish_status":0,"post_type":"Article","authoruid":"3dde8c16-763a-4a2b-ae0b-1d8c50c62e3d","author":{"authoruid":"3dde8c16-763a-4a2b-ae0b-1d8c50c62e3d"},"featured_image_updating":false,"meta_description":"DailyStory JavaScript API guide: learn how to track activity, conversions, popups, loyalty rewards, and manage web leads with async, pure JS.","display_toc":true,"has_workingcopy":false,"allow_indexing":true,"sort_order":3,"total_views":1514,"date_published":"2025-09-22T19:26:53.19","date_updated":"2026-03-07T21:54:21.697","date_created":"2025-09-22T19:22:40.507"}}}