---
schema_version: "1"
id: 87cb1892cdf177df1d1cd9e078193ffd6521003c43d169756de63af06a421268
title: Configure an Enhanced Web Chat Deployment
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/service/264-0-0/miaw_configure_web_deployment_1.md
canonical_url: https://help.salesforce.com/s/articleView?id=service.miaw_configure_web_deployment_1.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 277d0532a57a2bbddccbb76bd83c08b2951d47f724fc21c50418469c11f793a6
description: Connect your messaging channel to a website with a new embedded deployment. Create and customize your deployment, add it to your site, and set up security.
products:
  - Service Cloud
  - Digital Engagement
release: "264"
---
# Configure an Enhanced Web Chat Deployment

Connect your messaging channel to a website with a new embedded deployment. Create and customize your deployment, add it to your site, and set up security.

### 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_configure_web_deployment_1__d1007e1065"><!-- --></a><span style="vertical-align:text-bottom;display:inline-block;"><img style="margin-bottom:0;" id="miaw_configure_web_deployment_1__d1007e1065" 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="d70060e102">User Permissions</th>
            </tr>
          </thead>
          <tbody>
            <tr class="">
              <td data-label="User Permissions" class="slds-cell-wrap" style="vertical-align:top;" headers="d70060e102 ">To set up this feature:</td>

              <td class="slds-cell-wrap" style="vertical-align:top;" headers="d70060e102 ">
                <p>Customize Application </p>
                <p>AND</p>
                <p style="margin-bottom:0;">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="d70060e102 ">To modify permission sets and profiles:</td>

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

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

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

1. Publish a deployment (if adding an additional Enhanced Chat deployment to a pre-existing Enhanced Chat channel).
2. Customize a deployment.
3. Add the deployment to your website.
4. Set security protocols for your deployment.

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

