KonvoAI Docs
Chat widget

Chat widget

How the KonvoAI chat widget loads, isolates itself, and connects to your channel.

The KonvoAI chat widget is a single embeddable script that drops a launcher and chat panel onto any website. Visitors click it to start a conversation; messages flow in real time to your KonvoAI inbox and back.

It is designed to be safe to paste onto a production page: one <script> tag, no build step, no framework requirement, and no chance of clashing with your existing styles or markup.

How it works

One script, one channel

You add a single <script> tag carrying your channel identifier (data-konvoai-channel). On load, the script reads that attribute, fetches the channel's appearance settings, and renders the launcher in the corner of the page.

Isolated rendering

The widget mounts itself into its own container appended to <body> and renders inside a Shadow DOM. This means the widget's styles can't leak onto your page, and your page's CSS can't accidentally restyle the widget.

Anonymous, verified session

Before connecting, the widget runs a brief in-browser verification step to prove the request comes from a real browser rather than an automated client. This is invisible to the visitor and typically completes in under a second. It then opens a live connection to stream messages.

Real-time conversation

Messages send and arrive over a persistent connection. If the connection drops (a network blip, a laptop waking from sleep), the widget reconnects on its own and reloads any messages it missed.

What it adds to your page

When the widget loads it appends a single element to the end of <body>:

<div id="konvoai-widget"><!-- shadow root: launcher + panel live here --></div>

Everything the widget renders lives inside that element's shadow root. It does not modify the rest of your DOM, register global event handlers on your elements, or pull in your page's stylesheets.

Appearance — colors, position, launcher icon, conversation starters, and whether to ask visitors for an email — is configured in the KonvoAI dashboard, not in the embed snippet. The widget fetches those settings at load time, so changes take effect on the next page load without editing your site.

Where to go next

On this page