Skip to content

clients

Banners: Low-Code Integration

You can easily integrate banners into your site/app with the our open source library 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.

Usage

<script
  async
  type="module"
  src="https://unpkg.com/@topsort/banners/dist/banners.mjs"
></script>
<script async type="module" src="https://unpkg.com/@topsort/analytics.js/dist/ts.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>

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

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.

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