Presentation Options

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 what you'll learn how to implement a modal popup standard offer unit (sou) how to display multiple offers simultaneously with the multi offer unit (mou) how to embed momentscience offer units directly into your webpage how to customize the appearance of embedded units presentation types momentscience offers three main presentation options to match your website design and user experience requirements format description standard offer unit (sou) a carousel style modal popup that displays one offer at a time multi offer unit (mou) a grid based layout that shows all offers simultaneously embedded unit offers are embedded inline into a specific container on your page modal popup 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 multi offer unit (mou) the multi offer unit presents all available offers at once in a responsive grid layout it allows users to compare 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 users can view and evaluate multiple offers at the same time clicking an offer's cta opens it in a new tab enable mou via momentscience dashboard log in to your momentscience dashboard https //app momentscience com navigate to settings > configuration find the "show multi offer unit" setting toggle the setting to on click save configuration enabling mou via code configuration 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 window\ adpxconfig = { accountid 'your sdk id', autoshow true, settings { multi offer unit true } }; embedded momentscience 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 you can enable embedded mode through the dashboard or via code configuration enabling embedded mode via dashboard log in to your momentscience dashboard https //app momentscience com 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 unit using code configureation add the embedded parameter to your momentscience configuration 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 with the matching id to your html where you want the offer unit to appear 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 for assistance with presentation options, contact help\@momentscience com