Sounds & accessibility
The widget ships with a notification sound and built-in accessibility support so it works for keyboard and screen-reader users out of the box.
Notification sound
Turn the chime on or off with the Sound Notifications toggle in Dashboard → Widget → Behavior. When enabled, the widget plays a short two-tone notification chime as a new message arrives. The sound is generated in the browser with the Web Audio API — there is no audio file to host, and it fails silently if the browser blocks audio (for example, before the visitor has interacted with the page).
The toggle is the only sound setting; the chime itself is fixed and not separately configurable.
🖼️ [Image] — The Behavior section with the Sound Notifications toggle.
Keyboard navigation
The widget is operable without a mouse:
- Enter in the message box sends the message; Shift+Enter inserts a new line.
- All controls — the chat bubble, header buttons (close, expand, escalate), quick replies, carousel arrows, and the View details links on product cards — are real focusable buttons and links, so they are reachable with Tab and activatable with Enter / Space.
ARIA roles and labels
The chat is built to be announced correctly by screen readers:
- The chat bubble, header buttons, and carousel arrows carry descriptive s (for example "Close chat", "Scroll left", "Expand chat").text
aria-label - The message list uses , so incoming bot and agent messages are read out as they arrive.text
aria-live="polite" - The typing indicator is labeled (for example "Bot is typing"), and decorative elements such as avatars and status dots are marked so they are skipped.text
aria-hidden - Product images include descriptive text from the product name.text
alt
Focus rings
Interactive elements show a visible focus outline on keyboard focus (
:focus-visibleResponsive and motion
The widget is fully responsive and reflows on mobile (see Product card layouts for how cards adapt). Animations are kept subtle — short transitions on the bubble and a gentle pulse — so the interface stays calm and unobtrusive.
🎬 [Video] — Navigating the widget entirely by keyboard: opening it, sending a message, and tabbing through product cards.