> ## Documentation Index
> Fetch the complete documentation index at: https://docs.leadblanc.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Chat Widget

> Embed the high-performance Leadblanc conversational widget on any website.

The Leadblanc Web Chat widget is a lightweight, responsive script engineered to load asynchronously with zero impact on your site's Core Web Vitals (sub-50ms paint time, zero Cumulative Layout Shift).

## HTML / Static Site Installation

Paste this snippet immediately before the closing `</body>` tag on every page where you want the chat bubble to appear:

```html theme={null}
<script 
  src="https://leadblanc.com/widget.js" 
  data-business-id="YOUR_BUSINESS_ID"
  defer
></script>
```

Replace `YOUR_BUSINESS_ID` with the business identifier located in your **Settings > General** dashboard page.

***

## React & Next.js Installation

For Next.js (App Router) or React applications, use Next.js's optimized `Script` component:

```tsx theme={null}
// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}

        {/* Leadblanc Conversational Widget */}
        <Script
          src="https://leadblanc.com/widget.js"
          data-business-id={process.env.NEXT_PUBLIC_LEADBLANC_BUSINESS_ID}
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}
```

***

## Customization Options

You can customize the widget theme, avatar, greeting message, and launcher positioning directly inside your Leadblanc dashboard under **Channels > Web Chat > Appearance**:

| Setting | Options | Description |
| :- | :- | :- |
| **Theme Mode** | `Light` / `Dark` / `Auto` | Adapts automatically to customer OS preference or matches your site. |
| **Accent Color** | Any Hex code (`#0F172A`, `#10B981`, etc.) | Applied to the launcher bubble, send button, and user message bubbles. |
| **Initial Greeting** | Custom text string | Proactively displayed when the customer opens the chat for the first time. |
| **Position** | `Bottom Right` / `Bottom Left` | Screen placement with responsive margin offsets. |
| **Sound Alerts** | `Enabled` / `Muted` | Subtle tactile audio cue when an agent or human operator replies. |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.