How to add the Flutch chat widget to your website and restrict where it runs. Other widget topics: Appearance & content, Pre-chat form, Proactive messages, Lead capture form, JavaScript API.
Install the widget
Add one script tag to your site, just before </body>:
html<script src="https://widget.flutch.ai/widget.js" data-key="wp_your_public_key" async defer></script>
Find your public key in the console: open your agent → Web channel settings. It's the data-key value in the embed snippet, and the Copy button copies the whole tag. The widget loads asynchronously and won't slow your page down.
Script-tag options
Optional attributes on the script tag:
| Attribute | Values | What it does |
|---|---|---|
data-color | #RRGGBB | Pre-paints the button in your brand colour before the chat loads |
data-theme | light / dark / auto | Colour scheme (default auto — follows the visitor's system) |
data-position | bottom-right / bottom-left | Which corner the button sits in (default bottom-right) |
data-width / data-height | pixels | Size of the open chat panel (defaults 400 × 620) |
data-lang | en, ru, … | Force the widget UI language (default follows the browser) |
Visual settings like greeting, colour, and avatar are managed in the console — see Appearance & content.
Allowed domains & security
The widget key is public — it sits in the page's script tag — so the protection is the domain allow-list:
- Set the sites where the widget may run in Web channel → Allowed domains (e.g.
example.com,*.example.com). - The widget and the lead capture form work only on those domains; requests from other sites are rejected.
- You can rotate the key any time if it's ever misused — the old
<script>then stops working until updated.
For high-traffic public forms, add your own spam protection (such as a captcha) on top.
Need help? Write to support@flutch.ai or use the support chat in the console.