--- title: Implementing MomentPerks SDK (Embedded Mode) slug: implementing-momentperks-sdk-embedded-mode icon: 🛠️ docTags: createdAt: 2024-05-24T21:34:37.084Z --- :::hint{type="info"} **Who is this for:** Web developers who want to display MomentPerks offers inline within a page layout rather than in a modal overlay. **Outcome:** Integrate the MomentPerks JavaScript SDK in embedded mode using a target container element, rendering offers as a seamless part of the existing page. ::: # Overview The MomentPerks JavaScript SDK enables you to display personalized offers directly within your webpage or mobile webview. This guide explains how to integrate the SDK in embedded mode, configure its behavior, customize its appearance, and verify the integration. ## When to Use Embedded Mode By default, the MomentPerks SDK displays offers in a modal overlay. Use embedded mode when you want to: - Render offers inline as part of your page or app layout. - Maintain a native experience without interrupting user flow. - Control where the offer unit appears using a target container. ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ![](https://app.archbee.com/api/optimize/ELjiwjWcrv0a1IejQFFAF/RH9TMGt1bGDOK1tFTBlFR_image.png "Embedded Unit Implemntation") ::: :::VerticalSplitItem ![](https://app.archbee.com/api/optimize/ELjiwjWcrv0a1IejQFFAF/2Q963gdgl5iKVyLF2M1X3_image.png "Default SDK Implementation") ::: :::: # Implementation Steps Follow these steps to implement the MomentPerks SDK as an embedded offer unit on your web page or within a mobile app webview. ## Step 1: Identify/Create the Container Element 1. Determine where you want the offer unit to be displayed on your page. 2. Create a `
` element that will serve as the container for the offer unit. **Example HTML:** ```html
``` ## Step 2: Add the MomentPerks SDK script 1. **Obtain the SDK Code:** - Log in to the MomentScience dashboard and navigate to the [Moments Integration](https://app.momentscience.com/account/integration/) to obtain the MomentPerks SDK code snippet. 2. **Insert the SDK Code into Your Web Page:** - Paste the obtained SDK code into the ``section of your web page to ensure it loads correctly. :::CtaButton{label="Learn more about MomentPerks JavaScript SDK Guide" docId="NEyLkmJyogaKmP3YDJsh_" openInNewTab="true"} ::: ## Step 3: Enable Embedded Mode To render offers inline in your page layout, update your SDK configuration to use embedded mode. **Configure Embedded Settings ** Add the following to your `window.AdpxConfig` object: :::CodeblockTabs Embedded Settings ```javascript window.AdpxConfig = { accountId: 'YOUR_SDK_ID', autoShow: true, settings: { embedded: { enabled: true, targetElement: 'adpx', showHeader: true, showFooter: true, showBorder: true, fill_container: true } } }; ``` ::: ### Embedded Mode Parameters | **Parameter** | **Type** | **Default** | **Description** | | ---------------- | -------- | ----------- | ----------------------------------------------------------------------------------------- | | `enabled` | Boolean | False | Enables embedded mode so offers render inline instead of in a modal. | | `targetElement` | String | `adpx` | Container element ID where offers render. Must match the container you created in Step 1. | | `showHeader` | Boolean | True | Shows the offer unit header. | | `showFooter` | Boolean | True | Shows the offer unit footer. | | `showBorder` | Boolean | True | Adds a border around the embedded offer unit. | | `fill_container` | Boolean | False | Expands the offer unit to fill the container height. | **Key checks** - Ensure `targetElement` exactly matches the id of the `
` created in Step 1. - If `targetElement` is missing, the SDK uses `adpx` by default. - Confirm `enabled: true` is set under `settings.embedded`; otherwise, the SDK keeps modal behavior. :::hint{type="info"} For more information, please refer to the [Presentation Options](docId:9UkjGFQBK0fvD1Qahw51L) documentation. ::: ## Step 4. Customize the interface and behavior You can customize the appearance and behavior of the offer unit either: - **Via the dashboard:** No-code customization. - **Via code overrides:** Use the `settings `and `styles`fields in the SDK configuration. ### Option A: Dashboard Customization 1. Log in to the [MomentScience dashboard](https://app.momentscience.com/) and navigate to the [Integrations section.](https://app.momentscience.com/account/integration/customize#customize)**** 2. Use the dashboard settings to customize the look and feel of the offer unit to match your site’s design guidelines. ![](https://api.archbee.com/api/optimize/ELjiwjWcrv0a1IejQFFAF/4Pc7axWIvycAf7wmzzTxh_image.png) Step 5: Change the Number of Ads and Other Properties 1. In the MomentScience dashboard, go to the [Configuration Section.](https://app.momentscience.com/account/settings/behavior/) 2. Adjust the "**Number of Ads"** to control the number of Offers to present at a time as needed without changing the code. ![](https://api.archbee.com/api/optimize/ELjiwjWcrv0a1IejQFFAF/nA3-GaQJK-2m8FuljAUo7_image.png) ## Step 6: Pass Payload Values for Targeting, Reporting, and Personalization (Optional) Enhancing or optimizing your implementation of MomentScience can be achieved by passing payload information when the MomentScience unit is loaded. This additional data allows the platform to: - **Target Offers More Effectively:** - Using payload values helps MomentScience deliver more relevant offers to users, increasing the chances of conversion and overall yield. - **Improve Reporting:** - Payload values can be utilized to segment and analyze performance across different dimensions, providing deeper insights into how various user groups interact with your offers. - **Personalize the Moments Experience:** - By passing specific information about users, you can tailor the content and presentation of Offers to better meet individual preferences and behaviors. :::CtaButton{label="Learn more about Passing Payload Values" docId="yZ38zu4_miummWTnnsG98" openInNewTab="true"} ::: *** # Further Recommendations To maximize the effectiveness and efficiency of your MomentScience Moments JS SDK implementation, consider the following best practices and advanced techniques: ## Use Macros to Personalize Your Moments Macros can be used to dynamically insert user-specific data into your Offers, enhancing personalization and relevance. Common macros include user names, order references, and purchase amounts. ![](https://api.archbee.com/api/optimize/ELjiwjWcrv0a1IejQFFAF/I4rnT9e18vOn0aCnZXmkr_image.png "Using Macros") :::CtaButton{label="Learn more about Implementing Macros" docId="u1M7W0zxFxch7TzK6-gFJ" openInNewTab="true"} ::: ## Utilize Callback Functions The Moments JS SDK supports callback functions that can be triggered at various points in the Offer lifecycle. This allows for greater control over user interactions and can be used to integrate with your internal tracking systems. :::CtaButton{label="Learn more about the avaliable customization options" docId="bCirtahUsXtymPlXD4mgJ" openInNewTab="true"} ::: ## Implement Postbacks Postbacks provide real-time data on conversions related to your Offers. They are essential for tracking the effectiveness of your campaigns and optimizing them for better performance. :::CtaButton{label="Learn more about Handling Postback Events" docId="U6s7GlbRWPW4hb3zP9xJm" openInNewTab="true"} ::: *** 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)