Web Chat Widget - Leadblanc

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:

<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:

// 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.

⌘I