You can easily integrate banners into your site/app with the this open source library: https://github.com/Topsort/banners.js

Remember to replace the token (your API key) and the slot-id attribute with your own values that you can find at [Topsort](https://app.topsort.com/).

Usage

<script
  async
  type="module"
  src="https://unpkg.com/@topsort/[email protected]/dist/banners.mjs"
></script>
<script async type="module" src="https://unpkg.com/@topsort/analytics.js"></script>
<script>
  // Set API key for auctions and events
  window.TS = {
    token: "<your topsort api key>",
  };
  // Custom behavior can be configured for each site.
  window.TS_BANNERS = {
    // handle the destination link
    getLink(banner) {
      return `https://example.com/${banner.id}`;
    },
    // handle loading/fetching state
    getLoadingElement() {
      const el = document.createElement("div");
      el.innerText = "Loading...";
      return el;
    },
    // handle errors
    getErrorElement() {
      const el = document.createElement("div");
      el.innerText = "Error loading banner";
      return el;
    },
  };
</script>
<body>
  <topsort-banner width="600" height="400" slot-id="<your slot id>"></topsort-banner>
</body>

Banner Attributes

Name	Type	Description
width	Number	Banner width
height	Number	Banner height
slot-id	String	The slot ID for this banner
category-id	Optional String	The category ID of the current page
search-query	Optional String	The search query of the current page

Banner Behaviors

Function Name	Arg type	Return Type	Description
`getLink`	Banner	`string`	Generates a URL from a banner response
`getLoadingElement`		`HTMLElement`	A custom element to be shown when the banner is loading.
`getErrorElement`		`HTMLElement`	A custom element to be shown when the banner errors.

Banner Interface

Name	Type	Description
`type`	`"product" \| "vendor" \| "brand" \| "url"`	The type of the winning entity, represented by the banner.
`id`	`string`	The ID of the winning entity. If the entity is of type URL, this is the URL.
`resolvedBidId`	`string`	The corresponding auction ID of the winning entity.
`asset`	`[{ url: string }]`	An array of url linking to the assets of the banne