Customizable Chat Widget
A production-ready chat widget that fits any website
The BPract Agents chat widget is a Shadow DOM web component that installs on any website with a single script tag. It supports streaming AI responses, dark mode, custom colors, launcher icon customization, pre-chat forms, and responsive mobile layouts. The Shadow DOM encapsulation ensures your website styles never conflict with the widget and the widget never breaks your page.
A website with the BPract chat widget open in the bottom-right corner, showing a streaming AI response with the brain orb animation and dark mode styling.
Key Benefits
Why Customizable Chat Widget matters for your business.
Shadow DOM web component guarantees zero CSS conflicts with your existing website styles
Single script tag installation works on any platform including WordPress, Shopify, Webflow, and custom HTML
Real-time streaming responses with animated brain orb give visitors immediate feedback
Dark mode support with automatic detection or manual toggle matches your site preferences
Fully customizable colors, position, launcher icon, and welcome message through the admin panel
Mobile-responsive design expands to full viewport on small screens for a native app feel
Why Shadow DOM Matters
Most chat widgets inject CSS directly into your page, creating unpredictable style conflicts. BPract Agents uses the browser Shadow DOM API to completely encapsulate the widget styles. Your CSS cannot leak in and the widget CSS cannot leak out. This means the widget looks exactly the same whether your website uses Tailwind, Bootstrap, custom styles, or no framework at all. There is no need for !important overrides, specificity hacks, or z-index battles.
One-Line Installation
Adding the chat widget to your site takes one script tag and one custom HTML element. The script loads the web component definition, and the custom element renders the widget with your tenant configuration. You pass your chatbot ID as an attribute, and the widget fetches its configuration, colors, welcome message, and system prompt from the BPract API automatically. No build step, no npm install, no framework dependency.
Customization Options
- Primary and accent colors configurable through the admin panel with live preview
- Launcher icon supports custom SVG, emoji, or the default BPract chat icon
- Welcome message and placeholder text set the tone for the visitor experience
- Position can be set to bottom-right or bottom-left to avoid conflicts with other page elements
- Pre-chat lead collection form gathers visitor name and email before the conversation starts
- Custom CSS injection available for advanced styling needs beyond the built-in options
Streaming and Interaction
Every AI response streams in real time, token by token, with an animated brain orb indicating that the AI is thinking. Visitors see the response building progressively rather than waiting for a complete answer. The widget supports markdown rendering, inline action cards, clickable links, and code blocks. On mobile, the widget expands to fill the viewport and includes a native-feeling header with a close button.
Frequently Asked Questions
Common questions about Customizable Chat Widget.
Will the chat widget slow down my website?
Can I use the widget on multiple websites?
Does the widget work with single-page applications?
Related Features
Explore more capabilities of BPract Agents.
Experience Customizable Chat Widget
See how Customizable Chat Widget can transform your website. Start your free trial today.