You are here:
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.
- Complete these setup steps for Messaging for Web.
- 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.
- 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.
- On the page, select the Embedded Messaging component.
-
In the property editor, configure the properties for the component:
Property Details Embedded Web Deployment Choose your Embedded Service Deployment for Messaging for Web. 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.
Mobile Deployment 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.
To turn off the native Agentforce experience and use the Lightning component instead, select Null for the mobile deployment.
- The floating action button opens a native Agentforce panel.
- If user verification is enabled on the messaging channel, the button is hidden for guest users.
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 instructions and complete the CORS allowlist step.
- 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 , 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>