Presentation Options

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) docid 9ukjgfqbk0fvd1qahw51l a carousel style modal popup displaying one offer at a time best for keeping users focused multi offer unit (mou) docid 9ukjgfqbk0fvd1qahw51l a responsive grid based layout showing all available offers simultaneously ideal for letting users compare and choose custom offer unit (cou) docid 1mcouwtrs5te1lc6behso supply your own html and css per theme to fully control the offer unit layout and appearance embedded offer unit docid 9ukjgfqbk0fvd1qahw51l 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 enabling sou via dashboard sou is enabled by default unless the multi offer unit setting is turned on to confirm sou is active log in to your momentscience dashboard https //app momentscience com navigate to settings > configuration https //app momentscience com/account/settings/behavior 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 enabling mou via dashboard log in to your momentscience dashboard https //app momentscience com navigate to settings > configuration https //app momentscience com/account/settings/behavior 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 settings object 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 log in to your momentscience dashboard https //app momentscience com navigate to integration > momentperks https //app momentscience com/account/integration/customize#customize 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) docid 1mcouwtrs5te1lc6behso 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 enabling embedded mode via dashboard log in to your momentscience dashboard https //app momentscience com navigate to integration > moments https //app momentscience com/account/integration/customize#customize 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 embedded configuration inside the settings object 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 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 options docid\ bcirtahusxtymplxd4mgj use the javascript sdk customization guideto control when offers appear, override styles, configure embedded mode, and track lifecycle events programmatically theme customizer docid 6pqgxne5kwhdkuyawcvw1 use the momentscience theme customizerto style offer units, adjust layouts, and preview changes instantly, no coding required for assistance with presentation options, contact help\@momentscience com mailto\ help\@momentscience com