JS SDK (for Websites)
Presentation Options

Introduction
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:
JS

  <script>
      (function (window) {
          window.AdpxConfig = {
              accountId: 'YOUR_SDKId', //where you specify your SDKId which is provided in the AdsPostX Dashboard
              autoShow: true
      };

      /**
       * Fill this object with user-specific values from your website. These
       * values are picked up by the SDK.
       */
        window.AdpxUser = {
          email: '',
          firstname: '',
          lastname: '',
          mobile: '',
          confirmationref: '',
          amount: '',
          currency: '',
          paymenttype: '',
          ccbin: '',
          zipcode: '',
          country: '',
          language: '',
          tags: '',
          subid: null
      }
      })(window.self !== window.top ? window.top : window);
  </script>

  <script type="module">
      (async function (window) {
          const target = window.document.head || window.document.body;
          const script = window.document.createElement('script');
          script.type = 'text/javascript';
          script.src = 'https://cdn.pubtailer.com/launcher.min.js';
          script.importance = 'high';
          script.crossOrigin = 'anonymous';
          script.async = true;
          script.id = 'adpx-launcher';
          target.appendChild(script);
          await new Promise(function (resolve) {
            window.Adpx
                ? resolve()
                : window.document
                    .getElementById('adpx-launcher')
                    .addEventListener('load', function () { resolve(); })
          });
          window.Adpx.init(window.AdpxConfig);
      })(window.self !== window.top ? window.top : window);
  </script>
    

  <script>
      (function (window) {
          window.AdpxConfig = {
              accountId: 'YOUR_SDKId', //where you specify your SDKId which is provided in the AdsPostX Dashboard
              autoShow: true
      };

      /**
       * Fill this object with user-specific values from your website. These
       * values are picked up by the SDK.
       */
        window.AdpxUser = {
          email: '',
          firstname: '',
          lastname: '',
          mobile: '',
          confirmationref: '',
          amount: '',
          currency: '',
          paymenttype: '',
          ccbin: '',
          zipcode: '',
          country: '',
          language: '',
          tags: '',
          subid: null
      }
      })(window.self !== window.top ? window.top : window);
  </script>

  <script type="module">
      (async function (window) {
          const target = window.document.head || window.document.body;
          const script = window.document.createElement('script');
          script.type = 'text/javascript';
          script.src = 'https://cdn.pubtailer.com/launcher.min.js';
          script.importance = 'high';
          script.crossOrigin = 'anonymous';
          script.async = true;
          script.id = 'adpx-launcher';
          target.appendChild(script);
          await new Promise(function (resolve) {
            window.Adpx
                ? resolve()
                : window.document
                    .getElementById('adpx-launcher')
                    .addEventListener('load', function () { resolve(); })
          });
          window.Adpx.init(window.AdpxConfig);
      })(window.self !== window.top ? window.top : window);
  </script>
    
﻿
﻿
Modal Popup Standard Offer Unit (SOU)
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.
Multi Offer Unit (MOU)
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:
﻿
 MOU Implementation Options
To configure your implementation with the MOU style, we have two options:
Via AdsPostX Dashboard Configuration Settings
Via Code Snippet Modification
AdsPostX Dashboard Configuration Settings
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".
﻿
Code Snippet Modication
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:
JS
window.AdpxConfig = {
  accountId: 'YOUR_SDKId', //where you specify your SDKId which is provided in the AdsPostX Dashboard
  autoShow: true,
  settings: {
    multi_offer_unit: true,
  },
};
window.AdpxConfig = {
  accountId: 'YOUR_SDKId', //where you specify your SDKId which is provided in the AdsPostX Dashboard
  autoShow: true,
  settings: {
    multi_offer_unit: true,
  },
};
﻿
Embedded AdsPostX Unit
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
﻿
Embedded MOU
﻿
Embedded Implementation
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:
JS
window.AdpxConfig = {
  accountId: 'YOUR_SDKId', //where you specify your SDKId which is provided in the AdsPostX Dashboard
  autoShow: true,
  settings: {
    embedded: {
      enabled: true,  // if true will enable AdsPostX Offer unit embedding
      showBorder: true, //control to show the embedded unit's border
      showHeader: true, //control to show the embedded unit's header
      showFooter: true, //control to show the embedded unit's footer
      targetElement: 'adpx', // target Id for where to embed, using 'adpx' as an example
    },
  },
};
window.AdpxConfig = {
  accountId: 'YOUR_SDKId', //where you specify your SDKId which is provided in the AdsPostX Dashboard
  autoShow: true,
  settings: {
    embedded: {
      enabled: true,  // if true will enable AdsPostX Offer unit embedding
      showBorder: true, //control to show the embedded unit's border
      showHeader: true, //control to show the embedded unit's header
      showFooter: true, //control to show the embedded unit's footer
      targetElement: 'adpx', // target Id for where to embed, using 'adpx' as an example
    },
  },
};
﻿
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
HTML
<div id='adpx'></div>
<div id='adpx'></div>
﻿
Example of Embedded SOU
Example of SOU embedded to show Border, Header and Footer
﻿
Example of Embedded MOU
Example of MOU embedded hiding Border, Header and Footer
﻿
Anatomy of the AdsPostX Offer Unit
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
﻿