GuidesRecipesAPI Reference
Log In
Guides

Custom Sites

Integrate advertisers component into your website

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]",
      })
    }).catch(e => {
      console.error("Failed to load Super Payments Publishers script", e)
    });
  </script>

Component Placement

  1. 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> 
    
  2. 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.
  3. Type of publishing: Replace [CONTEXT] with pre-checkout or post-checkout to change the context.
  4. 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