Internal demo
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://chat.visibleya.mx/widget/loader.js"
data-title="Your bot"
data-subtitle="Asistente virtual"
data-welcome="Hi! How can I help?"
data-bubble="Quiero una pagina web|Quiero un chatbot|¿Cuánto cuesta?"
data-avatar="https://chat.visibleya.mx/avatar.png"
data-color="#4f46e5"
data-position="right"
data-width="380"
data-height="600"></script>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-bubble | Optional predefined questions shown as clickable bubbles above the input; clicking one sends its text as the user's message. At most 8 items, each at most 200 characters; empty or over-long items are dropped. Items are separated by the pipe character (|), which cannot appear inside a label. | — |
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).