Presentation Options

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 presentation options /#modal popup standard offer unit sou presentation options /#multi offer unit mou presentation options /#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 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 " 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, }, }; 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 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 settings object 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 fill container determines whether the embedded unit will take up the full height of its parent container when set to true , the embedded unit will occupy the full height of its parent container when set to false , the embedded unit will not fill the entire height of the parent container 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 fill container true, // forces the embedded unit to occupy the full height of its parent container }, }, }; 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 anatomy of the momentscience offer unit the embedded setting 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\@m omentscience com