How to implement Salesforce Enhanced Chat v2 Inline Mode?

HomeMagulan Duraipandian

How to implement Salesforce Enhanced Chat v2 Inline Mode?

Magulan Duraipandian

Mastering Inline Mode in Salesforce Enhanced Chat v2

As Salesforce continues to push the boundaries of customer engagement with Messaging for Web (Enhanced Chat v2), developers and architects are looking for ways to move beyond the traditional “floating bubble” UI.

One of the most powerful features for creating a native user experience is Inline Mode. This guide explores how to implement it, why it matters for UX, and the technical configurations required to get it running.

What is Inline Mode?

Unlike the standard pop-up or “minimized” chat window that floats in the bottom corner of a browser, Inline Mode allows the Salesforce chat client to render directly inside a specific container (a <div>) on your web page.

Instead of an overlay, the chat interface becomes a structural part of your site’s layout. This is particularly useful for:

  • Dedicated “Contact Us” pages.
  • Help Center sidebars.
  • Member portals where chat should feel like a built-in feature.

Implementation: The Technical Setup

To switch from the default floating mode to Inline mode, you need to modify your embeddedservice_bootstrap configuration.

1. Define the Display Mode

By default, the system assumes a floating UI. You must explicitly set the displayMode to inline. This tells the Salesforce framework to look for a parent container rather than anchoring to the viewport.

embeddedservice_bootstrap.settings.displayMode = 'inline';

2. Configure the Header (Optional)

In many Inline implementations, the website already has a header or title for the section. To avoid visual clutter, you can toggle the Salesforce-provided header on or off.

embeddedservice_bootstrap.settings.headerEnabled = false;

Key Benefits for the Technical Persona

FeatureTechnical Impact
Seamless IntegrationFills 100% of the target <div>, respecting parent CSS constraints.
DOM ControlAllows developers to control the placement within the page hierarchy.
UX ConsistencyRemoves the “widget” feel and makes Chat look like a native application component.

Sample Code

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
        <title>Inline Chat</title>
        <style>
            * { margin: 0; padding: 0; box-sizing: border-box; }
            body {
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #f0f0f0;
                font-family: sans-serif;
            }
            #chat-container {
                width: 400px;
                height: 600px;
                border: 2px solid #ccc;
                background: #fff;
                position: relative;
            }
        </style>
    </head>
    <body>
    <div id="chat-container"></div>
    
    <script type='text/javascript'>
    function initEmbeddedMessaging() {
        try {
            embeddedservice_bootstrap.settings.language = 'en_US';
            embeddedservice_bootstrap.settings.displayMode = 'inline';
            embeddedservice_bootstrap.settings.targetElement = document.getElementById('chat-container');
            
            embeddedservice_bootstrap.init(
                '<Org Id>',
                '<Your Embedded Service Deployment API Name>',
                'https://<Your Site URL>/ESWMessagingforInAppa1736797486907',
                {
                    scrt2URL: 'https://<Your Domain>.my.salesforce-scrt.com'
                }
            );
        } catch (err) {
            console.error('Error loading Embedded Messaging:', err);
        }
    }
    </script>
    <script type='text/javascript' src='<URL>/assets/js/bootstrap.min.js' onload='initEmbeddedMessaging()'></script>
    </body>
</html>

Output

Salesforce Article:

https://developer.salesforce.com/docs/einstein/genai/guide/enhanced-chat-inline-mode.html

Leave a Reply