Custom Sites

Render ads

This guide will walk you through integrating the Publishers API into your store.

Adding the Script

Insert the following snippet in your <head> or <body>.

  <script type="text/javascript">
    function e() {
      return new Promise((e, t) => {
        const s = document.createElement("script");
        s.src = "https://js.superpayments.com/advertisers/js/v1/publishers.custom.js";
        s.async = true;
        s.onload = e;
        s.onerror = t;
        document.head.appendChild(s);
      })
    }
    e().then(() => {
      window.SuperPublishers.init({
        publishableApiKey: "[PUBLISHABLE_API_KEY]",
        containerId: "[CONTAINER_ID]",
        publisherContext: "[CONTEXT]",
        brandId: "[BRAND_ID]",
      })
    }).catch(e => {
      console.error("Failed to load Super Payments Publishers script", e)
    });
  </script>

Component Placement

Create a div element: Add the following HTML code to your page where you want the Advertisers component to appear:
```
<div id="[CONTAINER_ID]"></div> 
```
Choose an id: Replace [CONTAINER_ID] with a unique identifier for your container. This id will be used to link the script to the correct location on your page.
Type of publishing: Replace [CONTEXT] with pre-checkout or post-checkout to change the context.
Brand details: Replace [BRAND_ID] with your id from your Merchant Portal.
Customize (optional): You can apply CSS styles to the div container to control its appearance and positioning.

Configuration Parameters

API Key: Replace [YOUR_KEY] with your unique publishable API key.
Container ID: Replace [CONTAINER_ID] with the same id you used in the div element you created in Component Placement
Brand Id: Replace [BRAND_ID] with your Brand Id from the Super Payments Portal
Publisher Context: Replace [CONTEXT] with pre-checkout or post-checkout to render the correct component.