Embedding the Playbott Chat Widget

Deploying the Playbott AI chat widget on your website takes less than two minutes. The widget operates as a sandboxed, asynchronous runtime that connects your visitors to automated AI resolution and human support escalation.

graph TD
    A[Visitor Opens Website] --> B(Async widget.js Loader)
    B --> C{Authenticated User?}
    C -->|data-auth-info| D[Initialize Identified Identity]
    C -->|Anonymous Visitor| E[Initialize Guest Session]
    D --> F[Connect Real-time Gateway]
    E --> F
    F --> G[Render Floating Chat Launcher]

Prerequisites

Before adding the widget snippet to your website HTML:

1. Active Playbott Account: Sign in to your Playbott Dashboard.
2. Registered Website: Navigate to Organisation Settings → Websites and verify your website domain is registered.
3. Public Key: Copy your unique Website Public Key (data-key) from the website detail card.

Step 1: Add the Embed Code

Paste the following <script> tag into your website template right before the closing </body> tag on every page where you want the chat widget to appear:

<!-- Playbott AI Chat Widget -->
<script
  src="https://playbott.com/widget.js"
  data-key="YOUR_WEBSITE_PUBLIC_KEY"
  async
></script>

Replace YOUR_WEBSITE_PUBLIC_KEY with the actual public key from your dashboard.

Step 2: Configuration Attributes

You can customize runtime behavior by adding optional data-* attributes directly to the <script> tag:

Identifying Logged-in Users

If your users log in to your web application, pass their profile information using data-auth-info so agents know who they are talking to:

<script
  src="https://playbott.com/widget.js"
  data-key="YOUR_WEBSITE_PUBLIC_KEY"
  data-auth-info='{"name": "Alex Mercer", "email": "alex@example.com", "id": "usr_94812"}'
  async
></script>

Step 3: Content Security Policy (CSP)

If your website enforces a strict Content Security Policy, update your headers or <meta http-equiv="Content-Security-Policy"> tag to permit Playbott assets and WebSocket connections:

Content-Security-Policy:
  script-src 'self' https://playbott.com;
  connect-src 'self' https://playbott.com wss://playbott.com;
  frame-src 'self' https://playbott.com;

Single Page Applications (SPA) Support

The Playbott loader automatically intercepts client-side routing in frameworks such as Next.js, React Router, Vue Router, and Angular.

• Tracks window.history.pushState and window.history.replaceState.
• Listens to popstate and hashchange browser events.
• Evaluates dynamic URL visibility rules seamlessly without requiring manual teardown or re-initialization.

Troubleshooting

Widget launcher does not appear

• Verify data-key is exact and has no trailing whitespace.
• Check browser DevTools console for CSP or network block errors.
• Ensure the domain in the browser address bar matches the domain registered in Organisation Settings → Websites.

Launcher appears on wrong pages

• Review your path-based visibility rules under Website Settings → Widget Settings.

Next Steps

• Explore Widget Customization & Styling to tailor colors, position, greeting messages, and themes.
• Connect Slack Integration to respond to customer inquiries directly from your team's Slack channels.