Note Steps 3 and 4 depend on the type of site you add messaging to. [Experience Builder and Commerce Cloud sites](https://help.salesforce.com/s/articleView?id=service.miaw_deployment_experience_builder.htm&release=264.0.0&type=5 "Use the Embedded Messaging component to add Enhanced Web Chat to your Experience Builder or Commerce Cloud site.") have a unique set of instructions that differ from external websites. Choose the correct set of instructions for your use case.

## Publish a Deployment

If you just created your first Enhanced Chat channel and deployment in the quick start flow, and you’re ready to customize that deployment, skip the Publish a Deployment section. If you’re adding an additional deployment to a pre-existing Enhanced Chat channel, take these steps to establish it.

For mobile, see [Configure a Mobile Deployment](https://help.salesforce.com/s/articleView?id=service.miaw_deployment_mobile.htm&type=5&language=en_US).

1. [Enable digital experiences](https://help.salesforce.com/s/articleView?id=experience.networks_enable.htm&type=5&language=en_US) in your org.
2. From Setup, in the Quick Find box, enter Embedded Service Deployments, and select **Embedded Service Deployments**.
3. Click the **New Deployment** button. Choose your conversation type, **Enhanced Chat**.
4. Select **Web** as the deployment destination for your channel.
5. **Name** your Embedded Service deployment, which creates the **API Name**.
    
    ![New embedded service deployment setup window with name, api name, domain and messaging channel filled out.](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_new_deployment.png)
6. Enter the top level **Domain** name of the website, such as example.com. This name covers any subdomains of the URL, such as help.example.com. For an [Experience Builder or Commerce Cloud site](https://help.salesforce.com/s/articleView?id=service.miaw_deployment_experience_builder.htm&release=264.0.0&type=5 "Use the Embedded Messaging component to add Enhanced Web Chat to your Experience Builder or Commerce Cloud site.") deployment, go to **Domains** in Setup, and copy the Experience Cloud Site Domain.
    1. To change the domain that’s associated with your embedded service deployment, go to **Setup** | **User Interface** | **Sites and Domains** | **Sites**, and select your site from the Site Label column. Your site is formatted as ESW\_\[deploymentname\]\_\[numbers\]. Under Trusted Domains for Inline Frames, find the domain or subdomain that you want to change, and click **Edit**. Save your changes.
7. Select the **Messaging Channel** you created in Messaging Settings and add to the deployment. If you haven’t created a channel, go to Messaging Settings.
8. Save your work.
9. Create and publish your new deployment, which takes a few minutes. Don’t navigate away from the page until it’s complete.
10. To ensure that Enhanced Chat continues to work optimally, always republish your deployment after testing newly added features.

## Customize Your Deployment

Mission control for your customer experience is the Embedded Service Deployment Settings page. Edit your messaging settings, select branding, add pre-chat values, and copy your code snippet to deliver conversations to your website.

After you create or edit a deployment, you must publish it again by clicking the Publish button on the settings page.

![Deployment Settings page.](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_deployment_settings.png)

Optionally customize the following aspects of your deployment in Embedded Service Deployment Settings:

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col style="width:33.33333333333333%">
              <col style="width:33.33333333333333%">
              <col style="width:33.33333333333333%">
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d70060e377">Customization Section</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d70060e380">What’s Possible</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d70060e383">Additional Work Required</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Customization Section" class="slds-cell-wrap" style="vertical-align:top;" headers="d70060e377 ">Settings</td>

                <td data-label="What’s Possible" class="slds-cell-wrap" style="vertical-align:top;" headers="d70060e380 ">Check boxes to show delivery and read receipts to customers in their messaging window.
                  Check a box to show typing indicators. Check a box to show the emoji keyboard to customers.
                  Check a box to change the default behavior of the Enter or Return key from sending a
                  messaging to starting a new line of text. To only display the messaging window during
                  business hours, select a business hours record.</td>

                <td data-label="Additional Work Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d70060e383 ">Before you add business hours to your deployment, <a href="https://help.salesforce.com/s/articleView?id=service.customize_supporthours.htm&amp;type=5&amp;language=en_US" target="_blank">create a business hours record</a>. To override business hours
                  and hide or show the chat button at specified times, use our API.</td>

              </tr>
              <tr class="">
                <td data-label="Customization Section" class="slds-cell-wrap" style="vertical-align:top;" headers="d70060e377 ">Branding</td>

                <td data-label="What’s Possible" class="slds-cell-wrap" style="vertical-align:top;" headers="d70060e380 ">Set colors and fonts (including custom fonts), and upload avatars, and chat
                  button image to match your branding in the customer-facing chat window. We recommend
                  using an avatar image that’s 40 x 40 pixels. You can also set the width and height
                  of your chat window. We don’t support adding custom CSS to your deployment. </td>

                <td data-label="Additional Work Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d70060e383 ">
                  <p>Avatar images are sourced from a web page. Generate the URL for each image.
                    To use a custom font, upload a .ttf, .otf, or .woff2 font file to Static
                    Resources. Give the font file a unique name and set the cache control to public.
                    In branding, select the custom font option and specify the name of the font file
                    that you uploaded as a static resource. </p>
                  <p style="margin-bottom:0;">For your chat button we recommend
                    using a circular or square image. If you're customizing the chat button on an
                    Experience Builder site, make sure to add the image’s domain to the CSP Trusted
                    URLs to ensure it renders correctly. See <a href="https://help.salesforce.com/s/articleView?id=experience.networks_security_csp_scriptlevel.htm&amp;type=5&amp;language=en_US" target="_blank">Select a Security Level in Experience Builder Sites</a></p>
                </td>

              </tr>
              <tr class="">
                <td data-label="Customization Section" class="slds-cell-wrap" style="vertical-align:top;" headers="d70060e377 ">Pre-Chat</td>

                <td data-label="What’s Possible" class="slds-cell-wrap" style="vertical-align:top;" headers="d70060e380 ">Select the standard and custom fields that customers must fill out before
                  messaging with a service rep. Add hidden pre-chat fields to collect information
                  automatically, behind the scenes.</td>

                <td data-label="Additional Work Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d70060e383 ">To add visible or hidden fields to your pre-chat form, create a custom
                  parameter on the messaging channel for the deployment. See <a href="https://help.salesforce.com/s/articleView?id=service.miaw_custom_prechat_3.htm&amp;language=en_US" target="_blank">Customize Pre-Chat for Enhanced
                    Chat</a>.</td>

              </tr>
              <tr class="">
                <td data-label="Customization Section" class="slds-cell-wrap" style="vertical-align:top;" headers="d70060e377 ">Custom Labels</td>

                <td data-label="What’s Possible" class="slds-cell-wrap" style="vertical-align:top;" headers="d70060e380 ">Write your own labels for fields and alt text in your messaging experience. Select the
                  language you want each label to appear in.</td>

                <td data-label="Additional Work Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d70060e383 ">Before you create custom labels, enable translation workbench, add your supported
                  language or languages, and assign your translators. See <a href="https://help.salesforce.com/s/articleView?id=platform.customize_wbench.htm&amp;type=5&amp;language=en_US" target="_blank">Enable Translation Workbench</a> and <a href="https://help.salesforce.com/s/articleView?id=platform.adding_and_editing_translated_languages.htm&amp;type=5&amp;language=en_US" target="_blank">Add Translated Languages and Translators</a>.</td>

              </tr>
              <tr class="">
                <td data-label="Customization Section" class="slds-cell-wrap" style="vertical-align:top;" headers="d70060e377 ">Code Snippet</td>

                <td data-label="What’s Possible" class="slds-cell-wrap" style="vertical-align:top;" headers="d70060e380 ">Copy the code snippet to add the messaging deployment to your website. Skip this
                  action if embedding messaging in an Experience Builder or Commerce Cloud site. See next
                  section to add messaging to your website.</td>

                <td data-label="Additional Work Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d70060e383 "><a href="https://help.salesforce.com/s/articleView?id=service.miaw_deployment_experience_builder.htm&amp;release=264.0.0&amp;type=5" title="Use the Embedded Messaging component to add Enhanced Web Chat to your Experience Builder or Commerce Cloud site.">Embed
                    Enhanced Chat in an Experience Builder or Commerce Cloud site</a> with the
                  Embedded Messaging component, not a code snippet. See next section to Add Enhanced
                  Chat to your external website.</td>

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

## Add Enhanced Chat to Your Website

If embedding Enhanced Chat on an external website, follow these steps to add your code snippet. If using an Experience Builder or Commerce Cloud site instead of a website, add Enhanced Chat via the Embedded Messaging component. You don’t need a code snippet to complete the task.

For more details, see [Configure an Enhanced Chat Deployment in an Experience Builder or Commerce Cloud Site](https://help.salesforce.com/s/articleView?id=service.miaw_deployment_experience_builder.htm&release=264.0.0&type=5 "Use the Embedded Messaging component to add Enhanced Web Chat to your Experience Builder or Commerce Cloud site.").

1. From Deployment Settings, select **Install Code Snippet**.
2. To select your code, click **Copy the Clipboard**.
3. Paste the code before the closing body tag `(</body>)` on each web page where you want the messaging button to appear. Don’t place the code in your header. Make sure you’ve added a valid [language code](https://help.salesforce.com/s/articleView?id=xcloud.faq_getstart_what_languages_does.htm&type=5&language=en_US) for your language setting in the snippet.
4. Enhanced Web Chat is compatible with most referrer policies, such as `origin`. When selecting your referrer policy, consider these caveats.
    1. Ensure that the header of the chat button page doesn’t contain a referrer policy of `no-referrer`. Specifically, the page must not include this line: `<meta name="referrer" content="no-referrer" />`.
    2. To ensure that Enhanced Web Chat works seamlessly in the Firefox browser, don't use a referrer policy of `same-origin`.
5. Optionally, include the Meta Tag Code Snippet in the head element to make your page responsive to all devices. If your page already has the meta tag, adding this snippet isn’t necessary. The code is the only one that goes in the header section of each web page where embedded messaging appears.

## Set Security Protocols for Your Deployment

After completing setup, add your domain to the CORS allowlist.

- If using an external website, add your CORS allowlist entries of URLs for the pages where you deploy messaging. The page you add is where customers access the messaging window. The origin URL pattern must include the HTTP or HTTPS protocol and a domain name. The wildcard character (\*) is supported and must be in front of a second-level domain name. For example, https://\*.example.com (https://%2A.example.com/) adds all subdomains of example.com (http://example.com/) to the allowlist.
- If using an Experience Builder or Commerce Cloud site, visit the instructions for adding security to that type of site [here](https://help.salesforce.com/s/articleView?id=service.miaw_deployment_experience_builder.htm&release=264.0.0&type=5 "Use the Embedded Messaging component to add Enhanced Web Chat to your Experience Builder or Commerce Cloud site.").

1. From Setup, enter CORS in the Quick Find box, and then select **CORS**.
2. Select **New**.
3. Enter an origin URL pattern.
4. Save your work.

#### See Also

- [Configure an Enhanced Web Chat Deployment in an Experience Builder or Commerce Cloud Site](https://help.salesforce.com/s/articleView?id=service.miaw_deployment_experience_builder.htm&release=264.0.0&type=5 "Use the Embedded Messaging component to add Enhanced Web Chat to your Experience Builder or Commerce Cloud site.")
- [Enhanced Chat FAQ](https://help.salesforce.com/s/articleView?id=service.miaw_faq.htm&release=264.0.0&type=5 "Review answers to commonly asked questions about Enhanced Chat, formerly Messaging for In-App and Web.")