---
schema_version: "1"
id: f32e97a548121f4375941ba391d1cd7766386a08443759482e7f9e74c2321081
title: Configure an Enhanced Web Chat Deployment in an Experience Builder or Commerce Cloud Site
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/service/264-0-0/miaw_deployment_experience_builder.md
canonical_url: https://help.salesforce.com/s/articleView?id=service.miaw_deployment_experience_builder.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 1e0bc6bb234b19238c2fb75d9d3c1600889d4f12b4a128f173aec5e56686a542
description: Use the Embedded Messaging component to add Enhanced Web Chat to your Experience Builder or Commerce Cloud site.
products:
  - Service Cloud
  - Digital Engagement
release: "264"
---
# 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

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition">
      <colgroup>
        <col style="width:50%">
        <col style="width:50%">
      </colgroup>
      <tbody>
        <tr class="">
          <td class="slds-cell-wrap" colspan="2" style="vertical-align:top;"><a href="https://help.salesforce.com/s/articleView?id=service.messaging_editions.htm&amp;type=5&amp;language=en_US" target="_blank">View supported editions.</a></td>

        </tr>
        <tr class="">
          <td class="slds-cell-wrap" style="vertical-align:top;">
            <a name="miaw_deployment_experience_builder__d578e1065"><!-- --></a><span style="vertical-align:text-bottom;display:inline-block;"><img style="margin-bottom:0;" id="miaw_deployment_experience_builder__d578e1065" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-service-support_channels-264-0-0-production-enus/f3c4b3d2-ff86-4f7c-9fe2-3d8b23d35109/resources-global/_corporate/images/checkmark.png" alt="Checkmark"></span>
            <strong>This article applies to:</strong>
          </td>

          <td class="slds-cell-wrap" style="vertical-align:top;">Enhanced Web Chat channels</td>

        </tr>
        <tr class="">
          <td class="slds-cell-wrap" style="vertical-align:top;">
            <span style="vertical-align:text-bottom;display:inline-block;"><img style="margin-bottom:0;" src="https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-service-support_channels-264-0-0-production-enus/f3c4b3d2-ff86-4f7c-9fe2-3d8b23d35109/resources-global/_corporate/images/crossmark.png" alt="X icon"></span>
            <strong>This article doesn’t apply to:</strong>
          </td>

          <td class="slds-cell-wrap" style="vertical-align:top;">Enhanced In-App Chat, Enhanced WhatsApp, Enhanced Facebook Messenger, Standard
            and Enhanced SMS, Enhanced Apple Messages for Business, Enhanced LINE, and Bring Your
            Own Channel</td>

        </tr>
      </tbody>
    </table> <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
      <colgroup>
        <col style="width:50%">
        <col style="width:50%">
      </colgroup>
      <thead class="slds-text-title_caps ">
        <tr class="">
          <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d117755e96">User Permissions</th>
        </tr>
      </thead>
      <tbody>
        <tr class="">
          <td data-label="User Permissions" class="slds-cell-wrap" style="vertical-align:top;" headers="d117755e96 ">To set up this feature:</td>

          <td class="slds-cell-wrap" style="vertical-align:top;" headers="d117755e96 ">
            <p>Customize Application </p>
            <p style="margin-bottom:0;">AND Modify Metadata Through Metadata API Functions</p>
          </td>

        </tr>
        <tr class="">
          <td data-label="User Permissions" class="slds-cell-wrap" style="vertical-align:top;" headers="d117755e96 ">To modify permission sets and profiles:</td>

          <td class="slds-cell-wrap" style="vertical-align:top;" headers="d117755e96 ">Manage Profiles and Permission Sets</td>

        </tr>
        <tr class="">
          <td data-label="User Permissions" class="slds-cell-wrap" style="vertical-align:top;" headers="d117755e96 ">To add the Embedded Messaging component to an Experience Builder site:</td>

          <td class="slds-cell-wrap" style="vertical-align:top;" headers="d117755e96 ">Create and Setup Experiences</td>

        </tr>
      </tbody>
    </table>

Note these 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.
- If you use a custom URL for your Experience Builder site, customize your Embedded Service Deployment site's URL domain so that it matches your Experience Builder site's URL domain. You can review your sites' URLs on the All Sites Setup page. See [Add a Custom URL](https://help.salesforce.com/s/articleView?id=platform.custom_url_add.htm&type=5&language=en_US).
- The only supported way to add Enhanced Chat to an Experience Builder site is with drag and drop.

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. [Set up Enhanced Chat](https://help.salesforce.com/s/articleView?id=service.miaw_setup_stages.htm&release=264.0.0&type=5 "Understand the three stages of setting up Enhanced Chat v1 or v2. We recommend following them in order for a smooth experience.").
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: <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col style="width:50%">
              <col style="width:50%">
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d117755e229">Property</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d117755e232">Details</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d117755e229 ">Embedded Web Deployment</td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d117755e232 ">Select your Embedded Service Deployment for Enhanced Web Chat.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d117755e229 ">Enhanced Service URL</td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d117755e232 ">Select the URL from your Enhanced Web Chat setup, which matches the
                  <code>scrt2</code> field in your code snippet.
                </td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d117755e229 ">Site Endpoint</td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d117755e232 ">Select the site endpoint, which matches the site endpoint on the Embedded
                  Service Deployment Settings page for your deployment.</td>

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d117755e229 ">Chat Button Visibility</td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d117755e232 ">
                  <p>Default Visibility means that the chat button is shown by default or
                    according to your business hours.</p>
                  <p>Always Visible overrides your existing visibility settings and makes sure
                    that the chat button is always shown on page load.</p>
                  <p style="margin-bottom:0;">Always Hidden overrides your existing visibility settings and makes sure that
                    the chat button is always hidden on page load.</p>
                </td>

              </tr>
            </tbody>
          </table>

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 you notice an issue with the \*.live-preview domain, add that to the CORS allowlist.

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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-service-support_channels-264-0-0-production-enus/f3c4b3d2-ff86-4f7c-9fe2-3d8b23d35109/support_channels/images/miaw/miaw_experience_builder_advanced.png)

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

![Head markup](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-service-support_channels-264-0-0-production-enus/f3c4b3d2-ff86-4f7c-9fe2-3d8b23d35109/support_channels/images/miaw/miaw_experience_builder_header_markup.png)

- **[Run Custom Components as the Logged-In User in Enhanced Web Chat](https://help.salesforce.com/s/articleView?id=service.miaw_custom_component_user_context.htm&release=264.0.0&type=5)**  
    When you add a custom Lightning web component to your embedded service deployment, it runs as an unauthenticated guest user in the chat window, even when a user is logged in to your Experience Cloud site. To run the component as a logged-in site user instead, add the user's profile or permission set to the Embedded Service site's member list. Running the component as the logged-in user gives the custom component access to read and act on the user's data.

#### See Also

- [Enhanced Web Chat Developer Guide](https://developer.salesforce.com/docs/service/messaging-web/guide/introduction.html)