--- title: Integrate USP Using the JS SDK slug: integrate-usp-using-the-js-sdk icon: 🌐 docTags: createdAt: 2025-08-03T07:30:20.320Z --- :::hint{type="info"} **Who is this for:** Web developers with an existing MomentPerks JS SDK integration who want to add the User Selected Perks feature. **Outcome:** Enable USP in the Multi Offer Unit by defining a `pub_user_id` and configuring the SDK, allowing users to select offers before completing a transaction. ::: # Overview You can integrate User Selected Perks (USP) with your existing Moments implementation using either the JavaScript SDK or the Moments API. This guide explains how to integrate USP specifically using the JavaScript SDK. USP is only compatible with the Multi Offer Unit (MOU). A maximum of 3 offers can be displayed. You must provide a valid pub\_user\_id to uniquely identify users across sessions. ## Prerequisites Before starting, ensure the following: - You have an active MomentPerks integration using the JavaScript SDK. - Your theme in the dashboard has USP enabled (or will be overridden in configuration). - You are using the Multi Offer Unit, not the Single Offer Unit. # Integration Steps ## Step 1. Define pub\_user\_id USP requires a unique, consistent identifier for each user. Define this identifier in `window.AdpxUser` **Requirements for **`pub_user_id`**:** - Must be **unique per user** - Must be **consistent across sessions** - Must be **non-PII** (do **not** use email addresses or phone numbers ```javascript window.AdpxUser = { pub_user_id: 'unique_user_123', // other user attributes }; ``` ## Step 2: Configure USP in window\.AdpxConfig Add USP-related settings to your SDK configuration using `window.AdpxConfig`. Ensure your selected `theme_id` has USP enabled in the dashboard, or override it directly in the configuration. ```javascript window.AdpxConfig = { accountId: 'your-account-id', autoShow: true, prefetch: true, theme_id: 'USPEnabledTheme', settings: { multi_offer_unit: true, enable_usp: true, usp_all_offers_checked: false // Optional } }; ``` **Explanation of Settings** | **Setting** | **Type** | **Required** | **Description** | | ------------------------ | -------- | ------------ | --------------------------------------------------- | | `multi_offer_unit` | Boolean | Yes | Must be true. USP only works with Multi Offer Unit. | | `enable_usp` | Boolean | Yes | Enables User Selected Perks. | | `usp_all_offers_checked` | Boolean | No | When true, all offers are pre-selected by default. | :::hint{type="info"} If USP is not enabled in the Moments Dashboard, the above config can be used to override the default theme settings. ::: ## Step 3: Enable Prefetching (Recommended) You can improve the user experience by enabling prefetch. This setting fetches and stores offers in localStorage on initial load and reuses them on subsequent visits. **How prefetch Works** When the `prefetch`option is enabled in `window.AdpxConfig`, the JavaScript SDK optimizes the initial and subsequent user experiences by caching offer data and the session identifier in the browser. This allows USP to function efficiently across page reloads and short return visits. - On the user's first visit, the SDK makes a network request to fetch eligible offers and generates a unique session ID. Both the offer data and session ID are stored locally in localStorage. - If the user reloads the page or returns within an hour, the SDK detects cached data and: - Reuses the existing offers without making a new network request - Reuses the same session ID to ensure offer selections remain valid - Restores the user's previously selected offers - Cached data remains valid for: - Up to 1 hour, or - Up to 2 page loads, whichever comes first - After expiration, the SDK: - Fetches a new set of offers - Generates a new session ID - Resets local selection state :::CodeblockTabs Example (prefetch = true) ```javascript window.AdpxConfig = { accountId: 'your-account-id', autoShow: true, prefetch: true, theme_id: 'USPEnabledTheme', settings: { multi_offer_unit: true, enable_usp: true, usp_all_offers_checked: false // Optional } }; ``` ::: ![](https://api.archbee.com/api/optimize/ELjiwjWcrv0a1IejQFFAF/79FYlaPVr6FuY1Ou18bIB_image.png "Example USP (JS SDK)") ## Step 4: Complete the Session USP is designed to operate before checkout or another key user action. After a user selects offers and completes the intended action, you must notify MomentScience by completing the session. ```javascript window.Adpx.completeSession(window.Adpx.sess_id, pub_user_id); ``` **Parameters:** | **Parameter** | **Description** | | ------------- | ------------------------------------------------------------ | | `sessionId` | The current session ID, available at `window.Adpx.sess_id`. | | `pubUserId` | The same `pub_user_id` defined earlier in `window.AdpxUser`. | Calling this function sends the selected offers to your configured USP webhook endpoint. *** # Customizing USP Theme You can customize the USP theme to match your brand using the [Theme Customizer tool.](https://app.momentscience.com/account/integration/customize#customize) **Steps:** 1. Navigate to the [MomentScience Theme Customizer. ](https://app.momentscience.com/account/integration/customize#customize) 2. In the Unit Type dropdown, select User Selected Perks (USP). 3. Customize your theme using the available controls to match your brand style 4. To save your customization: - Click Save As to create a new theme. - Click Save to override the currently selected theme with your USP settings. :::hint{type="info"} For detailed guidance, refer to the [Theme Customizer documentation.](docId:6PqgXne5KWHdkuyAwcVW1) ::: :::Iframe{code="
"} ::: *** 📢 If you're running into any issues while going through the integration process, feel free to contact us at [help@momentscience.com](mailto\:help@Momentscience.com)