embeddedservice_bootstrap.utilAPI.launchChat() can be used to launch Salesforce Messaging for In-App and Web on a button click from the Experience Cloud Site.

In the Experience Cloud Markup, we will add an event listener to launch the Salesforce Messaging for In-App and Web.

Code for the Experience Cloud Markup:

<script type = 'text/javascript'>
    
	document.addEventListener(
		'launchMIAWChatEvent', function( e ) {
		launchChat();
	} );

	function launchChat() {
        
		console.log(
			'Inside Launch'
		);
		embeddedservice_bootstrap.utilAPI.launchChat()
		.then( () => {
			console.log(
				'Inside then block'
			);
		} ).catch( () => {
			console.log(
				'Inside catch block'
			);
		} ).finally( () => {
			console.log(
				'Inside finally block'
			);
		} );
        
	} 
    
</script>

We will pass the event to the Experience Cloud Site Markup from the Lightning Web Component on click of a button.

Sample Lightning Web Component for Button Click:

HTML:

<template>
    <lightning-card>
        <lightning-button 
            label="Launch Chat" 
            onclick={handleClick} 
            class="slds-m-left_x-small">
        </lightning-button>
    </lightning-card>
</template>

JavaScript:

import { LightningElement } from 'lwc';

export default class MessagingChatComponent extends LightningElement {

    handleClick() {
        
        console.log(
            'Inside the handleClick()'
        );
        document.dispatchEvent(
            new CustomEvent(
                "launchMIAWChatEvent"
            )
        );

    }
    
}

js-meta.xml:

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

Output: