embeddedservice_bootstrap.settings.hideChatButtonOnLoad = true; can be used to hide the Salesforce Messaging for In-App and Web chat icon when the Page loads.
embeddedservice_bootstrap.utilAPI.launchChat() can be used to launch the Salesforce Messaging for In-App and Web Chat Widget.
Sample HTML Code:
<html>
<script type='text/javascript'>
function initEmbeddedMessaging() {
try {
embeddedservice_bootstrap.settings.language = 'en_US'; // For example, enter 'en' or 'en-US'
//Hiding Chat Button on page load
embeddedservice_bootstrap.settings.hideChatButtonOnLoad = true;
embeddedservice_bootstrap.init(
<!-- Please use your Snippet Code -->
);
} catch (err) {
console.error('Error loading Embedded Messaging: ', err);
}
};
</script>
<script type='text/javascript' src='<Please use the JS URL from your Snippet Code >' onload='initEmbeddedMessaging()'></script>
<div style="position: fixed; bottom: 35px; right: 35px; border-radius: 40px; background: #801818; cursor: pointer; color: white">
<div onclick="launchChat()">
<img
src="<Please use your image>"
style="border-radius: 50%; float:left; margin: 5px;"
height="50px"
width="50px"/>
<h3 style="float:right;">Hi, How can I help you?</h3>
</div>
</div>
<script>
function launchChat() {
embeddedservice_bootstrap.utilAPI.launchChat()
.then(() => {
console.log(
'Successfully launched Messaging'
);
}).catch(() => {
console.log(
'Some error occurred when launching Messaging'
);
}).finally(() => {
console.log(
'Successfully launched Messaging - Finally'
);
});
}
</script>
</html>
Output: