Customization Options

overview this guide shows how to customize the momentscience javascript sdk to match your product experience you can control when offers appear, override styles, and subscribe to offer lifecycle events with the js sdk, you can track offer lifecycle events using callback functions customize the layout, colors, fonts, and buttons override default settings dynamically in code control when offers are fetched and displayed if you want to edit the visual appearance of the offer unit without changing code, use the visual theme customizer refer to the theme customizer docid 6pqgxne5kwhdkuyawcvw1 for step by step instructions callback functions the momentscience javascript sdk allows you to register callback functions that trigger during key offer lifecycle events these callbacks let your code respond in real time whenever a user interacts with an offer for example, you can track analytics log when a user claims or skips an offer update the ui show custom messages, animations, or surveys trigger other actions redirect users, enable features, or adjust other elements based on user behavior callbacks are essential for creating a dynamic and responsive user experience, because they provide immediate access to each offer’s event data passing a callback function to register a callback, pass a function as the second parameter to window\ adpx init() this function will be invoked whenever the sdk emits an event you can use this to trigger additional behavior, such as showing a survey, logging user behavior, or adjusting the ui, based on offer interactions supported events the following events are fired by the javascript sdk during the offer lifecycle you can use them to track user interactions and trigger custom behaviors event description payload fields ads found offers were found and returned by the sdk total (integer) total number of offers returned no ads found no relevant offers were returned no further events will be triggered after this event no payload for this event ad taken user clicked the positive cta (e g claim now) and the offer opened in a new browser tab target url (string) destination url for the claimed offer total (integer) total number of offers returned by the sdk current (integer) postion of current offer in the list of offers presented ad not taken user clicked the negative cta (e g no thanks) total (integer) total number of offers returned by the sdk current (integer) position of current offer in the list of offers presented closed ads offer unit was closed or completed triggered when the user clicks the close (×) icon the user clicks on the negative cta button on the last offer the user clicks "more offers" when reaching the last offer no payload for this event example usage passing a callback function window\ adpx init(adpxconfig, (event, payload) => { console log('received event from momentscience sdk ', event, payload); if (event === 'closed ads') { showmysurvey(); } if (event === 'ad taken') { console log(`user took offer ${payload current} of ${payload total}`); } if (event === 'ad not taken') { console log(`user passed on offer ${payload current} of ${payload total}`); } }); overriding settings and styles you can control the moments offer unit’s behavior and appearance by using the settings and styles parameters in your adpxconfig object this allows precise adjustments without changing the dashboard configuration behavior ( settings ) controls how the offer unit behaves and interacts with users when offers appear (immediate, delayed, or on exit intent) unit position on screen (desktop and mobile) button order and logic (positive/negative ctas) multi offer layout and navigation (mou vs sou) user selected perks (usp) checkboxes appearance ( styles ) controls visual elements of the offer unit fonts, text sizes, and colors for headers, offer tiles, and ctas popup container background, border radius, and shadows header and footer layout, text, and branding offer images, tile spacing, and offerwall styles configuration structure window\ adpxconfig = { accountid 'your sdk id', autoshow true, settings { // add custom behavior options here }, styles { // add style overrides here } }; example settings and styles window\ adpxconfig = { accountid 'your sdk id', autoshow true, settings { ad position 'bottom right', delay 2, multi offer unit true, enable usp true, show ads on exit false }, styles { popup { background '#ffffff', borderradius { top left '12', top right '12', bottom left '12', bottom right '12' }, shadow '#8f8f8f' }, header { background '#0b1937', text 'your order is complete', textcolor '#fff', lead in text "here's something we think you'd love!", lead in text color '#477ba5' } } }; overriding offer unit settings you can customize the behavior of the moments offer unit by adding a settings object inside window\ adpxconfig these settings control how offers are displayed, interacted with, and organized setting type description ad position string defines the placement of the offer unit on the screen for desktop environments the default position is center available values center bottom center bottom left bottom right top center top left top right darken bg boolean when true , adds a background overlay behind the offer unit for focused attention only works when ad position is center darken bg non centered boolean similar to darken bg , but applies the background overlay when ad position is not center delay integer number of seconds to wait after fetching offers before displaying the offer unit useful for giving context or delaying display until key moments privacy policy string link to your privacy policy if provided, it will be shown in the footer of the offer unit screen margin integer pixel value for the margin between the offer unit and the browser window edges show disclaimer boolean if true , displays disclaimer text in the offer unit footer you can configure the actual disclaimer text via the dashboard button order string controls which cta button is shown first, available options are neg first this will show the negative button first pos first this will show the positive button first enable vertical offset boolean when it's set to true , vertical adjustment is enabled for the onit offers unit this means that the unit can be vertically repositioned on the screen used with screen margin when set to false , vertical adjustment is disabled, and the unit remains fixed in its default position mobile vertical offset integer for mobile web, it specifies the pixel margin from the top of the container leaving this blank or entering 0 will cause the container to load at the center of the window multi offer unit boolean determines whether the offer unit is displayed as a multi offer unit (mou) or the standard offer unit (sou) by default, it is set to false true renders the offers as a multi tile layout (multi offer unit) false displays the default single offer view (sou) learn more about presentation options show multi offer unit boolean controls whether the multi offer layout is displayed at runtime this setting only takes effect if multi offer unit is set to true use this toggle to conditionally render the multi tile layout based on user behavior or feature flags show ads on exit boolean when enabled, the offers unit is triggered when a user intends to exit or close a page, based on tracked mouse movement this feature is only applicable in desktop web environments close ad on click outside boolean when this option is enabled, the user can close the offer by clicking anywhere outside the ad true the offer will close if the user clicks outside the ad false the offer will remain open even if the user clicks outside it this feature is only applicable in desktop web environments ad animation string by default, the animation is set to null this attribute allows you to customize the entry animation of the offers unit with the following values top bottom bottom top left right right left show close boolean it determines whether to show or disable the close offer (x) button at the top right corner of the offers unit true the close button will be displayed false the close button will be hidden enable close delay boolean when true, the close (x) button will not appear immediately requires close delay close delay integer it allows you to add a delay before showing the close offer (x) button after displaying the offers unit only applicable when enable close delay is true recommended values are 1, 2,3,5, and 10 embedded object an object that can contain the following enabled (boolean) when true it will enable embedding the offers unit into your webpage fill container (boolean) when true , the embedded unit will take up the full height of its parent container showborder (boolean) when true it will make the embedded unit borderless for a more native look showheader (boolean) when set to true it will show the header of the unit showfooter (boolean) when set to true it will show the footer of the unit targetelement (string) specifies the id of the html tag, preferably a \<div> tag, where the embedded unit will be injected if this parameter is missing or set to null, momentscience defaults to the value adpx learn more about presentation options docid 9ukjgfqbk0fvd1qahw51l enable effect shimmer pos cta boolean determines whether to activate a shimmer effect specifically on the positive call to action (cta) when set to true , the shimmer effect will be enabled, providing a visually appealing animation to highlight the positive cta button enable offerwall boolean determine whether to enable the offerwall if set to false, none of the offerwall related settings will be operational fixed progress bar boolean determine if a fixed progress bar should be used on the offers unit turning this on will show a progress bar on the offers unit with the ability to view the next and previous offers open offerwall boolean determine whether to open the perkswall in a new tab after clicking on the close button open overlay offerwall boolean determine whether to open perskwall as an overlay within the offers unit offertext object defines the styling attributes for text elements within the offer unit, contains the following font (string) the font family for all text in the offer unit must be a valid google fonts https //fonts google com/ font name enter the font name exactly as it appears (e g , " roboto slab "), including spaces if any textcolor (string) hex code representing the text color tiletextalignment (string) controls horizontal alignment of text within the offer tile accepted values " left " or " right " buttonradius (string) sets the border radius (in pixels) of the button inside the offer unit fontsizetitle (string) sets the font size (in pixels) of the offer title fontsizedescription (string) sets the font size (in pixels) of the offer description text enable usp boolean enables the user selected perks docid\ mck87it11jxvj9kyc 543 (usp) feature for the offer unit when true , the offers unit displays checkboxes allowing users to select specific offers learn more about user selected perks docid\ mck87it11jxvj9kyc 543 usp all offers checked boolean determines whether all available offers should be pre selected (checkboxes checked) when the offer unit loads this setting is only applicable when enable usp is true learn more about user selected perks docid\ mck87it11jxvj9kyc 543 usp cta text string custom text displayed next to the checkbox for each offer this string appears only if enable usp is enabled learn more about user selected perks docid\ mck87it11jxvj9kyc 543 progress bar type string defines the visual style of the offer navigation indicator accepted values dots displays a simple dot for each offer (e g , ● ● ●) use this to match your desired ux or brand style numbers displays the step number for each offer (e g , ① ② ③) enable perkswallet boolean enables the perkswallet docid\ exwiocstqw3y6t1xqehfw feature for the selected theme when set to true , a “save for later” call to action (cta) is displayed below the main offer button, allowing users to save offers to their perkswallet for future use learn more about perkswallet docid\ exwiocstqw3y6t1xqehfw perkswallet show cta boolean controls the visibility of the “save for later” cta if true, the cta will be shown when enable perkswallet is enabled learn more about perkswallet docid\ exwiocstqw3y6t1xqehfw saved offer text string sets the custom text for the “save for later” cta button (e g , “save for later”, “add to wallet”) perkswallet cta string defines the confirmation message shown after a user clicks the perkswallet cta (e g , “offer saved!”) learn more about perkswallet docid\ exwiocstqw3y6t1xqehfw overriding offer unit styles you can customize the appearance of the moments offer unit by passing a styles object inside your adpxconfig this allows you to control fonts, colors, spacing, borders, and more, to match your product's visual design styles popup use this section to control the appearance of the main offer unit popup container property type description background string background color of the popup container (e g , #ffffff) borderradius object controls corner radius for the popup accepts keys top left , top right , bottom left , bottom right values are strings representing pixels (e g , "5") shadow string hex color code for the box shadow applied around the popup (e g , #000000) lightbox string background color for the lightbox effect behind the popup (e g , #000) image position string position of the image inside the offer layout accepts left or right showimage boolean whether to display the image associated with each offer override offer style (styles popup) styles { //customize the offers unit container popup { background "#ffffff", borderradius { bottom left "12", bottom right "12", top left "12", top right "12" }, shadow "#8f8f8f", lightbox "#000", image position "left", showimage true } } styles header use this section to customize the header portion of the offers unit property type description text string main header message displayed at the top of the offers unit (e g , "your order is complete") background string background color of the header section (e g , #1a56db) textcolor string color of the header text (e g , #fff) fontsize integer size of the header text (e g , 16) headlineandleadinfontsize integer font size used for both headline and lead in text (e g , 14) lead in text string additional introductory text shown under the main header (e g , "here are some offers from brands you love!") lead in text color string color of the lead in text (e g , #000000) heading font size string font size of the header text using a css value (e g , "14px") lead in alignment string horizontal alignment of the lead in text accepts "start", "center", or "end" override header style styles { // customize the offers header header { background "#0b1937", fontsize 16, lead in text "here's something we think you'd love!", lead in text color "#477ba5", headlineandleadinfontsize 15, text "your order is complete", textcolor "#fff" }, } styles offertext this section customizes the text, fonts, and cta buttons within each offer tile property type description cta text size string font size of the call to action (cta) text (e g , "13px") cta text style string css style applied to the cta text accepts values like "normal", "italic", etc hide adv name boolean when set to true, the advertiser’s name will not be shown inside the offer tile textcolor string hex color code for general text content (e g , "#000") font string font family for all offer text (must be a valid google fonts name, e g , "roboto") fontsize integer font size used for the offer description text (e g , 13) buttonyes object styling for the positive cta button (e g , "claim offer") includes background (hex) hover (hex) stroke (hex) color (hex) buttonno object styling for the negative cta button (e g , "no thanks") includes background (hex) hover (hex) stroke (hex) color (hex) offerwall mou button radius integer border radius (in pixels) for buttons shown in the offerwall or multi offer unit show image boolean if true, the image for each offer tile will be shown; if false, it will be hidden styles { // customize the offers unit content offertext { buttonno { background "#fff", color "#6b7280", hover "#e5e7eb", stroke "#9ca3af" }, buttonyes { background "#000000", color "#fff", hover "#0b1937", stroke "#0b1937" }, font "roboto", fontsize 14, textcolor "#000", offerwall mou button radius 5, show image true }, } styles footer this section controls the footer area of the offers unit, including legal links and publisher branding property type description disclaimer string text displayed at the bottom of the unit to clarify terms (e g , "external link clicking an offer will take you to the advertiser's website ") text string footer message text, usually a credit or branding note (e g , "powered by momentscience") publisher privacy policy string or null custom url to the publisher's privacy policy overrides the default momentscience privacy link if set publisher name string name of the publisher to display in the footer override footer style styles { // customize the offers footer content footer { disclaimer "", publisher name "momentscience publisher", publisher privacy policy null, text "powered by momentscience" } } styles offerwall customize the appearance of the offerwall including tile layout and button styling for the multi offer unit (mou) all color values must be provided as valid hex codes (e g , #ffffff for white or #000000 for black) parent key property type description offerwall button offerwall mou button background string background color of the perkswall button offerwall mou button color string text color used inside the perkswall button offerwall mou button hover string background color shown when hovering over the button offerwall mou button stroke string border (stroke) color of the offerwall button offerwall tile offerwall mou border color string border color for each offerwall tile offerwall mou border thickness integer thickness of the tile border in pixels offerwall mou tile background hover color string background color of the tile on hover mou tile background color string default background color of each tile offerwall tile radius integer corner radius of each tile in pixels mou tile gap integer space (in pixels) between multi offer unit tiles perkswall and mou style styles { offerwall { button { offerwall mou button background "#fff", offerwall mou button color "#6b7280", offerwall mou button hover "#e5e7eb", offerwall mou button stroke "#9ca3af" }, tile { offerwall mou border color null, offerwall mou border thickness null, offerwall mou tile background hover color null }, tile radius 4 } } next steps after reviewing sdk customization options, follow these guides to complete your integration 1\ customize offer unit timing control when offers are fetched and displayed use setpayload() , refresh() , and reload() to manage dynamic offer behavior customize offer unit timing docid lfss4n fv4dxskxsj24o 2\ manage multiple visual themes create, update, and apply visual themes to match your product design pass theme id in sdk or api integrations for dynamic rendering managing multiple themes docid 7 jtaiiskgwau7cc5nbp3 3\ validate your integration confirm offers appear at intended points in your app flow verify the correct theme is applied test dynamic updates to ensure payload and configuration changes are reflected if you're running into any issues while going through the integration process, feel free to contact us at help\@m omentscience com