Embed the Widget
Add your bot to any website with a single <script> tag — no framework required.
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>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/closedThis is the full API surface today — there's no window.Chatty.on(...) event system yet. If you
need to react to messages or leads programmatically (e.g. push them into your own analytics), use
webhooks instead, which push those events to your backend server-side.