---

Salesforce Enhanced Chat v2 Inline Mode: A Developer’s Guide for Experience Cloud

Category: Salesforce Development, Experience Cloud, Lightning Web Components

Target Audience: Architects, Developers, Admins

Reading Time: 5 Minutes

If you are a Salesforce Architect or Developer working with Experience Cloud, you likely know that the default modal or “pop-up” chat window isn’t always the best user experience. Sometimes, you need the chat to live directly within the page layout—embedded seamlessly alongside other content. This is where Enhanced Chat v2 Inline Mode shines.

In this technical guide, we will walk through how to implement Salesforce Enhanced Chat v2 Inline Mode using a custom Lightning Web Component (LWC). This approach gives you full control over the placement and styling of the chat window, ensuring a cohesive interface for your users.

---

Why Inline Mode?

Standard chat widgets often float at the bottom right of the screen. While functional, they can cover important UI elements. Inline Mode allows you to:

• Embed the conversation interface directly into a specific <div> on your page.
• Control the dimensions and responsiveness of the chat area.
• Create distinct “Support” or “Concierge” pages where the chat is the focal point.

---

Technical Implementation: The Lightning Web Component

To achieve this, we will create a custom LWC. This component acts as the host container for the Embedded Messaging service.

Below is the complete code breakdown. We are targeting apiVersion 65.0 and ensuring the component is exposed for Experience Cloud pages.

1. HTML Template (inlineChatContainer.html)

The HTML is minimal. We simply need a container element where the chat iframe will be injected.

<template>
    <div class="chat-container">
    </div>
</template>

2. CSS Styling (inlineChatContainer.css)

The CSS defines the dimensions and behavior of the container. Note that display: inline requires defined height and width to render correctly.

/* Main container for the chat interface */
.chat-container {
    /* Layout and Sizing */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 550px;
    
    /* Spacing and Alignment */
    margin: 20px auto; /* Combined top/bottom 20px and centered horizontally */
    padding: 10px;
    
    /* Aesthetics and Borders */
    background-color: #f5f5f5;
    border: 1px solid black;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    
    /* Behavior */
    overflow: auto;
}

3. JavaScript Controller (inlineChatContainer.js)

This is the engine of the component. We use the renderedCallback() lifecycle hook to load the Salesforce bootstrap script. Crucially, we set window.embeddedservice_bootstrap.settings.displayMode to 'inline' and target our specific DOM element.

import { LightningElement } from 'lwc';

export default class InlineChatContainer extends LightningElement {
    // Flag to prevent the script from being loaded multiple times
    scriptLoaded = false;

    /**
     * Standard LWC lifecycle hook that fires after the component has finished rendering.
     */
    renderedCallback() {
        // Exit if the script has already been initialized
        if (this.scriptLoaded) {
            return;
        }
        this.scriptLoaded = true;

        /**
         * Define the initialization function for the Embedded Messaging service.
         * This is called once the external bootstrap script has loaded.
         */
        window.initEmbeddedMessaging = () => {
            try {
                // Select the container element from the shadow DOM
                const chatElement = this.template.querySelector('.chat-container');

                if (!chatElement) {
                    console.error('chat-container not found in template');
                    return;
                }

                // Configuration settings for the Salesforce Embedded Messaging service
                window.embeddedservice_bootstrap.settings.language = 'en_US';
                window.embeddedservice_bootstrap.settings.displayMode = 'inline';
                window.embeddedservice_bootstrap.settings.targetElement = chatElement;

                // Initialize the messaging service with Org and Deployment IDs
                window.embeddedservice_bootstrap.init(
                    '<Your Salesforce Org Id>',
                    '<Your Embedded Service Deployment API Name>',
                    '<Your Site URL>',
                    {
                        scrt2URL: '<Your Salesforce Org SCRT URL>'
                    }
                );
            } catch (err) {
                console.error('Error loading Embedded Messaging: ', JSON.stringify(err));
            }
        };

        // Create and inject the external bootstrap script tag
        const script = document.createElement('script');
        script.src = '<Your Site URL>/assets/js/bootstrap.min.js';
        script.type = 'text/javascript';
        script.defer = true;
        
        // Link the script's onload event to our initialization function
        script.onload = window.initEmbeddedMessaging;

        // Append the script to the document body to trigger the download
        document.body.appendChild(script);
    }
}

4. Configuration File (inlineChatContainer.js-meta.xml)

We must expose this component to the lightningCommunity__Page target so it can be dragged and dropped onto an Experience Cloud site via the Builder.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>65.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
</LightningComponentBundle>

---

Conclusion

Integrating Enhanced Chat v2 in inline mode offers a sophisticated way to present support options to your customers. By wrapping the standard Salesforce Embedded Messaging in a Lightning Web Component, you gain the flexibility to place the conversation exactly where it drives the most value.

Happy Coding!!!

---