Customizing the Playbott Chat Widget

The Playbott chat widget is designed to adapt seamlessly to your brand identity. You can customize its visual styling, launcher positioning, welcome greetings, dark mode behavior, and authenticated user tracking both via dashboard settings and HTML script attributes.

Visual Branding & Colors

In your Playbott Dashboard → Website Settings → Widget Settings, you can configure core visual assets:

1. Brand Primary Color: Sets the launcher bubble background, active message buttons, and header gradient (e.g., #0f766e or your brand hex).
2. Widget Title & Subtitle: Customize the header text displayed when the chat window opens (e.g., "Customer Support — We typically reply in seconds").
3. Avatar & Bot Icon: Upload your company logo or custom AI assistant avatar.
4. Greeting Message: Specify the introductory automated message presented to first-time visitors before they type a question.

Launcher Position & Placement

By default, the launcher button is fixed to the bottom-right corner of the viewport (bottom: 24px; right: 24px).

• Position: Switch between Bottom-Right and Bottom-Left to avoid overlapping with existing floating action buttons, cookie banners, or checkout triggers.
• Z-Index: The container uses an isolated z-index: 2147483000 to prevent unintended layout collisions with host page modals while staying below critical browser overlays.

Dark Mode Support

The Playbott widget includes native high-contrast dark theme styling with automatic synchronization.

1. Automatic Root Class Detection (Recommended)

If your website toggles dark mode by adding the .dark class to <html> or <body> (e.g. Tailwind CSS, NextThemes), the widget automatically initializes in dark mode on page load.

2. Explicit Script Attribute

You can also explicitly lock dark mode on or off using data-dark-mode:

<script
  src="https://playbott.com/widget.js"
  data-key="YOUR_WEBSITE_PUBLIC_KEY"
  data-dark-mode="true"
  async
></script>

Authenticated User Tracking (data-auth-info)

When visitors are signed into your application, you can supply their user profile information to the widget. This allows AI assistants and human agents to greet users by name and view their account context immediately:

<script
  src="https://playbott.com/widget.js"
  data-key="YOUR_WEBSITE_PUBLIC_KEY"
  data-auth-info='{
    "id": "usr_1024",
    "name": "Jane Smith",
    "email": "jane.smith@example.com",
    "company": "Acme Corp",
    "plan": "Enterprise"
  }'
  async
></script>

Dynamic Page Visibility Rules

You can control exactly which pages display the chat widget directly from Website Settings → Widget Settings:

• Always Show: Display across all pages on the registered domain.
• Include Patterns: Only display on matching paths (e.g., /docs/*, /pricing, /help/*).
• Exclude Patterns: Hide the widget on sensitive routes (e.g., /checkout/*, /admin/*, /reset-password).

The loader listens to browser navigation events (popstate, hashchange, and history push state) and toggles widget visibility dynamically without reloading the page.

Next Steps

• Review the Widget Installation Guide for base embedding and CSP setup.
• Configure Slack Integration to route incoming chats to team channels.