Internal demo · n8n chat widget
Embed a chat, themed in one line.
This page embeds the widget exactly the way a third-party site would:
one <script> tag, all theming via
data-* attributes. Open the launcher in the
bottom-right corner to talk to the demo bot.
Embed snippet
<script src="https://YOUR-GATEWAY.example/widget/loader.js"
data-title="Your bot"
data-subtitle="Powered by n8n"
data-welcome="Hi! How can I help?"
data-avatar="https://YOUR-GATEWAY.example/avatar.png"
data-color="#4f46e5"
data-position="right"
data-width="380"
data-height="600"></script>
Replace YOUR-GATEWAY.example with your gateway's public
origin. The loader injects its own iframe and launcher — no host-page
CSS or JS required.
Configuration (data-attributes)
| Attribute | Purpose | Default |
|---|---|---|
data-title | Window title of the widget | — |
data-subtitle | Shown under the title | — |
data-welcome | Initial bot message | — |
data-avatar | Profile picture shown at the top-left of the chat header (initials if not set) | — |
data-color | Primary accent (hex) | #4f46e5 |
data-position | Launcher side: left | right | right |
data-width | Window width in px (desktop only) | 380 |
data-height | Window height in px (desktop only) | 600 |
The widget is live on this page — click the round launcher in the
bottom-right corner (indigo = data-color applied).