JavaScript SDK Guide

Overview

Integrating MomentScience into your online store, website, mobile app, or other user experiences is quick and straightforward. This guide walks you through how to add the JavaScript SDK to your website to start delivering personalized offers.

What you'll learn:

How to access and configure your SDK snippet
How to add the snippet to your website or checkout page
How to pass user-specific payload values for targeting and personalization

Requirements

Before you begin, make sure you have:

Your SDK ID Follow these steps to locate it in the dashboard.

The "SDK ID" is also referred to as the "Account ID" in the JavaScript snippet shown in the dashboard. These terms are interchangeable, they refer to the same value.

Integration Steps

To help you get started, the following interactive demo walks through the process of getting the JavaScript SDK code snippt from the dashboard.

Step 1: Access Your Integration Code

To retrieve your JavaScript SDK integration code:

Go to the MomentScience dashboard.
From the left sidebar, click Integrations and select Moments.
You'll be redirected to the MomentPerks Integration page.
Click the Install Theme tab, or go directly to this link.
Your JavaScript SDK code will appear. You can copy it directly or download it for later use.

Step 2: Add the SDK to Your Website

Paste the integration code before the closing </head> tag of your site.
Ensure your accountIdvalue in your script matches your SDK ID from the MomentScience dashboard.

<script type="module">
  (function (window) {
    window.AdpxConfig = {
      accountId: 'YOUR_SDK_ID', // Replace with your account's SDK ID
      autoShow: true
    };

    window.AdpxUser = {
      // Optional: Define user-specific values
    };
  })(window.self !== window.top ? window.top : window);

  (async function (window) {
    const target = window.document.head || window.document.body;
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://cdn.pubtailer.com/launcher.min.js';
    script.crossOrigin = 'anonymous';
    script.async = true;
    script.id = 'adpx-launcher';
    target.appendChild(script);

    await new Promise((resolve) => {
      window.Adpx
        ? resolve()
        : script.addEventListener('load', resolve);
    });

    window.Adpx.init(window.AdpxConfig);
  })(window.self !== window.top ? window.top : window);
</script>

Step 3: Configure SDK Initialization

The MomentScience JS SDK uses window.AdpxConfig to configure Offer behavior at runtime. You must set this configuration before the SDK script is loaded on the page.

The table below outlines all supported attributes for the Adpx.init() configuration.

Parameter	Type	Required	Description	Default
accountId	String	Yes	Your unique MomentScience account identifier. This is also referred to as your SDK ID. The SDK uses this value to associate Offer delivery, analytics, and creative rendering with your account. You can retrieve your SDK ID from the dashboard.	—
autoLoad	Boolean	No	Controls whether the SDK automatically fetches Offers on initialization. If true, the SDK loads Offers automatically once initialized. If false, you must manually trigger Offer loading by calling window.Adpx.refresh(). This is useful if you want to delay offer fetching until after a specific user action or event.	true
autoShow	Boolean	No	Controls whether the Offers are automatically shown after Offers are loaded. If true, Offers will appear automatically once fetched. If false, you must explicitly call window.Adpx.show() to display Offers. Note: If autoLoadis set to false, autoShowhas no effect and will be ignored.	true
prefetch	Boolean	No	When true, the SDK fetches Offers on the initial load and stores them in localStorage. On subsequent visits within one hour, it reuses the cached Offers and session ID, enabling a consistent experience. Fetches and stores Offers in localStorage during the first page load. Reuses the same Offers and session ID on the second page load, if within one hour. Maintains selected state across reloads when User Selected Perks (USP) is enabled. Prevents an additional network request on the second load by using cached data. Caches are valid for up to two page views or one hour—whichever occurs first. After expiration or third load, fetches new Offers and generates a new session ID.	false
dev	Boolean	No	Enables testing mode. When true, the SDK fetches Offers in a developer-safe testing mode: No engagement or impression data will be recorded Geo-targeting is disabled All possible Offers are returned regardless of targeting Use this mode when validating payloads or debugging.	false
settings	Object	No	Used to override default MomentScience Dashboard settings at runtime. Common use cases include: Forcing a specific placement or theme Adjusting unit behavior per page	{}
styles	Object	No	Used to apply custom styling to the Moments Unit at runtime. Supported style areas: Unit layout and spacing Header appearance (background, text) Content font styles and sizes Primary CTA (positive button) styling Secondary CTA (negative button) styling Body font and colors Footer content and style	{}

window.AdpxConfig = {
  accountId: 'YOUR_SDK_ID',
  autoLoad: true,
  autoShow: true,
  dev: true,
  settings: {},
  styles: {}
};

Step 4: Pass in User Data (Optional)

You can optionally provide user-specific payload values using the window.AdpxUserobject. This allows MomentScience to personalize Offer content, improve targeting, and enhance reporting.

User data must be defined before the SDK initialization (window.Adpx.init()), and can be set from either the client side or injected server-side at page render.

For detailed information about passing payload values using the JS SDK, refer to Passing Payload Values.

Why Pass User Data?

Use Case	Benefit
Offer Personalization	Tailor Offer messaging to create a more relevant and personal experience for users.
Enhanced Targeting	Deliver Offers based on specific user attributes like geography, membership status, or custom segments.
Customized Reporting	Attribute Offer interactions and claims to specific user identifiers or segments for deeper analytics.
LoyaltyBoost Support	Enable reward-based experiences for users who engage with partner Offers using provided IDs.

Example Payload Data

You can include any custom key-value pairs, but the following are commonly used:

Key	Example	Description
placement	'post_transaction'	Context in which the Offer appears (e.g., 'checkout', 'thank_you').
pub_user_id	'user-abc-123'	Unique identifier for the user from your system.
firstname	'John'	User’s first name. Used in personalized messages.
zipcode	'74839'	Helps geo-target specific Offers.
country	'US'	Country code (ISO 3166-1 alpha-2).
adpx_fp	'df983hgjdl9023klasjd'	Adpx fingerprint or tracking token.
Custom Fields	'plan': 'gold'	Add any extra targeting or analytics attributes as needed.

window.AdpxUser = {
  placement: 'post_transaction',
  pub_user_id: `UniquePubUserID`,
  firstname: 'John',
  zipcode: '74839',
  country: 'US',
  adpx_fp: 'df983hgjdl9023klasjd',
  loyalty_program_id: '23445665393',
};

Step 5: Verify Your Integration

To confirm your integration is working:

Visit a page where the SDK is embedded. You should see offers displayed.
If you're using AdpxUser, open your browser’s DevTools and confirm those values are present before Adpx.init() is called.

If you encounter any issues during integration, contact us at [email protected].