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 true false 163,437false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type 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