Implement a Custom Chat Window Using Visualforce

Chat windows are what visitors use to exchange messages with support agents. Each of your Chat deployments includes a chat window. You can create a customized chat window by using Visualforce, and you can add styling and functionality with HTML, CSS, and JavaScript.

The legacy chat product is scheduled for retirement on February 14, 2026, and is in maintenance mode until then. During this phase, you can continue to use chat, but we no longer recommend that you implement new chat channels. To avoid service interruptions to your customers, migrate to Messaging for In-App and Web before that date. Messaging offers many of the chat features that you love plus asynchronous conversations that can be picked back up at any time. Learn about chat retirement in Help.

Important

Einstein Bots doesn’t support menus and quick replies in custom Chat windows. To learn more about Einstein Bots Chat channel specifications, see Deploy Your Bot to Channels.

Avoid linking to Salesforce CSS stylesheets when you customize your chat window. They aren’t versioned and can change without notice. Instead, we recommend that you use Visualforce components that mimic Salesforce styles instead of directly referencing the stylesheets. That way, you’re always in control of how your chat window looks. See Using Styles from Salesforce Stylesheets to lean how to disable our stylesheets.

For more information on using Visualforce, see the Visualforce Developer Guide.

Chat Visualforce Components

Use Visualforce components to customize the appearance and behavior of chat windows.
Chat Visualforce Components Code Sample

Use this code sample to test and preview how Visualforce components can help you customize your chat windows.