Customization Options

19min

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 initfunction. 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);
});
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: 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_urlurl: link to the Offer
totalInteger: the total number of Offers returned by the SDK
currentInteger; 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.

totalInteger: the total number of Offers returned by the SDK
currentInteger: 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:

JS
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;
    }
});
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;
    }
});
﻿
﻿Styling MomentScience Units﻿
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 JS SDK.
Click on Configure.
Follow the on-screen instructions to adjust the unit’s appearance.
For more detailed guidance on using our theme customizer, click here.﻿ 
<div style="position: relative; padding-bottom: calc(51.763888888888886% + 42px); height: 0;"><iframe src="https://play.momentscience.com/embed/clyw67iud1c84z9kdkqz96ob4" loading="lazy" title="Styling MomentScience Units" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
<div style="position: relative; padding-bottom: calc(51.763888888888886% + 42px); height: 0;"><iframe src="https://play.momentscience.com/embed/clyw67iud1c84z9kdkqz96ob4" loading="lazy" title="Styling MomentScience Units" allow="clipboard-write" frameborder="0" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
﻿
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: {}
};
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_positionis 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_positionis 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 Multi Offer Unit (MOU)﻿﻿
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.
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 Embedding the Moments Offer Unit﻿﻿
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.
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 stylesoverride:
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
Override Offer Text
Perkswall and MOU Style
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
    },
}
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
    },
}
﻿
Override Header Style
Override Footer 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"
    },
}
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"
    },
}
﻿
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).
Collecting 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 refreshfunction.
Updating Payload Parameters:
 Use the setPayloadfunction to optionally update the payload parameters.
Setting autoLoad Attribute
Calling setPayload Function
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
};
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
};
﻿

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 refreshfunction is called to fetch a new set of Offers.
Control the Moments Offer Unit Display
The autoShowconfiguration attribute controls the display behavior of the MomentScience unit. By default, autoShowis set to true, meaning the Moments Offer Unit will be shown automatically when the SDK has Offers fetched and loaded. 
However, you can set autoShowto falseif 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
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();
// 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 reloadfunction 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();
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();
window.Adpx.refresh();
﻿
﻿
📢 If you're running into any issues while going through the integration process, feel free to contact us at help@momentscience.com﻿

Event	Description	Payload
ads_found	Denotes that the SDK found Offers for the user.	total 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_urlurl: link to the Offer totalInteger: the total number of Offers returned by the SDK currentInteger; 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.	totalInteger: the total number of Offers returned by the SDK currentInteger: 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

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_positionis 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_positionis 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 Multi Offer Unit (MOU)
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. 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 Embedding the Moments Offer Unit
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.

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().

Updated 12 Nov 2024

Did this page help you?

JS SDK (for Websites)

Theme Customizer

Customization Options

Introduction

Callback Functions

Callback Function Example

﻿Styling MomentScience Units﻿

Overriding Setting & Styles

Overriding Offer Unit Settings

Overriding Offer Unit Styles

Controlling When to Display the Moments Offer Unit

Delaying the Moments Offer Unit

Control the Moments Offer Unit Display

Re-Calling MomentScience

Calling The Same Offers

Calling New Offers

Styling MomentScience Units