Banners: Low-Code Integration

1 library to deploy banners on your marketplaces or retailers

You can easily integrate banners into your site/app with the this open source library:

Remember to replace the token (your API key) and the slot-id attribute with your own values that you can find at [Topsort](


  src="[email protected]/dist/banners.mjs"
<script async type="module" src=""></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 `${}`;
    // 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;
  <topsort-banner width="600" height="400" slot-id="<your slot id>"></topsort-banner>

Banner Attributes

widthNumberBanner width
heightNumberBanner height
slot-idStringThe slot ID for this banner
category-idOptional StringThe category ID of the current page
search-queryOptional StringThe search query of the current page

Banner Behaviors

Function NameArg typeReturn TypeDescription
getLinkBannerstringGenerates a URL from a banner response
getLoadingElementHTMLElementA custom element to be shown when the banner is loading.
getErrorElementHTMLElementA custom element to be shown when the banner errors.

Banner Interface

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