Widget
The widget is the only part of Promptly your visitors ever see. Everything else — knowledge, catalog, models, escalation — reaches them through this one small window in the corner of your site.
Two screens cover it: Dashboard → Widget for how it looks and behaves, and Dashboard → Widget → Install for getting it onto your pages.
🖼️ [Image] — The chat widget open on a live site, showing a bot reply with product cards.
In this section
- Customizing the widget — style presets, colors and palettes, logo and bot name, welcome message, position, quick replies, and the live preview. Also what you can't change, so you don't go hunting.
- Embedding the widget — the embed snippet and what each attribute does, where to paste it, the domain allow-list, the JavaScript API for opening the chat from your own buttons, and what to check when the launcher doesn't appear.
- Product card layouts — Vertical, Carousel, or Grid, how the layout reflows on mobile and in expanded mode, and the anatomy of a card.
- Sounds & accessibility — the notification chime, keyboard operation, what screen readers announce, and the accessibility gaps stated plainly.
- React & SPA integration — a mount/unmount component for React, Vue, and Angular apps, for showing the widget only to signed-in users.
Three things that trip people up
- The master switch isn't in the customizer. It's Dashboard → Settings → Widget enabled. With that off, the widget won't load however carefully you've styled it.
- The domain allow-list is not optional in practice. A widget on an unapproved origin looks exactly like a broken widget. Add your domains — including
localhostwhile you develop — on the Install page. See Origin guard & rate limiting. - A workspace with no working AI key shows an unavailability panel, not a chat. Replies run on your own provider key, so that's the first thing to check when the widget loads but won't answer. See Troubleshooting keys.
It won't clash with your site
The widget renders inside a Shadow DOM host with the conversation in an isolated iframe. Your CSS can't leak in and its styles can't leak out, so it looks the same on a Tailwind site, a WordPress theme, or a stylesheet nobody has touched in a decade. The script is loaded async and the host element doesn't intercept clicks, so it costs your page nothing.