Presentation Options

18 min

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)Standard Offer Unit (SOU)	A carousel-style modal popup displaying one offer at a time. Best for keeping users focused.
Multi Offer Unit (MOU)	A responsive grid-based layout showing all available offers simultaneously. Ideal for letting users compare and choose.
Custom Offer Unit (COU)	Supply your own HTML and CSS per theme to fully control the Offer Unit layout and appearance.
Embedded Offer Unit	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.

When triggered, the SOU appears as a modal popup overlay on your webpage

Users see one offer at a time in a carousel format

Users can engage with each offer by selecting positive or negative call-to-action (CTA) buttons

Clicking the positive CTA opens the offer in a new tab and advances to the next offer

Clicking the negative CTA advances to the next offer without claiming

Users can navigate between offers using carousel controls

The modal dismisses when users click the close button or reject the final offer

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:

Navigate to Settings > Configuration

Ensure “Show Multi Offer Unit” is disabled.

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:

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.

When triggered, the MOU appears displaying all available offers in a grid layout

Each offer appears as a tile with its own creative and call-to-action

Clicking a CTA opens the selected offer in a new tab.

Multi Offer Unit Example

Enabling MOU via Dashboard

Navigate to Settings > Configuration

Enable “Show Multi Offer Unit”.

Click Save Configuration

Enabling MOU via Code

Locate where window.AdpxConfig is defined in the code snippet.

Modify it to include the settingsobject with the multi_offer_unit parameter set to true.

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.

Contact your account manager to enable COU for your account.

Enabling COU via Dashboard

Navigate to Integration > MomentPerks.

Select the theme you want to configure.

In the Offer Unit dropdown, select Custom Offer Unit (COU).

Enter your HTML in the HTML section.

Enter your CSS in the CSS section.

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.

For complete COU implementation details, see Custom Offer Unit (COU).

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.

Embedded SOU

Embedded MOU

Enabling Embedded Mode via Dashboard

Navigate to Integration > Moments.

Click on the Theme Settings tab

Find the "Embedded Mode" setting and toggle it On

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

Click Save to apply your changes

Enabling Embedded Mode via Code

You can enable embedded mode by adding the embeddedconfiguration inside the settingsobject in your window.AdpxConfig.This ensures the SDK applies the correct rendering mode.

window.AdpxConfig = {
  accountId: 'YOUR_SDK_ID', 
  autoShow: true,
  settings: {
    embedded: {
      enabled: true,
      showBorder: true,
      showHeader: true,
      showFooter: true,
      targetElement: 'adpx',
      fill_container: true
    }
  }
};

Add a <div> element where you want the offer unit to appear. Make sure the id matches the value of targetElement in the configuration:

<div id="adpx"></div>

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 OptionsCustomize in Code: Use the JavaScript SDK Customization Guideto control when offers appear, override styles, configure embedded mode, and track lifecycle events programmatically.

Theme CustomizerCustomize Visually:: Use the MomentScience Theme Customizerto style offer units, adjust layouts, and preview changes instantly, no coding required.

For assistance with presentation options, contact [email protected].