Inline Mode in Enhanced Chat v2

Enhanced Chat v2 supports two display modes: floating and inline.

Floating (default mode): Floating mode represents a chat client that appears when the user clicks the Floating Action Button (FAB) located in the bottom-right corner of the screen.
Inline: Inline mode renders the chat client directly within a specified target <div> element on the parent page. This mode allows the chat interface to appear seamlessly within your site’s layout. Inline mode fills the entirety of the target element. Optionally, the chat header can be toggled on or off in inline mode.

Inline mode is only available for Enhanced Chat v2 deployments. For more information, see What’s Enhanced Chat v2?.

Note

For detailed setup steps on Enhanced Chat APIs, see Get Started with APIs for Enhanced Chat.

Enable Inline Mode

From Setup, in the Quick Find box, enter Embedded Service Deployments, and select Embedded Service Deployments.
Click Code Snippet.
Add the code snippet to your web page where you will host the chat client.
Update displayMode and disable the header if desired:

1embeddedservice_bootstrap.settings.displayMode = 'inline';
2embeddedservice_bootstrap.settings.headerEnabled = false; // Optional

Specify the target element where the chat client will be embedded:

1const myElement = document.querySelector('.chat-container');
2embeddedservice_bootstrap.settings.targetElement = myElement;

For other Enhanced Chat snippet settings, see the settings object reference.

Note

Configuration Troubleshooting

ECv2 validates your display mode and target element configuration. You may see console warnings if inline or floating modes are not configured correctly.

Inline Mode Without Custom Target Element

If you receive a console warning that reads displayMode is set to "inline" but targetElement is using the default (document.body). This will embed the chat into the entire page body, you can use the example code to specify a custom container.

1const myElement = document.querySelector('.chat-container');
2embeddedservice_bootstrap.settings.targetElement = myElement;
3embeddedservice_bootstrap.settings.displayMode = 'inline';

Floating Mode With Custom Target

If you receive a console warning that reads targetElement is set to a custom element but displayMode is not set to "inline". In floating mode, the chat button will float within the specified container, there are two potential solutions.

Fully embed the chat by setting the mode to inline: embeddedservice_bootstrap.settings.displayMode = 'inline';.
Allow the chat to float in the default location by removing the custom targetElement setting.