You are here:
Add Your Embedded Chat to a Website
Salesforce generates a unique Embedded Service code snippet from the information you provide during setup. Copy and paste the code snippet to include chat on your web pages. Add the optional meta tag code snippet to improve performance for both mobile and desktop.
Required Editions
| View supported editions. |
| User Permissions Needed | |
|---|---|
| To set up Embedded Chat: | Customize Application AND Modify Metadata |
Legacy Chat will be retired on February 14, 2026. To avoid service interruptions to your end users, switch to enhanced Chat (formerly Messaging for In-App and Web). Enhanced Chat offers many of the legacy Chat features that you love plus asynchronous conversations that can be picked back up at any time. Learn about migrating in Help and Trailhead.
Before you start, make sure you have access to the company’s web pages. After adding the code snippet, customers can see and use the chat window. If you’re not ready for them to access chat, include the code snippet on a private web page first. Avoid modifying the code snippet, which impacts how chat is loaded and whether conversations continue as users navigate from page to page.
Here are the steps to add your code snippet:
- From Setup, enter Embedded Service in the Quick Find box, then select Embedded Service.
- Select the Embedded Service deployment that you want to work with by clicking the arrow beside the deployment name and selecting View.
- In the Embedded Service configuration page, go to the Embedded Service code snippets section and click Get Code.
-
Copy the chat code snippet and paste it immediately above the closing
</body>tag on your web page, adding Embedded Chat to the page.Paste the chat code snippet into every web page where you want the chat window to appear. Don’t place your code snippet in a header or on the same web page as a Chat button. Optionally, customize the chat code snippet. -
Optionally, copy and paste the meta code snippet into the
<meta>tag head section in every web page where you want the chat window to appear. -
Click Done.
The code snippets page closes.
The <meta> tag code makes your web page responsive, so the
chat window look good and performs well on different devices. For example, if a customer
views your web page and chat window on a mobile phone, both are resized.
If there are issues with behavior on other devices, update your
<meta> tag to the code snippet that’s provided. This tag is added
to the head section of every page where the chat window is used. If you don’t include an
appropriate <meta> tag, the chat window appears as it does on a
desktop, regardless of the user’s device used to access the page.
If you’re adding your Chat window to a Visualforce page, include these attributes on
your apex:page tag to keep styling consistent with your web
pages:
<apex:page showheader="false" sidebar="false" standardStylesheets="false">- Customize the Embedded Service Code Snippet
Use a text or HTML editor to customize the optional parameters in the Embedded Service code snippet. - Add Your Website to the CORS Allowlist
Add the URLs of the web pages where you intend to add the chat window to the CORS allowlist in your org. The web page where you add the chat window is the page that customers use to access chat.
