🧩 Widget

Embed the Pine AI chat widget on any website with a single script tag

🚧

Coming Soon

The embeddable chat widget is currently in development. The interface described below is planned and subject to change. Contact [email protected] for early access.

Embeddable Chat Widget

The Pine AI chat widget lets you add AI-powered sports chat to any website with a single script tag. No custom domain, Auth0 setup, or user management required β€” just a partner ID and a <script> tag.

Script Tag Integration

Minimal Setup

<script src="https://widget.pine-sports.com/embed.js"
  data-partner-id="YOUR_PARTNER_ID" async></script>

With User Identity

<script src="https://widget.pine-sports.com/embed.js"
  data-partner-id="YOUR_PARTNER_ID"
  data-user-id="user_456"
  data-user-email="[email protected]"
  data-user-hmac="a1b2c3..." async></script>

User Modes

Anonymous (Default)

Only data-partner-id is required. Users can start chatting immediately without any login.

  • Rate limit: 50 chats per day
  • Tracking: Usage attributed to your partner account

Identified

Provide data-user-id, data-user-email, and data-user-hmac to identify users from your own authentication system.

  • Rate limit: 200 chats per day
  • Tracking: Per-user usage breakdown in your dashboard

HMAC Authentication

To prevent impersonation, identified users require an HMAC signature computed on your server. The widget secret is never exposed to the browser.

Server-side computation:

HMAC-SHA256(widget_secret, user_id + ":" + user_email)

Example (Python):

import hmac
import hashlib

widget_secret = "your_widget_secret"  # From dashboard
user_id = "user_456"
user_email = "[email protected]"

user_hmac = hmac.new(
    widget_secret.encode(),
    f"{user_id}:{user_email}".encode(),
    hashlib.sha256
).hexdigest()

Example (Node.js):

const crypto = require('crypto');

const widgetSecret = 'your_widget_secret'; // From dashboard
const userId = 'user_456';
const userEmail = '[email protected]';

const userHmac = crypto
  .createHmac('sha256', widgetSecret)
  .update(`${userId}:${userEmail}`)
  .digest('hex');

Your widget secret is available in the Widget Setup section of the SharpSports dashboard.

Customization Attributes

AttributeTypeDefaultDescription
data-positionstring"bottom-right"Widget position: "bottom-right" or "bottom-left"
data-greetingstring(from config)Override the default greeting message
data-primary-colorstring(from theme)Override the primary brand color (hex value)

JavaScript API

Control the widget programmatically for single-page applications and dynamic interactions:

// Open the chat widget
window.PineSportsWidget.open()

// Close the chat widget
window.PineSportsWidget.close()

// Toggle the widget open/closed
window.PineSportsWidget.toggle()

// Identify a user (for SPAs where identity changes after page load)
window.PineSportsWidget.identify({
  userId: '456',
  email: '[email protected]',
  hmac: 'a1b2c3...'
})

// Clear session and return to anonymous mode
window.PineSportsWidget.reset()

Dashboard Widget Setup

Configure the widget in the Widget Setup section of the SharpSports dashboard:

SettingDescription
Widget SecretAuto-generated HMAC secret for identity verification. Use the copy button to copy it; regenerate if compromised.
Allowed DomainsList of domains authorized to load the widget. Requests from unauthorized domains are rejected.
Embed CodeAuto-generated <script> tag with your partner ID β€” copy and paste into your site.