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); }); event description payload ads found denotes that the sdk found offers for the user total integer integer the total number of offers returned by the sdk no ads found no relevant offers were returned by the sdk no further events will be triggered after this event no payload for this event ad taken when the user clicks on an offer, which opens in a new tab target url url url link to the offer total integer integer the total number of offers returned by the sdk current integer integer ; position of current offer in the list of offers presented ad not taken indicates that the user engaged with the negative call to action (cta) of the offer total integer integer the total number of offers returned by the sdk current integer integer position of current offer in the list of offers presented closed ads will be triggered when the user closed the offer unit by clicking the (x) icon the user clicks on the negative cta button on the last offer the user clicks on the "more offers" button on the last offer (if the show perskswall cta feature is enabled) no payload for this event 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 property name type description ad position string by default, the moments offers unit is displayed in the center of the screen however, you can choose different positions from the options below on desktop display center bottom center bottom left bottom right top center top left top right darken bg boolean when this option is true , it darkens the background behind the offers unit this setting is activated only when the ad position is set to center darken bg non centered boolean when this option is set to true it darkens the background behind the offers unit it is applied when the ad position is set to any value other than center delay integer this attribute determines the delay, in seconds, between fetching the offers and displaying the offers unit on the screen privacy policy string this attribute specifies the url link to your privacy policy if you have one screen margin integer the margin between the offers unit and the closest edges of the screen in pixels show disclaimer boolean when set to true , this attribute enables the display of the disclaimer text in the footer of the offers unit button order string this option enables you to control which button to show first, available options are neg first this value will show the negative button first pos first this value 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 enables mou mode instead of the sou mode false displays the default sou mode learn more about presentation options docid 8xm1u t8lcivrgphv7jgd show ads on exit boolean when this option is 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 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 it controls whether to enable/disable the close delay feature 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 momentscience offers unit into your webpage fill container (boolean) when true, the embedded unit will take up the full height of its parent container this setting only applies to the embedded unit 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 learn more about presentation options docid 8xm1u t8lcivrgphv7jgd 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 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 autoload autoshow behavior true true offers are fetched as soon as the sdk is ready and the offers unit will display ( default ) false true offers should be explicitly fetched with window\ adpx refresh() , the offers unit will display automatically after offers are successfully fetched false false offers should be explicitly fetched with window\ adpx refresh() , and the offers unit to be explicity displayed with window\ adpx reload() true false offers are fetched as soon as the sdk is ready, display the offers unit with window\ adpx reload() 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