When adding an AdsPostX placement to your website via the JS SDK, AdsPostX offers multiple presentation solution options. The following documentation aims to walk you through the options available and how to configure your AdsPostX implementation either via runtime code or configuration settings available in the AdsPostX Dashboard.
We'll assume we start off with the default code snippet as provided in the AdsPostX Dashboard:
The Modal Popup Standard Offer Unit (SOU) features showing one Offer at a time in a carousel modal popup in which the user can consider engaging in each Offer:
If they select the positive CTA button ("Try out AdsPostX!" in the above example) or if they select the negative CTA button ("No, Thanks"), then the Offer Unit will present the next Offer. The user can browse through the remaining Offers or return to a previous Offer via carousel controls. If the user selects the negative CTA on the last Offer or chooses to exit the popup via the 'x' button, then the Modal Popup is dismissed and the user resumes their original experience.
Alternativey instead of showing the user one Offer at a time, we can display all the offers at the same time in a tile format for them consider all the Offers at the same time via the Multi Offer Unit (MOU) view:
To configure your implementation with the MOU style, we have two options:
- Via AdsPostX Dashboard Configuration Settings
- Via Code Snippet Modification
Login to your AdsPostX Dashboard and go to Settings => Configuration. Under the Configuration section there's a setting called "Show Multi Offer Unit". Toggle the setting to be active to switch to the Multi Offer Unit and press "Save Configuration".
Alternatively you can modify the code snippet to specify the MOU settings to be true to enable the MOU style.
Locate where window.AdpxConfig is defined in the code snippet and modify it to include the settings object with the multi_offer_unit parameter set to true as demonstrated below:
The AdsPostX Offer unit (either SOU or MOU) can be enabled to be embedded into your page rather than a modal popup by specifying a div element to embed into your page as seen below: Embedded SOU
To embed your AdsPostX Offer unit, modify the code snippet to specify your embedded options.
Step 1. Add the configuration settings attribute to the initalization options
Locate where window.AdpxConfig is defined in the code snippet and modify it to include the settings object with the embedded parameter and it's related sub parameters options as demonstrated below:
The code above shows an example of the integration code for the embedding. The code includes the following settings:
- enabled: This setting determine whether or not the Offer unit will be embeded. When set to true, the Offer unit will be embedded into the div element with id=targetElement. When set to false, The Offer unit will be presented as a modal popup, default is false.
- showBorder: This setting determines whether or not the border of the embedded unit will be displayed. When set to true, the border will be displayed. When set to false, the border will not be displayed, default is true.
- showHeader: This setting determines whether or not the header of the embedded unit will be displayed. When set to true, the header will be displayed. When set to false, the header will not be displayed, default is true.
- showFooter: This setting determines whether or not the footer of the embedded unit will be displayed. When set to true, the footer will be displayed. When set to false, the footer will not be displayed, default is true.
- targetElement: This setting determines where the embedded unit will be placed on your website. AdsPostX will trigger to display in the div element with id=targetElement when it detects the existence of the div element. If this parameter is missing or set to null, AdsPostX defaults to the value 'adpx'.
Step 2. Include the div unit with id=targetElement for AdsPostX to embed into
AdsPostX will trigger itself to display once it detects a div element with id=targetElement
Example of Embedded SOU
Example of Embedded MOU
The embedded setting parameter includes optional sub parameters that control the presence of the Offer Unit's Border, Header, or Footer.
A: Border - The border of the Offer Unit
B: Header - The header of the Offer Unit
C: Footer - The footer of the Offer Unit