Moments

JS SDK (for Websites)

12min

🎉 AdsPostX is now MomentScience! 🎉
We're thrilled to announce our rebranding as MomentScience, capturing value at key moments with renewed energy. Our commitment to enhancing user journeys and driving product adoption through intelligent offer decisioning and native creative experiences remains stronger than ever. Enjoy the journey with us!
Introduction
Integrating MomentScience into your online store, website, mobile app, or other user experience is designed to be easy and quick. This guide will provide you with the needed steps to integrate our JavaScript SDK.
Requirements
Before starting the integration process with the JS SDK, ensure you have the following:
A MomentScience account. If you don't have one yet, sign up now.﻿
"SDK ID" (also known as "accountId"). You can obtain it by following these steps.﻿﻿
Steps Overview
The following playable demo will guide you through the steps required to integrate the MomentScience JavaScript SDK with a website.

<div style="position: relative; padding-bottom: calc(51.763888888888886% + 42px); height: 0;"><iframe src="https://play.momentscience.com/embed/clyw3xegz1bpqz9kdryopkhty" loading="lazy" title="Configuring MomentScience JS SDK for your website." allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
<div style="position: relative; padding-bottom: calc(51.763888888888886% + 42px); height: 0;"><iframe src="https://play.momentscience.com/embed/clyw3xegz1bpqz9kdryopkhty" loading="lazy" title="Configuring MomentScience JS SDK for your website." allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
﻿
Access the Integration Code:
Navigate to the Moments Integration section and click "JS SDK", Here you can configure, view, download, and preview the JavaScript SDK, Just copy the code provided to you.
Integrate the Code Into Your Website:
Paste the integration code provided by the MomentScience dashboard from the previous step before closing the </head>tag on your website. 
Before proceeding, ensure that the value in accountIdin your integration code matches the one provided to you. This ensures proper association with your MomentScience account.
Integration Code Example
  <script type="module">
      (function (window) {
          window.AdpxConfig = {
          // TODO: Replace with your account's SDKId
              accountId: 'YOUR_SDKId',
              autoShow: true
      };

      /**
       * Fill this object with user-specific values from your website.
       * Or pass your custom key-value pairs. 
       */
      window.AdpxUser = {
       // customer information properties here
      }
      })(window.self !== window.top ? window.top : window);

      (async function (window) {
          const target = window.document.head || window.document.body;
          const script = window.document.createElement('script');
          script.type = 'text/javascript';
          script.src = 'https://cdn.pubtailer.com/launcher.min.js';
          script.importance = 'high';
          script.crossOrigin = 'anonymous';
          script.async = true;
          script.id = 'adpx-launcher';
          target.appendChild(script);
          await new Promise(function (resolve) {
            window.Adpx
                ? resolve()
                : window.document
                    .getElementById('adpx-launcher')
                    .addEventListener('load', function () { resolve(); })
          });
          window.Adpx.init(AdpxConfig);
      })(window.self !== window.top ? window.top : window);
  </script>
  <script type="module">
      (function (window) {
          window.AdpxConfig = {
          // TODO: Replace with your account's SDKId
              accountId: 'YOUR_SDKId',
              autoShow: true
      };

      /**
       * Fill this object with user-specific values from your website.
       * Or pass your custom key-value pairs. 
       */
      window.AdpxUser = {
       // customer information properties here
      }
      })(window.self !== window.top ? window.top : window);

      (async function (window) {
          const target = window.document.head || window.document.body;
          const script = window.document.createElement('script');
          script.type = 'text/javascript';
          script.src = 'https://cdn.pubtailer.com/launcher.min.js';
          script.importance = 'high';
          script.crossOrigin = 'anonymous';
          script.async = true;
          script.id = 'adpx-launcher';
          target.appendChild(script);
          await new Promise(function (resolve) {
            window.Adpx
                ? resolve()
                : window.document
                    .getElementById('adpx-launcher')
                    .addEventListener('load', function () { resolve(); })
          });
          window.Adpx.init(AdpxConfig);
      })(window.self !== window.top ? window.top : window);
  </script>
﻿
Initialization Parameters
The initfunction supports the following attributes:
Name
Type
Description
accountId
String
required﻿
Your unique account ID, use your SDK ID. Learn how to retrieve your SDK ID.﻿﻿
autoLoad 
Boolean
optional﻿
Default: true. Determines whether the MomentScience SDK automatically fetches available Offers when it's ready.
When set to false, you need to manually call the MomentScience SDK's refreshfunction to fetch and display Offers.
Learn more about Delaying the Moments Unit﻿﻿
autoShow 
Boolean
optional﻿
Default: true. Determines whether the Offers overlay is automatically displayed when the MomentScience SDK is ready.
When set to false, the MomentScience SDK's showfunction must be called to trigger the Offers overlay. 
If autoLoadis set to false,autoShowdoes not have any effect.
Learn more about Showing the Moments Unit.﻿﻿
dev
Boolean
optional﻿
Default: false. Enables testing mode. Will return Offers for testing purposes but no activity will be recorded. In this mode, geo-targeting is ignored for publishers, ensuring that all Offers are returned in Offer responses for comprehensive testing
settings 
Object
optional﻿
It can be used to override some Dashboard settings and to configure the presentation of the Moments Unit.

