Customization Options
AdsPostX is now MomentScience! 🎉
We have rebranded AdsPostX to MomentScience. All the latest documentation and updates can now be found at MomentScience Documentation.
Welcome to the AdsPostX SDK customization options. Here, you'll discover how to tailor your website's AdsPostX 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 AdsPostX integration's potential.
The AdsPostX 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 AdsPostX SDK.
To use this feature, pass the callback function as the second parameter to the initfunction. The following example demonstrates basic usage.
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. |
|
ad_not_taken | Indicates that the user engaged with the negative call-to-action (CTA) of the Offer. |
|
closed_ads | Will be triggered when:
| No payload for this event |
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:
AdsPostX Offers an easy way to customize the appearance of the unit on your website. Just log into the AdsPostX dashboard, go to Integrations, select JS SDK, select Configure, and follow the indicated steps.
AdsPostX 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.
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:
|
darken_bg | Boolean | When this option is true, it darkens the background behind the Offers Unit.
|
darken_bg_non_centered | Boolean | When this option is set to true it darkens the background behind the Offers Unit.
|
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:
|
enable_vertical_offset | Boolean |
|
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.
|
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:
|
show_close | Boolean | It determines whether to show or disable the Close Ad (X) button at the top right corner of the Offers Unit.
|
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 Ad (X) button after displaying the Offers Unit.
|
embedded | Object | An object that can contain the following :
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. |
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.
The default behavior of the AdsPostX 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).
The AdsPostX 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.
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.
The autoShowconfiguration attribute controls the display behavior of the AdsPostX 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.
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(). |
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.
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).
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.
📢 If you're running into any issues while going through the integration process, feel free to contact us at [email protected].