L2Chat Widget

Overview

A production-ready AI chat widget that drops into any website with a single script tag. Supports multiple AI providers, renders rich interactive content, and isolates styles with Shadow DOM to prevent CSS conflicts.

The Problem

Adding AI chat to websites typically means:

• Complex SDK integration with provider-specific code
• CSS conflicts with existing site styles
• Limited customisation options
• No rich content beyond plain text
• Building the same widget repeatedly for different projects

Businesses need a drop-in solution that “just works” across any site.

Solution

Single script tag deployment with extensive customisation:

Providers

Rich Content Components

The widget renders 21+ interactive components from agent responses:

Features

Shadow DOM Isolation

Complete style isolation prevents CSS conflicts with host sites. The widget’s styles never leak out, and site styles never affect the widget.

Streaming Responses

Real-time text display as the AI responds. Shows thinking indicators during processing and tool call visibility for transparency.

Voice Support

Optional voice input/output with animated orb indicator (ElevenLabs provider). WebRTC connection for low-latency conversation.

Full Theming

22 preset themes with light/dark/system modes. Every colour customisable via HTML attributes:

<l2-chat
  agent-id="your-agent"
  theme="dark"
  primary-color="#06b6d4"
  header-bg="#0f172a"
  user-message-bg="#0ea5e9"
/>

Architecture

Client Website
    ↓
<script src="widget.l2chat.com/widget.js">
    ↓
<l2-chat> Web Component
    ↓
Shadow DOM (style isolation)
    ↓
Preact App
    ↓
Provider Selection:
├── ElevenLabs (WebRTC/WebSocket)
├── AI SDK v5 (SSE streaming)
├── n8n (SSE streaming)
└── Workers AI (via proxy)
    ↓
Rich Content Parser
    ↓
Interactive Components

Tech Stack

• Runtime: Preact (3KB vs React’s 40KB)
• Hosting: Cloudflare Workers + R2
• Voice: ElevenLabs SDK + WebRTC
• Markdown: Custom parser with DOMPurify
• Build: Vite with UMD/ESM outputs
• Styling: CSS-in-JS with CSS variables

Embedding

<!-- Add the widget script -->
<script src="https://widget.l2chat.com/widget.js"></script>

<!-- ElevenLabs provider (default) -->
<l2-chat agent-id="your-elevenlabs-agent-id"></l2-chat>

<!-- AI SDK v5 provider -->
<l2-chat provider="ai-sdk" api-endpoint="/api/chat"></l2-chat>

<!-- n8n provider -->
<l2-chat provider="n8n" webhook-url="https://n8n.example.com/webhook/xxx"></l2-chat>

Use Cases

Customer Support - AI-powered help desk with rich responses

Sales Assistants - Product recommendations with cards and pricing

Appointment Booking - Date pickers and calendar integration

Lead Qualification - Inline forms for structured data collection

Knowledge Bases - FAQ accordions and document embeds