Chat Window
The Chat Window is the customer-side UI of a Salesforce Chat conversation: the panel that opens when a website visitor clicks the embedded Chat button or accepts a proactive prompt.
Definition
The Chat Window is the customer-side UI of a Salesforce Chat conversation: the panel that opens when a website visitor clicks the embedded Chat button or accepts a proactive prompt. The window shows the running transcript, a typing area for the customer's messages, the agent's branding (logo, name, photo when configured), typing indicators, and any attached files or links. The Chat Window's visual design, behaviour, and content are configured through the Embedded Service deployment and inherit branding from the parent site.
The Chat Window matters because it is the moment of truth for the customer's chat experience. A slow-opening window, an ugly branding mismatch, or a confusing pre-chat form drops conversions before the customer even reaches an agent. A well-designed Chat Window opens fast, matches the brand, collects only the information the agent needs, and feels like a natural extension of the website. Salesforce ships a default Chat Window that works out of the box; mature deployments customise it heavily through CSS overrides, branding configurations, and pre-chat form design to fit the customer experience the brand wants to deliver.
How the Chat Window shapes customer experience
Chat Window invocation patterns
Customers open the Chat Window through three patterns: clicking the Chat Now button, accepting a proactive prompt (Need help with X?), or being directed by a page-level link. Each pattern has different conversion characteristics; proactive prompts perform best on high-intent pages like checkout but worst on browse-only pages where they feel intrusive.
Pre-chat form before the window opens
Most Chat Window flows include a pre-chat form that collects basic info (name, email, issue topic) before the conversation starts. The data routes the chat to the right agent skill and pre-populates context. Keep forms to three or four fields; more drops conversion before the chat starts.
Window branding and visual design
The Chat Window inherits branding through the Embedded Service deployment configuration. Brand colours, logo, agent photo, header text, and font choices all configurable. CSS overrides extend customisation further. Mature deployments invest in window design as part of the brand experience, not as an afterthought.
Live conversation features
Once connected, the Chat Window shows typing indicators (the agent is typing), read receipts, file uploads, links to Knowledge articles attached by the agent, and structured responses like Quick Replies when the agent uses them. Modern Chat Windows match the polish of consumer messaging apps.
Persistent versus transient windows
Some Chat Windows persist the conversation across page navigations and even across sessions (return-visit chat continues). Others reset every session. The choice depends on the use case: e-commerce typically wants persistence; one-off support questions can be transient.
Bot-fronted Chat Windows
When Agentforce or Einstein Bots fronts the chat, the Chat Window connects to the bot first. The visual experience is identical to chatting with a human agent (typing indicators, branding, structured responses); the customer often does not notice they are with a bot until the bot escalates or signs off. Mature bot deployments aim for this seamlessness intentionally.
Mobile responsive design
The Chat Window must render cleanly on mobile. Salesforce's default templates handle responsive design out of the box; custom CSS that breaks responsive behaviour is a common launch defect. Test on real mobile devices, not just browser developer tools.
Common pitfalls
Three patterns recur. Heavy pre-chat forms drop conversion before the chat starts. Branding mismatches between the parent site and the Chat Window erode trust. And mobile-broken windows leave large customer cohorts unable to use the channel. Each is addressable with deliberate design and testing on real devices.
How to design the Chat Window
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.
Trust & references
Cross-checked against the following references.
- Embedded Service for ChatSalesforce Help
- Salesforce ChatSalesforce Help
Straight from the source - Salesforce's reference material on Chat Window.
- Embedded Service OverviewSalesforce Help
About the Author
Dipojjal Chakrabarti is a B2C Solution Architect with 29 Salesforce certifications and over 13 years in the Salesforce ecosystem. He runs salesforcedictionary.com to help admins, developers, architects, and cert/interview candidates sharpen their fundamentals. More about Dipojjal.
Test your knowledge
Q1. What is a Chat Window?
Q2. What does an Embedded Service deployment configure?
Q3. Why use a pre-chat form?
Discussion
Loading discussion…