Learn more about Override Settings﻿﻿
styles 
Object
optional﻿
It can be used to apply custom styling at runtime.

Learn more about Overide Styles﻿﻿
Initialization (init) configuration options must be specified within the properties of the window.AdpxConfig object.
Setting init Attributes
window.AdpxConfig = {
  accountId: 'YOUR_SDKId', //required
  autoLoad: true, //optional
  autoShow: false, //optional
  dev: true, //optional
  settings: {}, //optional
  styles: {} //optional
};
window.AdpxConfig = {
  accountId: 'YOUR_SDKId', //required
  autoLoad: true, //optional
  autoShow: false, //optional
  dev: true, //optional
  settings: {}, //optional
  styles: {} //optional
};
﻿
﻿
Want to embed the Web SDK into your website? Check out our guide here﻿ to learn how.
Passing In Payload Values  
With MomentScience, you can easily pass payload values through the JavaScript SDK. Whether you're working on the server side or the client side, you have full control over the payload. Additionally, you can customize your payload by including your own key-value pairs.
Passing in payload values can enable the following:
Offer Personalization: You can use passed payload values to personalize our Offer messaging to making their experience more personal.
Enhanced Targeting: With payload values, you can target Offers more effectively, ensuring that the right content reaches the right audience.
Customized Reporting: You can pass payload values to attribute your implementations to generate reports to segregate performance and give you deeper insights into your business performance.
Supporting LoyaltyBoost Offers: Payload values facilitate rewarding users for engaging with partners through LoyaltyBoost Offers.
Payload values are specified within the properties of the window.AdpxUser object. 
You can fill in these values either by using a server-side routine or by adding them client-side before initializing the SDK with thewindow.Adpx.init() call. 
Setting init Attributes
window.AdpxUser = {
  email: '[email protected]', 
  firstname: 'john',
  zipcode: '74839',
  theme_id: 'moment_post_transaction',
  country: 'US',
  adpx_fp: 'df983hgjdl9023klasjd',
  placement: 'post_transaction',
  loyalty_program_id: '23445665393'
};
window.AdpxUser = {
  email: 'user@domain.com', 
  firstname: 'john',
  zipcode: '74839',
  theme_id: 'moment_post_transaction',
  country: 'US',
  adpx_fp: 'df983hgjdl9023klasjd',
  placement: 'post_transaction',
  loyalty_program_id: '23445665393'
};
﻿
For detailed information about passing payload values using the JS SDK, refer to Passing Payload Values﻿﻿
﻿
Verification of Integration Code 🎉
To ensure that your integration code has correctly been implemented:
Visit the page containing the integration code to confirm that Offers are displaying.
If you are passing payload values, verify that the preferred parameters are provided in the window.AdpxUser object.
﻿
📢 If you're running into any issues while going through the integration process, feel free to contact us at help@momentscience.com﻿

Name	Type	Description
accountId	String required	Your unique account ID, use your SDK ID. Learn how to retrieve your SDK ID.
autoLoad	Boolean optional	Default: true. Determines whether the MomentScience SDK automatically fetches available Offers when it's ready. When set to false, you need to manually call the MomentScience SDK's refreshfunction to fetch and display Offers. Learn more about Delaying the Moments Unit
autoShow	Boolean optional	Default: true. Determines whether the Offers overlay is automatically displayed when the MomentScience SDK is ready. When set to false, the MomentScience SDK's showfunction must be called to trigger the Offers overlay. If autoLoadis set to false,autoShowdoes not have any effect. Learn more about Showing the Moments Unit.
dev	Boolean optional	Default: false. Enables testing mode. Will return Offers for testing purposes but no activity will be recorded. In this mode, geo-targeting is ignored for publishers, ensuring that all Offers are returned in Offer responses for comprehensive testing
settings	Object optional	It can be used to override some Dashboard settings and to configure the presentation of the Moments Unit. Learn more about Override Settings
styles	Object optional	It can be used to apply custom styling at runtime. Learn more about Overide Styles

Updated 05 Nov 2024

Did this page help you?

Getting your SDK ID

Customization Options