Moments

JS SDK (for Websites)

AdsPostX is now MomentScience! 🎉
We have rebranded AdsPostX to MomentScience. All the latest documentation and updates can now be found at MomentScience Documentation.
Introduction
Integrating AdsPostX 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:
An AdsPostX account. If you don't have one yet, sign up now.﻿
An "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 AdsPostX JavaScript SDK with a website.

<div style="position: relative; padding-bottom: calc(46.260416666666664% + 42px); height: 0;"><iframe src="https://play.momentscience.com/embed/7P0FDKhPOmexRy8a1yeyZ" 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(46.260416666666664% + 42px); height: 0;"><iframe src="https://play.momentscience.com/embed/7P0FDKhPOmexRy8a1yeyZ" 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 AdsPostX 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 AdsPostX 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 it from here﻿. ﻿
autoLoad 
Boolean optional﻿
Default: true. Determines whether the AdsPostX SDK automatically fetches available Offers when it's ready.
When set to false, you need to manually call the AdsPostX 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 AdsPostX SDK is ready.
When set to false, the AdsPostX 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 AdsPostX, you can easily pass payload values through the JavaScript SDK. Whether you're working on the server side or 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: 'adspostx_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: 'adspostx_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 [email protected].
﻿

Name	Type	Description
accountId	String required	Your unique account ID, use your SDK ID. Learn how to retrieve it from here.
autoLoad	Boolean optional	Default: true. Determines whether the AdsPostX SDK automatically fetches available Offers when it's ready. When set to false, you need to manually call the AdsPostX 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 AdsPostX SDK is ready. When set to false, the AdsPostX 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

Getting your SDK ID

Customization Options