Playbook Widget Builder

Browse production-ready sports widgets, customize each component, preview it responsively, and copy the generated embed code for your website or application.

Help
Setup Guide

Choose a sport and game, customize the widget, then copy the generated embed code into your site.

Browser Key Warning

Browser API keys are visible in page source. Protect them with allowed-domain restrictions.

Localhost is fine for development, but production requests still enforce your key’s domain allowlist.

Quick Start
  1. Connect your API key
  2. Select a real game
  3. Pick a widget variant
  4. Copy the embed code
Get Free API Key View Pricing
Builder Mode
API Key
Demo mode uses curated sample matchups and demo-safe widget previews.
View Pricing Documentation Get Free API Key
Variant
Theme
Background Pro Playbook background for the theme
Applies to accents and selected states
Site Styling Pro Match the widget to your site

Modules
Responsive Toggle
Preview Size
Desktop width

Live Preview

Los Angeles Dodgers at San Diego Padres

Selected Widget
Desktop Width
Want to customize this widget? Compare plans
Event log Click a team, player, game, or price in the preview to see the event your code receives.

    Customer Embed Code

    Generated from the currently selected sidebar game and toolbar options.

    Demo preview only

    Ready to use this widget?

    Create a free API key and add it to the generated embed code.

    Get Free API Key View Pricing
    Demo preview — connect an API key to generate production code.
    When someone clicks

    Handle clicks and events

    Widgets fire pbk:ready and pbk:error on the embed element, plus click events with the game, team, and player in event.detail. Call event.preventDefault() to stop a configured link.