Embed the Widget
Add your bot to any website with a single <script> tag - no framework required.
Haven't created and trained a bot yet? Start with Create a Chat Widget for the full walkthrough - this page assumes you already have a Bot ID.
The widget renders as native vector HTML/SVG elements inside an isolated Shadow DOM container, guaranteeing 100% razor-sharp typography and icons at any zoom level with complete CSS isolation from host styles.
Get your embed code
- Open the Chatty dashboard
- Select your bot in the sidebar
- Go to Embed & Integrate - pick your platform there for a ready-to-paste snippet and step-by-step instructions
- Copy the snippet
<script
src="https://chatty.personaliai.com/widget.js"
data-id="YOUR_BOT_ID"
defer
></script>That's it. A floating launcher button appears in the bottom-right corner of every page, and opens the assistant in an embedded chat panel.
The script tag must use data-id, not data-bot-id - the widget loader looks for data-id
specifically and won't work if that attribute is named anything else.
YOUR_BOT_ID in the Embed & Integrate tab of your dashboard.Configuration attributes
All of these are optional - when omitted, the widget uses whatever you've configured in the dashboard's Customizer tab, and updates automatically if you change it there later (no need to re-embed).
| Attribute | Default | Description |
|---|---|---|
data-id | - | Required. Your bot's unique ID. |
data-color | Bot's saved color | Override the launcher button color (hex, e.g. #6366f1). Only affects the button itself, not the chat panel's theme. |
data-style | Bot's saved style | Override the widget's visual style preset. |
data-position | "right" | Which corner the launcher sits in: right or left. |
data-mobile-fullscreen | "true" | Set to "false" to keep the desktop floating-panel layout on mobile instead of going fullscreen. |
data-teaser | "true" | Set to "false" to disable the proactive greeting bubble that appears after a few seconds. |
data-sound | "true" | Set to "false" to disable the notification chime on new replies. |
<script
src="https://chatty.personaliai.com/widget.js"
data-id="a1b2c3d4-e5f6-7890-abcd-ef1234567890"
data-position="left"
data-color="#6366f1"
data-mobile-fullscreen="false"
data-teaser="false"
data-sound="false"
defer
></script>Voice messages
Visitors can tap the mic icon in the composer to record a voice message. What happens next is controlled per-bot from the dashboard's Customizer → Voice Messages setting:
- Transcribe & send as text (default) - the recording is transcribed and the text is placed in the input box for the visitor to review and edit before sending.
- Send as audio message - the recording itself is sent, and renders as a playable voice-message bubble (play/pause, waveform, duration) styled to match the bot's design.
Recording requires microphone access. If you're using the inline iframe embed
instead of the script tag, make sure its allow attribute includes microphone (see the example
below) - the script-tag embed doesn't need this since it isn't an iframe.
Voice calls
If Voice Agent is enabled for the bot (dashboard sidebar → Voice Agent), a phone icon appears in the widget header. Tapping it opens a live, full-duplex spoken conversation with the bot right inside the widget - a real-time transcript, mic level meter, and mute/hang-up controls - with no extra embed code or configuration needed. It works the same way in every embed method on this page (script tag, iframe, WordPress, mobile SDKs).
This is a live voice call (LiveKit-powered), distinct from the voice messages setting above (a visitor recording and sending a single audio clip). Both can be enabled at once - voice messages happen inline in text chat, voice calls replace the chat view for the call's duration.
JavaScript API
Once the widget has loaded, control it programmatically via window.Chatty:
window.Chatty.open() // open the chat panel
window.Chatty.close() // close it
window.Chatty.toggle() // toggle open/closed