Want to proactively engage visitors on your Experience Cloud site? One effective way is to automatically open the Salesforce Messaging for Web chat window as soon as the page loads. This can help guide users, offer immediate support, and improve overall engagement.

This post will show you how to use a simple Javascript snippet in your Experience Cloud site’s Head Markup to achieve this.

The Core Idea: embeddedservice_bootstrap.utilAPI.launchChat()

Salesforce provides a handy Javascript API for interacting with the embedded messaging service. The key function we’ll use is embeddedservice_bootstrap.utilAPI.launchChat(). As the name suggests, this function programmatically opens the chat window.

However, we can’t just call this function randomly. We need to ensure the embedded messaging components, specifically the chat button, are fully loaded and ready before we try to launch the chat. That’s where event listeners come in.

Implementation: Adding the Script to Head Markup

To get this working, you’ll need to add the following script to your Experience Cloud site’s Head Markup. You can typically find this in Experience Builder > Settings > Advanced > Edit Head Markup.

<script>
    
    window.addEventListener(
        "onEmbeddedMessagingButtonCreated", () => {
            console.log(
                'Inside Button Created'
            );
            embeddedservice_bootstrap.utilAPI.launchChat()
            .then( () => {
                console.log(
                    'Inside then block'
                );
            } ).catch( () => {
                console.log(
                    'Inside catch block'
                );
            } ).finally( () => {
                console.log(
                    'Inside finally block'
                );
            } );
        }
    );
    
</script>

Code Breakdown

Let’s break down what this script does:

1. window.addEventListener("onEmbeddedMessagingButtonCreated", () => { ... });
   • This is the crucial part. We’re listening for a specific event: onEmbeddedMessagingButtonCreated.
   • This event fires only after the Salesforce embedded messaging button has been successfully created and rendered on the page. Listening for this event ensures we don’t try to open the chat window before it’s actually available, which would lead to errors.
2. console.log('Inside Button Created - Chat button is ready!');
   • This line (and other console.log statements) are for debugging purposes. They help you see the flow of execution in your browser’s developer console. You can remove them in a production environment if desired.
3. embeddedservice_bootstrap.utilAPI.launchChat()
   • This is the command that actually tells Salesforce to open the chat window.
   • This function returns a Promise. Promises are used for asynchronous operations, meaning the chat launch might take a moment, and the rest of your script won’t necessarily wait for it to complete before moving on unless you tell it to.
4. .then(() => { console.log('Chat launched successfully!'); })
   • The .then() block is executed if the launchChat() function successfully initiates the chat window opening.
5. .catch((error) => { console.error('Error launching chat:', error); })
   • The .catch() block is executed if an error occurs during the launchChat() attempt. It’s good practice to include error handling to understand if something goes wrong.
6. .finally(() => { console.log('Launch chat attempt finished.'); })
   • The .finally() block is executed regardless of whether the chat launch was successful or resulted in an error. It’s useful for any cleanup or final logging actions.

Key Considerations & Best Practices ✨

• User Experience (UX): While auto-launching chat can be proactive, consider if it might be intrusive for some users. For certain use cases, it’s perfect. For others, you might want to trigger it based on other user actions (e.g., clicking a custom button, spending a certain amount of time on a page, or scrolling to a specific section).
• Testing: Thoroughly test this functionality across different devices and browsers to ensure a consistent experience. Also, test scenarios where chat might be unavailable (e.g., no agents online) to see how it behaves.
• Debugging: Use your browser’s developer console (usually accessible by pressing F12) to monitor the console.log messages and troubleshoot any issues.
• Alternatives: If you don’t want the chat to open on every page load site-wide, you could place this script (or a variation) within a specific LWC component that’s only added to certain pages, or use audience targeting to load the script conditionally.

Conclusion

By adding this Javascript snippet to your Experience Cloud site’s Head Markup, you can easily configure your Salesforce Messaging for Web chat window to launch automatically when a page loads. This simple yet effective technique can significantly enhance user engagement and provide timely support to your visitors.

Remember to always consider the user experience and test thoroughly! Happy coding!