Chat Window design is configuration plus CSS plus testing. Each layer affects conversion and customer experience.
- Configure the Embedded Service deployment
Setup, Embedded Service Deployments. Configure branding (colours, logo, agent photo), pre-chat form fields, and proactive prompt rules.
- Keep the pre-chat form short
Three or four fields maximum. Each additional field drops conversion. Collect what is needed for routing; ask for the rest after the conversation starts.
- Apply brand-aligned CSS
Use CSS overrides to match the Chat Window to the parent site's branding. Fonts, button styles, and colour accents should feel like a natural extension of the site.
- Test on real mobile devices
Render the window on iPhone and Android. Confirm typing, file upload, and scrolling work correctly. Browser developer tools approximate mobile but miss real-device defects.
- Iterate on proactive prompt rules
Configure proactive prompts on high-intent pages (checkout, pricing) and avoid them on browse pages. Tune based on conversion data over the first month.
- Heavy pre-chat forms drop conversion. Keep forms to three or four fields; collect the rest after the chat starts.
- Branding mismatches between the parent site and the Chat Window erode trust. Apply CSS overrides to align.
- Mobile-broken Chat Windows lock out large customer cohorts. Test on real devices.
- Aggressive proactive prompts on browse pages feel intrusive. Tune trigger rules to high-intent contexts only.