Customization Options

introduction welcome to the momentscience sdk customization options here, you'll discover how to tailor your website's momentscience experience for optimal engagement with a range of customization features, including callback functions, you can adjust offers' appearance and timing to best suit your audience let's delve into maximizing your momentscience integration's potential callback functions the momentscience sdk accepts a callback function that is invoked at various points during its lifecycle, allowing you to customize the user experience you can use this callback function to trigger additional user experiences based on events fired by the momentscience sdk to use this feature, pass the callback function as the second parameter to the init function the following example demonstrates basic usage passing a callback function window\ adpx init(adpxconfig, (event, payload) => { console log('received event with payload from momentscience sdk ', event, payload); }); true false 140,246false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type callback function example for example, the following code snippet demonstrates how to trigger a survey via a showmysurveys() function after the user closes the moments unit or after the user has browsed through all offers presented window\ adpx init(adpxconfig, (event, payload) => { console log('received event with payload from momentscience sdk ', event, payload); if (event === 'closed ads') { // user closed the moments offers unit; show your surveys showmysurveys(); return; } if (event === 'ad taken') { console log('user took offer ' + payload current + ' of ' + payload total); return; } if (event === 'ad not taken') { console log('user passed on offer ' + payload current + ' of ' + payload total); return; } }); customize the appearance of momentscience units on your website with these simple steps log into the momentscience dashboard navigate to the integrations section on the right sidebar select moments click on configure follow the on screen instructions to adjust the unit’s appearance for more detailed guidance on using our theme customizer, click theme customizer overriding setting & styles momentscience sdk provides you the ability to override the settings and styles at runtime by passing the optional settings and styles attributes in the initialization options setting and style overrides in adpxconfig window\ adpxconfig = { accountid 'your sdkid', autoshow false, settings {}, styles {} }; 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 false 241,95false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type false unhandled content type overriding offer unit styles within the window\ adxconfig , you can add a parameter called styles , which is an object containing all the styles you want to override the following properties are supported in the styles override customize the offers unit layout customize the header of the offers unit customize the offers unit content customize the styles for the positive cta customize the styles for the negative cta customize the font and colors of the offers unit body customize the style and content of the footer override offer style styles { //customize the offers unit container popup { background "#ffffff", borderradius { bottom left "12", bottom right "12", top left "12", top right "12" }, shadow "#8f8f8f", image position "left", } } override offer text styles { // customize the offers unit content offertext { // styles for the negative cta buttonno { background "#fff", color "#6b7280", hover "#e5e7eb", stroke "#9ca3af" }, // styles for the positive cta buttonyes { background "#000000", color "#fff", hover "#0b1937", stroke "#0b1937" }, // font and colors of the offers unit body font "roboto", fontsize 14, textcolor "#000", // radius for the multi offer unit button offerwall mou button radius 5, show image true }, } 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 } } override header style styles { // customize the offers header header { background "#0b1937", // this controls the size of the font used for the offer description fontsize 16, lead in text "here's something we think you'd like!", lead in text color "#477ba5", // this controls the leading text and headline font size headlineandleadinfontsize 15, text "your order is complete", textcolor "#fff" }, } override footer style styles { // customize the offers footer content footer { disclaimer "", publisher name "adspostx", publisher privacy policy null, text "powered by adspostx" } } controlling when to display the moments offer unit the default behavior of the momentscience js sdk is as follows fetch offers automatically fetches offers as soon as the sdk is ready (controlled by the autoload configuration parameter) display offers automatically displays the offers as soon as they are successfully fetched (controlled by the autoshow configuration parameter) delaying the moments offer unit the momentscience sdk can be configured to delay fetching and displaying offers at specific points in a user's journey , this can be beneficial when integrating with a single page application (spa) c ollecting payload attributes in multiple steps you can utilize the autoload configuration parameter to control when offers are fetched by setting autoload to false, you delay the retrieval of offers until explicitly triggered fetching and displaying offers when ready to fetch and display offers, use the refresh function updating payload parameters use the setpayload function to optionally update the payload parameters setting autoload attribute window\ adpxconfig = { accountid 'your sdkid', // autoload is set to false wait for a call to // `window\ adpx refresh()` // to fetch and show the offers autoload false }; calling setpayload function window\ adpx init(adpxconfig); // update the payload as needed window\ adpx setpayload({ category 'new user' }); // payload can be updated as many times as needed window\ adpx setpayload({ subcategory 'car owner' }); / display the offers unit / window\ adpx refresh(); default behavior ( autoload true) offers are automatically fetched and an impression is recorded when the sdk is ready custom behavior ( autoload false) the sdk does not fetch any offers, and no impressions are recorded until the refresh function is called to fetch a new set of offers control the moments offer unit display the autoshow configuration attribute controls the display behavior of the momentscience unit by default, autoshow is set to true , meaning the moments offer unit will be shown automatically when the sdk has offers fetched and loaded however, you can set autoshow to false if you want to suppress the moments offer unit from immedietely displaying offers when they're fetched and loaded to display the offers unit, you'll need to use the window\ adpx reload() function setting autoshow attributes window\ adpxconfig = { accountid 'your sdkid', // autoshow is set to false offers will be fetched // wait for a call to `window\ adpx reload()` // to show the offers autoshow false }; reload function // initialize the adspostx sdk with the configured options window\ adpx init(adpxconfig); / display the offers unit the first time / window\ adpx reload(); / display the offers unit again after it has been closed / window\ adpx reload(); the following list explains the behavior of the sdk for all possible values of autoload and autoshow true falsefalse left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type false left unhandled content type re calling momentscience calling the same offers the reload function in the sdk allows the moments offer unit to be displayed again after it has been dismissed this function is useful when a customer accidentally closes the unit or wants to revisit the offers reload function window\ adpx reload(); the reload function does not fetch a new set of offers it simply displays any previously fetched set of offers (starting with the first offer) calling new offers the refresh function in the sdk enables the moments offer unit to fetch a new set of offers fetched from our api and show them this feature is useful if you want to update and display new offers dynamically refresh function window\ adpx refresh(); 📢 if you're running into any issues while going through the integration process, feel free to contact us at help\@m omentscience com