---
schema_version: "1"
id: 62c8b932b2c736b48224bf9839156e07f089ae93317541ed555e566d9760abaa
title: Embedded Messaging
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/rss_embedded_messaging.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.rss_embedded_messaging.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 4be6be05b48626ba079536ed55c780e829d8f18e03f43c1ef2174a4425ed8e13
description: Use the Embedded Messaging component to add Messaging for Web to your Experience Cloud site.
products:
  - Experiences
release: "264"
---
# Embedded Messaging

Use the Embedded Messaging component to add Messaging for Web to your Experience Cloud site.

Note the following considerations before you begin.

- 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, Messaging for Web 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.
- In Mobile Publisher apps, the mobile floating action button launches a native Agentforce panel through the Embedded Messaging component. For Mobile Publisher apps, this behavior replaces the web-based Messaging for Web mobile flow.

1. Complete these setup steps for [Messaging for Web](https://help.salesforce.com/s/articleView?id=service.miaw_setup_stages.htm&type=5&language=en_US).
2. For Experience Builder sites, from the Experience Builder Components list, select the **Embedded Messaging** component and drag it onto the page that has the Experience Builder site as the host domain value.
3. From the Experience Builder Components list, select the **Embedded Messaging** component and drag it onto the page that has the Experience Builder site as the host domain value.
4. On the page, select the **Embedded Messaging** component.
5. In the property editor, configure the 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="d28386e98">Property</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d28386e101">Details</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d28386e98 ">Embedded Web Deployment</td>

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

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

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

              </tr>
              <tr class="">
                <td data-label="Property" class="slds-cell-wrap" style="vertical-align:top;" headers="d28386e98 ">Mobile Deployment</td>

                <td data-label="Details" class="slds-cell-wrap" style="vertical-align:top;" headers="d28386e101 ">
                  <p>Select the Mobile Deployment where this component is displayed. All mobile
                    deployments are available for selection. If the selected mobile deployment’s
                    messaging channel doesn’t match the web deployment’s channel, a validation
                    error appears.</p>
                  <p>To turn off the native Agentforce experience and use the Lightning component
                    instead, select <strong class="uicontrol">Null</strong> for the mobile deployment.</p>
                  <ul>
                    <li>The floating action button opens a native Agentforce panel.</li>

                    <li>If user verification is enabled on the messaging channel, the button is
                      hidden for guest users.</li>

                  </ul>
                </td>

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

After publishing your site, the conversation and active messaging button appears on your site. Experience Builder helps you design the experience but is nonfunctional.

The component uses your default site language unless you enable a new language in Translation Workbench.

Make sure to return to the [messaging for web deployment configuration](https://help.salesforce.com/s/articleView?id=miaw_configure_web_deployment_1.htm&language=en_US) instructions and complete the CORS allowlist step.

![Important](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_important.png)

Important

- Place the component only in a template footer region. Adding to a non-template region can cause disruption in the messaging experience.
- A Mobile Publisher app supports an Agentforce agent in either guest mode or authenticated mode, but not both. A user can’t switch between guest and verified states, because only one deployment menu is available in Experience Builder.

To adjust the position of the mobile floating action button—for example, to clear the tab bar—override the CSS custom properties. In Experience Builder, go to **Settings** | **Advanced** | **Edit Head Markup**, and then adjust the values as needed.

```
<style>
  :root {
    --mp-fab-bottom: 80px;  /* Adjust this value to clear the tab bar */
    --mp-fab-right: 24px;   /* Default is 24px */
  }
</style>
```

#### See Also

- [Set Up Enhanced Chat](https://help.salesforce.com/s/articleView?id=service.miaw_setup_stages.htm&type=5&language=en_US)
- [Configure a Messaging for Web Deployment](https://help.salesforce.com/s/articleView?id=service.miaw_configure_web_deployment_1.htm&type=5&language=en_US)
- [Add Flexibility and Power with Enhanced Chat](https://help.salesforce.com/s/articleView?id=service.miaw_intro_landing.htm&type=5&language=en_US)