Skip to main content
Tallysight widgets load in two steps: you add a single SDK script tag to your page, then place one or more widget elements wherever you want a widget to appear. The SDK detects those elements automatically and loads the correct widget bundle from Tallysight’s CDN.

​
Step 1: Add the SDK script tag

Place the following <script> tag in your HTML, ideally in the <head> or just before the closing </body> tag:
The type="module" attribute is required. It tells the browser to treat the file as an ES module, which is how the SDK loads widget bundles on demand without blocking page rendering.

​
Step 2: Configure your workspace

Add a data-tallysight-defaults-widget-config-workspace attribute to the script tag with your workspace slug. This scopes all widgets on the page to your workspace’s branding and sportsbook configuration:
Any config attribute prefixed with data-tallysight-defaults-widget-config- applies to every widget on the page as a default. Individual widgets can override these defaults with their own data-tallysight-widget-config-* attributes.

​
Step 3: Add widget elements

Place a <span> or <div> element with data-tallysight-widget-type and data-tallysight-widget-id wherever you want a widget to render:
The SDK scans the DOM on load, finds elements with data-tallysight-widget-type, and replaces each one with the corresponding widget.

​
Widget element attributes

The data-tallysight-widget-loading attribute controls when the widget bundle is fetched:
  • eager — loads immediately, regardless of any global setting
  • lazy — loads only when the widget approaches the viewport (uses IntersectionObserver)
  • auto — follows the global lazy loading setting on the script tag (default)

​
WordPress shortcode format

If you use the Tallysight WordPress plugin, you can embed widgets using shortcodes instead of raw HTML:
Shortcode attributes map directly to their data-tallysight-widget-config-* counterparts. Omit the data-tallysight-widget-config- prefix and use the remaining portion as the attribute name.

​
Complete example

Here is a full HTML page that loads the SDK and embeds a tile widget:
You only need one script tag per page, even if you embed multiple widgets. The SDK loads each widget bundle on demand and shares the configuration across all widget elements on the page.