Loading
Salesforce now sends email only from verified domains. Read More
Agentforce Contact Center
Table of Contents
Select Filters

          No results
          No results
          Here are some search tips

          Check the spelling of your keywords.
          Use more general search terms.
          Select fewer filters to broaden your search.

          Search all of Salesforce Help
          Configure an Enhanced Web Chat Deployment in an Experience Builder or Commerce Cloud site

          Configure an Enhanced Web Chat Deployment in an Experience Builder or Commerce Cloud site

          Use the Embedded Messaging component to add Enhanced Web Chat to your Experience Builder or Commerce Cloud site.

          Required Editions

          View supported editions.
          Checkmark This article applies to: Enhanced Web Chat channels
          X icon This article doesn’t apply to: Enhanced In-App Chat, Enhanced WhatsApp, Standard and Enhanced Facebook Messenger, Standard and Enhanced SMS, Enhanced Apple Messages for Business, Enhanced LINE, and Bring Your Own Channel
          User Permissions
          To set up this feature:

          Customize Application

          AND Modify Metadata Through Metadata API Functions

          To modify permission sets and profiles: Manage Profiles and Permission Sets
          To add the Embedded Messaging component to an Experience Builder site: Create and Setup Experiences

          Note the following considerations before you begin.

          • We support the following Experience Builder templates: Build Your Own (Aura), Customer Account Portal, Partner Central, Help Center, Customer Service, Build Your Own (LWR), and Microsite (LWR).
          • We support the following Commerce Cloud templates: B2B Commerce (LWR), B2C Commerce (LWR), and B2B Commerce (Aura).
          • Enhanced Chat is supported in Lightning Web Runtime (LWR).
          • If you use the Embedded Service or Channel Menu components on your Experience Builder site, remove them. Use the Page Structure panel to find and remove the extra components.
          • To effectively iFrame your website and reduce JavaScript library conflicts, Enhanced Web Chat creates a unique site that appears in your All Sites list in Setup. Don’t reuse this generated site URL, which has reduced security, for other purposes. Don’t modify this generated site through Builder or Workspace links.
          • There's only one supported way to add Enhanced Chat to an Experience Site: Use drag and drop according to the steps here. Other methods aren't supported.

          In this stage of Enhanced Web Chat setup, you’ll:

          1. Publish a deployment in your Experience Builder or Commerce Cloud site.
          2. Set security protocols for your deployment.
          3. Learn where to add additional code when using the Enhanced Web Chat JavaScript API.

          Publish Your Enhanced Web Chat Deployment in an Experience Builder Site

          1. Complete these steps to set up Enhanced Chat.
          2. From the Experience Builder Components list, select the Embedded Messaging component and drag it onto the footer of the Experience Builder or Commerce Cloud site template.
          3. On the page, click to highlight the Embedded Messaging component.
          4. In the property editor, configure properties for the component:
            PropertyDetails
            Embedded Web Deployment Choose your Embedded Service Deployment for Enhanced Web Chat.
            Enhanced Service URL Select the URL from your Enhanced Web Chat setup, which matches the scrt2 field in your code snippet.
            Site Endpoint Select the site endpoint, which matches the site endpoint on the Embedded Service Deployment Settings page for your deployment.
            Chat Button Visibility

            Default Visibility means that the chat button is shown by default or according to any business hours that are configured.

            Always Visible overrides your existing visibility settings and ensures that the chat button is always shown on page load.

            Always Hidden overrides your existing visibility settings and ensures that the chat button is always hidden on page load.

          After publishing your site, the conversation and active messaging button appears on your site.

          Set Security Protocols for Your Enhanced Web Chat Deployment

          After completing setup, add your Experience Builder site domain to your CORS allowlist. If notice an issue with the *.live-preview domain, add that to the CORS allow list.

          1. To confirm your site domain, from Setup, enter Digital Experiences in the Quick Find box, and then select Settings. Copy the URL from the Domain section.
          2. From Setup, enter CORS in the Quick Find box, and then select CORS.
          3. Select New.
          4. Enter an origin URL pattern.
          5. Save your work.

          Learn Where to Add Enhanced Web Chat Code

          When working with developers on your site, place any additional Enhanced Web Chat code in the head markup section. You can find this area from the Advanced tab of the Experience Builder Settings.

          Advanced section

          Click Edit Head Markup and then add your JavaScript code within a <script> tag.

          Head markup

           
          Loading
          Salesforce Help | Article