π§© Widget
Embed the Pine AI chat widget on any website with a single script tag
Coming SoonThe 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
| Attribute | Type | Default | Description |
|---|---|---|---|
data-position | string | "bottom-right" | Widget position: "bottom-right" or "bottom-left" |
data-greeting | string | (from config) | Override the default greeting message |
data-primary-color | string | (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:
| Setting | Description |
|---|---|
| Widget Secret | Auto-generated HMAC secret for identity verification. Use the copy button to copy it; regenerate if compromised. |
| Allowed Domains | List of domains authorized to load the widget. Requests from unauthorized domains are rejected. |
| Embed Code | Auto-generated <script> tag with your partner ID β copy and paste into your site. |
Updated about 3 hours ago