JS SDK 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 callbacks customize appearance and layout override settings dynamically in code control when offers are fetched or shown callback functions the javascript sdk accepts a callback function that is triggered during key lifecycle events you can use this callback to extend your user experience, such as showing a survey, logging analytics, or redirecting a user, based on how they interact with the moments unit 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 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}`); } }); 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,174left 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 overriding settings and styles in addition to dashboard configuration, you can programmatically override appearance and behavior using the settings and styles fields in your adpxconfig object this gives you precise control over unit behavior, button logic, text appearance, layout, and positioning, without requiring changes from the dashboard configuration structure window\ adpxconfig = { accountid 'your sdk id', autoshow true, settings { // add custom behavior options here }, styles { // add style overrides here } }; overriding offer unit settings within the window\ adxconfig , you can add a parameter called settings , which is an object containing all the settings you want to override the following properties are supported in the settings override true 158 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 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 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 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 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) true 0,139,71left 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 } } 📢 if you're running into any issues while going through the integration process, feel free to contact us at mailto\ help\@momentscience com