Your finish line: a visitor on the site sends a message, an available agent receives and answers it, and the conversation survives a refresh.
- src: /images/visual-lessons/audit-chat-designer.png
caption: Live demo screen: Chat Designer, Save and Embed Code. The displayed conversation is a designer preview, not a verified visitor-to-agent exchange.1. Prepare the site and agent
Use a preview/test site and a second browser session for a fictional visitor. Sign in as the staff member who will answer. Confirm both sessions target the same organization; an embedded widget and an agent in different organizations cannot form a useful test.
2. Configure the widget
Open the chat designer from the available chat/CRM tools. The registered Studio route is /app/chat-designer. Select or create the chat configuration, review its greeting, appearance and behavior, and Save it. Record its configuration/Chat ID. Do not confuse chat mode, which supports live conversation, with qa mode.
3. Get the embed code
Open Embed Code. The current designer has Select App Credential and generated HTML/React options with Copy Code. Use the code generated for the intended organization, configuration and embedding app. The documented loader expects the organization and chat configuration plus the appropriate app identity. Never substitute an administrative account token for a public embedding credential.
4. Add it to the website
Add the generated markup/scripts to the site’s supported custom-code or page integration surface. For a custom HTML site, the reference shows a stylesheet, container, initialization callback and loader script. Keep the IDs from your actual configuration; do not copy sample IDs as real values.
Load the rendered page and verify the widget appears. If it does not, inspect loading errors, the organization/configuration IDs and the actual public page—not only the editor canvas.
5. Make an agent available
Open the live chat desk or header Chat control. Set the agent’s presence/availability to accept work. Being signed in does not by itself prove the agent is available. Keep the staff session open while testing the visitor flow.
6. Test both sides
- In the separate visitor session, open the widget and complete its displayed visitor entry if requested.
- Send a test message. Check the waiting queue or active conversation on the agent side.
- Accept the conversation and reply. Verify the visitor receives it.
- Refresh and check the history. If you test handoff, verify the second agent actually receives the conversation.
- Repeat with the agent unavailable so you understand the configured queue/fallback experience.
Why a visible chat bubble is not enough
The bubble proves only that a UI loaded. A complete test covers visitor identity, the correct chat configuration, agent availability, message delivery and persisted conversation history.
Common problems
| Symptom | Inspect |
|---|---|
| No widget | Loader/stylesheet request, organization and configuration IDs, rendered page markup |
| Visitor waits forever | Agent availability, queue and the selected organization |
| Wrong greeting or styling | Which configuration the embed actually loads |
| Staff does not receive a message | Live connection errors and the actual queue/desk |
| Works on desktop but not mobile | Mobile connection, app availability and the signed-in account |
Evidence: documentation and designer implementation reviewed; a new visitor-to-agent delivery test is still required. Embed reference · Agent desk · Mobile inbox and calls.