--- title: Presentation Options slug: presentation-options icon: 🎞️ docTags: createdAt: 2025-07-25T19:46:44.846Z --- :::hint{type="info"} **Who is this for:** Web developers and integration teams deciding how offer units should be displayed on their website. **Outcome:** Choose and implement the correct presentation format-Standard Offer Unit, Multi Offer Unit, Custom Offer Unit, or Embedded-based on UX and layout requirements. ::: # Overview MomentScience offers multiple presentation options for displaying offer units on your website. This guide explains the available display formats and provides implementation instructions for each option. # Presentation Types MomentScience offers four main presentation options to match your website design and user experience requirements. | **Format** | **Description** | | ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | | [Standard Offer Unit (SOU)](docId:9UkjGFQBK0fvD1Qahw51L) | A carousel-style modal popup displaying one offer at a time. Best for keeping users focused. | | ****[Multi Offer Unit (MOU)](docId:9UkjGFQBK0fvD1Qahw51L) | A responsive grid-based layout showing all available offers simultaneously. Ideal for letting users compare and choose. | | [Custom Offer Unit (COU)](docId:1MCOuWTRS5te1lC6BehSo) | Supply your own HTML and CSS per theme to fully control the Offer Unit layout and appearance. | | ****[Embedded Offer Unit](docId:9UkjGFQBK0fvD1Qahw51L) | Offers are placed inline within a specific section of your webpage for a seamless experience. | ## Standard Offer Unit (SOU) The Standard Offer Unit displays one offer at a time in a modal popup overlay with carousel navigation. It is ideal when you want to draw attention to individual offers without overwhelming the user. 1. When triggered, the SOU appears as a modal popup overlay on your webpage 2. Users see one offer at a time in a carousel format 3. Users can engage with each offer by selecting positive or negative call-to-action (CTA) buttons 1. Clicking the positive CTA opens the offer in a new tab and advances to the next offer 2. Clicking the negative CTA advances to the next offer without claiming 4. Users can navigate between offers using carousel controls 5. The modal dismisses when users click the close button or reject the final offer ![](https://api.archbee.com/api/optimize/ELjiwjWcrv0a1IejQFFAF/zHbRrkNrKeud88Gmv1oBw_image.png "Modal Popup Standard Offer Unit (SOU)") ### Enabling SOU via Dashboard SOU is **enabled by default unless the Multi Offer Unit setting is turned on.** To confirm SOU is active: 1. Log in to your [MomentScience dashboard](https://app.momentscience.com) 2. Navigate to [Settings > Configuration](https://app.momentscience.com/account/settings/behavior) 3. Ensure **“Show Multi Offer Unit”** is **disabled**. 4. Click **Save Configuration** if any changes are made. ### Enabling SOU via Code If you configure presentation options manually in code, make sure multi\_offer\_unit is set to `false`: ```javascript window.AdpxConfig = { accountId: 'YOUR_SDK_ID', autoShow: true, settings: { multi_offer_unit: false } }; ``` ## Multi Offer Unit (MOU) The Multi Offer Unit presents all available offers at once in a responsive grid layout. It allows users to see multiple offers and choose what’s most relevant. 1. When triggered, the MOU appears displaying all available offers in a grid layout 2. Each offer appears as a tile with its own creative and call-to-action 3. Clicking a CTA opens the selected offer in a new tab. ![](https://api.archbee.com/api/optimize/ELjiwjWcrv0a1IejQFFAF/O_YIR2i57GcCuhrbC5vQp_image.png "Multi Offer Unit Example") ### Enabling MOU via Dashboard 1. Log in to your [MomentScience dashboard](https://app.momentscience.com) 2. Navigate to [Settings > Configuration](https://app.momentscience.com/account/settings/behavior) 3. Enable **“Show Multi Offer Unit”**. 4. Click **Save Configuration** :::Iframe{code="
"} ::: ### Enabling MOU via Code 1. Locate where `window.AdpxConfig` is defined in the code snippet. 2. Modify it to include the `settings`object with the `multi_offer_unit` parameter set to `true`. ```javascript window.AdpxConfig = { accountId: 'YOUR_SDK_ID', autoShow: true, settings: { multi_offer_unit: true } }; ``` ## Custom Offer Unit (COU) Custom Offer Unit (COU) lets you supply your own HTML and CSS at the theme level to fully control the Offer Unit layout. This allows you to create a unique user experience while still leveraging the MomentScience Offer Unit functionality. :::hint{type="warning"} Contact your account manager to enable COU for your account. ::: ### Enabling COU via Dashboard 1. Log in to your [MomentScience dashboard](https://app.momentscience.com) 2. Navigate to [Integration > MomentPerks](https://app.momentscience.com/account/integration/customize#customize). 3. Select the theme you want to configure. 4. In the Offer Unit dropdown, select **Custom Offer Unit (COU)**. 5. Enter your HTML in the **HTML** section. 6. Enter your CSS in the **CSS** section. 7. Click **Save**. ### Required Macros for COU COU validation runs on save. The HTML must include all required macros: - `{{OFFER_TITLE}}` - `{{OFFER_DESCRIPTION}}` - `{{CALL_TO_ACTION}}` - `{{OFFER_IMAGE}}` If any required macro is missing, save is blocked and the UI returns inline errors. :::hint{type="success"} For complete COU implementation details, see [Custom Offer Unit (COU)](docId:1MCOuWTRS5te1lC6BehSo). ::: ## Embedded Offer Unit Both the Standard Offer Unit and Multi Offer Unit can be embedded directly into your webpage instead of appearing as a modal popup. This provides a more integrated user experience. ![](https://app.archbee.com/api/optimize/ELjiwjWcrv0a1IejQFFAF/XPs4rThSv-pQibGGn0urf_image.png "Embedded SOU") ![](https://app.archbee.com/api/optimize/ELjiwjWcrv0a1IejQFFAF/IahovVFUyTzygyQPFqLAk_image.png "Embedded MOU") ### Enabling Embedded Mode via Dashboard 1. Log in to your [MomentScience dashboard](https://app.momentscience.com) 2. Navigate to [Integration > Moments](https://app.momentscience.com/account/integration/customize#customize). 3. Click on the **Theme Settings** tab 4. Find the "Embedded Mode" setting and toggle it **On** 5. Configure the additional embedded settings that appear: - **Target Element Selector**: Specify the HTML element ID where the unit will be embedded (e.g.,`#adpx`) - **Show Header**: Toggle to control header visibility - **Show Footer**: Toggle to control footer visibility - **Fill Container**: Enable to make the unit expand to fill the container height - **Show Border**: Toggle to control border visibility 6. Click **Save** to apply your changes :::Iframe{code="
"} ::: ### Enabling Embedded Mode via Code 1. You can enable embedded mode by adding the `embedded`configuration inside the `settings`object in your `window.AdpxConfig`.This ensures the SDK applies the correct rendering mode. :::CodeblockTabs{indent="2"} ```javascript window.AdpxConfig = { accountId: 'YOUR_SDK_ID', autoShow: true, settings: { embedded: { enabled: true, showBorder: true, showHeader: true, showFooter: true, targetElement: 'adpx', fill_container: true } } }; ``` ::: 2. Add a `
` element where you want the offer unit to appear. Make sure the `id` matches the value of `targetElement` in the configuration: ```html
``` :::hint{type="info"} Ensure the `targetElement` ID in your `embedded` configuration matches the HTML container ID on your page. ::: **Configuration Options** The embedded settings provide several customization options: | **Parameter** | **Type** | **Default** | **Description** | | ---------------- | -------- | ----------- | ---------------------------------------------------------------------- | | `enabled` | Boolean | `false` | When `true`, embeds the offer unit in the specified container element | | `fill_container` | Boolean | `false` | When `true`, the unit occupies the full height of its parent container | | `showBorder` | Boolean | `true` | Controls the visibility of the unit's border | | `showHeader` | Boolean | `true` | Controls the visibility of the unit's header | | `showFooter` | Boolean | `true` | Controls the visibility of the unit's footer | | `targetElement` | String | `'adpx'` | ID of the HTML element where the offer unit will be embedded | *** # Next Steps You’ve configured the presentation options for your Moments Offer Unit. As the next step, you can customize the user experience to better match your brand and product flow: - [Customization Options](docId\:bCirtahUsXtymPlXD4mgJ) Use the JavaScript SDK Customization Guideto control when offers appear, override styles, configure embedded mode, and track lifecycle events programmatically. - [Theme Customizer](docId:6PqgXne5KWHdkuyAwcVW1): Use the MomentScience Theme Customizerto style offer units, adjust layouts, and preview changes instantly, no coding required. *** For assistance with presentation options, contact [help@momentscience.com](mailto\:help@momentscience.com).