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 https //app momentscience com/account/integration/customize#customize refer to the 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 true 133,195,100left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type 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 true 158,100,100 unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type 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 true 145,79,100 unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type 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 true 176,76,100 unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type 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 true 195,195,197 unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type 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 true 195,195,197 unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type unhandled content type 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) true 100,139,71,100left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type left unhandled content type 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 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 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 mailto\ help\@momentscience com