Presentation Options

15min

Introduction
When adding a Moments Offer Unit placement to your website via the JS SDK, MomentScience offers multiple presentation solution options. The following documentation aims to walk you through the options available and how to configure your MomentScience implementation either via runtime code or configuration settings available in the MomentScience Dashboard. 
Available Options
﻿Modal Popup Standard Offer Unit (SOU)﻿
﻿Multi Offer Unit (MOU)﻿
﻿Embedded MomentScience Unit﻿﻿
Modal Popup Standard Offer Unit (SOU)
The Modal Popup Standard Offer Unit (SOU) features showing one Offer at a time in a carousel modal popup. Users can engage with each Offer by selecting the positive or negative call-to-action (CTA) buttons.
User Interaction:
If users click the positive call-to-action button ("Try out MomentScience!") or the negative call-to-action button ("No, Thanks"), the Offer Unit will display the next Offer.
If the user clicks on the positive call-to-action button, the Offer will open in a new tab.
Users can navigate through the remaining Offers or go back to a previous Offer using carousel controls.
Modal Popup Dismissal:
If users click the negative call-to-action on the last Offer or close the popup using the 'X' button, the Modal Popup will be dismissed, and the user will resume their original experience.
﻿
SOU Model Example
﻿
Multi Offer Unit (MOU)
The Multi Offer Unit (MOU) presents a different approach, displaying all available Offers simultaneously in a tile format. Users can consider multiple Offers at once. The MOU Offers a tile-based view where each tile represents a distinct Offer.
﻿
﻿
﻿

Implementation Options
To configure your implementation with the MOU style, you have two options:
Using The MomentScience Dashboard Configuration Settings
Using Code Snippet Modification
MomentScience Dashboard Configuration Settings
Login to your MomentScience dashboard.
Go to Settings => Configuration.

Under the Configuration section, find "Show Multi Offer Unit."
Toggle the setting to activate the Multi Offer Unit and press "Save Configuration."
﻿
<div style="position: relative; padding-bottom: calc(51.763888888888886% + 42px); height: 0;"><iframe src="https://play.momentscience.com/embed/clyw6z0hc1cdqz9kdw0xil5sz" loading="lazy" title="MomentScience: Activating " Multi Offer Unit"" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
<div style="position: relative; padding-bottom: calc(51.763888888888886% + 42px); height: 0;"><iframe src="https://play.momentscience.com/embed/clyw6z0hc1cdqz9kdw0xil5sz" loading="lazy" title="MomentScience: Activating " Multi Offer Unit"" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
﻿



Code Snippet Modification
Locate where window.AdpxConfig is defined in the code snippet.
Modify it to include the settings object with the multi_offer_unit parameter set to true.
Enabling Multi Offer Units Using Code
window.AdpxConfig = {
  accountId: 'YOUR_SDKId', 
  autoShow: true,
  settings: {
    multi_offer_unit: true,
  },
};
window.AdpxConfig = {
  accountId: 'YOUR_SDKId', 
  autoShow: true,
  settings: {
    multi_offer_unit: true,
  },
};
﻿
Embedded MomentScience Unit
The Moments Offer Unit, either in Standard Offer Unit (SOU) or Multi Offer Unit (MOU) style, can be embedded into your webpage rather than appearing as a modal popup. This Offers a more user-friendly experience.
Embedded SOU Example
Embedded MOU Example
﻿
﻿
Embedded Implementation
To embed your Moments Offer Unit, follow these steps:
Step 1: Add Configuration Settings Attribute
The first step in the embedding process is to add the configuration settings attribute to the initialization options
Locate where window.AdpxConfig is defined in the code snippet.
Modify it to include the settingsobject with the embedded parameter and its related sub-parameters.
The embedded setting parameters Offer customization options, providing control over the presence of the Offer Unit's border, header, and footer. Integrate the Offers Unit into your webpage. Adjust the configuration to suit your design preferences.

Setting
Description
Default
enabled
Determines whether the unit will be embedded.
When set to true, the unit will be embedded into the div element with id=targetElement.
When set to false, the unit will be presented as a modal popup.
false
showBorder
Determines whether the border of the embedded unit will be displayed.
When set to true, the border will be displayed.
When set to false, the border will not be displayed
true
showHeader
Determines whether the header of the embedded unit will be displayed.
When set to true, the header will be displayed.
When set to false, the header will not be displayed.
true
showFooter
Determines whether the footer of the embedded unit will be displayed.
When set to true, the footer will be displayed.
When set to false, the footer will not be displayed.
true
targetElement
Determines where the embedded unit will be placed on your website. MomentScience will trigger to display in the div element with id=targetElement when it detects the existence of the div element.
If this parameter is missing or set to null, MomentScience defaults to the value 'adpx'.
'adpx'
Add Embedded Parameters
window.AdpxConfig = {
  accountId: 'YOUR_SDKId', 
  autoShow: true,
  settings: {
    embedded: {
      enabled: true,  // if true will enable Moments Offer Unit embedding
      showBorder: true, //control to show the embedded unit's border
      showHeader: true, //control to show the embedded unit's header
      showFooter: true, //control to show the embedded unit's footer
      targetElement: 'adpx', // target Id for where to embed, using 'adpx' as an example
    },
  },
};
window.AdpxConfig = {
  accountId: 'YOUR_SDKId', 
  autoShow: true,
  settings: {
    embedded: {
      enabled: true,  // if true will enable Moments Offer Unit embedding
      showBorder: true, //control to show the embedded unit's border
      showHeader: true, //control to show the embedded unit's header
      showFooter: true, //control to show the embedded unit's footer
      targetElement: 'adpx', // target Id for where to embed, using 'adpx' as an example
    },
  },
};
﻿

Step 2: Embedding the div unit
Now, include the div unit with id=targetElement for MomentScience to embed into. MomentScience will trigger itself to display once it detects a div element with id=targetElement.

HTML
<div id='adpx'></div>
<div id='adpx'></div>
﻿





Anatomy of the MomentScience Offer Unit
The embeddedsetting parameter includes optional sub-parameters that control the presence of the Offer Unit's Border, Header, or Footer.

﻿
﻿



A: Header - The header of the Offer Unit 
B: Border - The border of the Offer Unit 
C: Footer - The footer of the Offer Unit
﻿
📢 If you're running into any issues while going through the integration process, feel free to contact us at help@momentscience.com﻿

Setting	Description	Default
enabled	Determines whether the unit will be embedded. When set to true, the unit will be embedded into the div element with id=targetElement. When set to false, the unit will be presented as a modal popup.	false
showBorder	Determines whether the border of the embedded unit will be displayed. When set to true, the border will be displayed. When set to false, the border will not be displayed	true
showHeader	Determines whether the header of the embedded unit will be displayed. When set to true, the header will be displayed. When set to false, the header will not be displayed.	true
showFooter	Determines whether the footer of the embedded unit will be displayed. When set to true, the footer will be displayed. When set to false, the footer will not be displayed.	true
targetElement	Determines where the embedded unit will be placed on your website. MomentScience will trigger to display in the div element with id=targetElement when it detects the existence of the div element. If this parameter is missing or set to null, MomentScience defaults to the value 'adpx'.	'adpx'

Updated 21 Sep 2024

Did this page help you?

Theme Customizer

Google Tag Manager (GTM)