Lightweight Live Chat Widget for Modern Web Apps

Traditional customer support widgets often package hundreds of kilobytes of third-party frameworks onto your website, degrading Core Web Vitals, slowing down initial page render, and causing CSS collisions with your application layouts.

The Playbott Live Chat Widget is engineered from the ground up for speed, isolation, and seamless embedding across modern web architectures.

Why Lightweight Architecture Matters

A chat widget should assist your customers, not penalize your Lighthouse scores:

• Asynchronous Execution: The host loader is standalone vanilla JavaScript with no third-party framework dependencies. It loads asynchronously (async) without blocking HTML DOM construction.
• Sandboxed Iframe Isolation: The interactive chat window operates inside an isolated iframe with a dedicated z-index: 2147483000. Your application CSS styles will not distort the widget, and widget styles cannot bleed into your page.
• Low Memory Overhead: Minimal background idle memory footprint until a visitor opens a conversation.

Two-Tier Loading Architecture

Host Web Page
  ├── <script src="https://playbott.com/widget.js" async> (4.8 kB gzip / 15.2 kB raw)
  │     ├── Native DOM Launcher Button (#chat-widget-launcher)
  │     ├── Dark Mode Class Observer (.dark on <html>)
  │     └── SPA History & Route Listener
  │
  └── Sandboxed Iframe (Deferred / Isolated Runtime)
        ├── WebSockets Real-Time Transport (wss://)
        ├── AI Conversation Engine & Human Live Support
        └── Visitor Auth Context (data-auth-info)

Key Widget Capabilities

1. Visual Customization & Brand Styling

Tailor the chat launcher directly to your corporate identity:

• Brand Colors: Configure custom primary hex colors for the launcher bubble and message accents.
• Avatars & Greeting: Set dedicated assistant logos and automated welcome messages.
• Positioning: Switch between Bottom-Right and Bottom-Left corner alignments to accommodate sticky banners or checkout triggers.

2. Automatic Dark Mode Synchronization

The widget detects your website's active theme state by inspecting the .dark class on the root <html> or <body> element, ensuring a seamless visual transition during user-toggled theme changes.

3. Authenticated Visitor Context

When visitors sign into your web application, pass their profile attributes (name, email, id, plan) using the data-auth-info script attribute. Support agents and the AI Knowledge Engine immediately understand who is asking for help without asking for redundant credentials.

4. Single Page Application Navigation Tracking

The loader tracks client-side navigation in modern single-page applications by observing browser history and URL changes (popstate, hashchange, and history mutations). When users navigate between dashboard tabs, the widget automatically adapts its contextual visibility rules.

5. Dynamic URL Visibility Rules

Define exact or wildcard path rules in your Playbott Dashboard (e.g., include on /docs/* and /pricing, hide on /checkout/* or /auth/*). The widget evaluates these rules in real time across page transitions.

Related Capabilities & Guides

• Learn how automated answers are generated with the AI Knowledge Engine.
• Discover how support teams handle live chats in the Customer Support Solution Guide.
• Step-by-step developer embedding: Widget Installation Guide.
• Advanced theme configuration: Widget Customization Guide.