<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="lib/script.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Salesfroce Embedded Service Demo (MIAW) </h1>
<div class="row">
<div class="col align-self-center">
<button class="btn btn-light" onclick="showButton()">Show Chat</button>
<button class="btn btn-danger" onclick="hideButton()">Hide Chat</button>
<button class="btn btn-success" onclick="launchChat()">Launch Chat</button>
</div>
</div>
<div>
<script type='text/javascript' src='https://nbalachand-231213-720-demo.my.site.com/ESWplnkr1702511340228/assets/js/bootstrap.min.js' onload='initEmbeddedMessaging()'></script>
</body>
</html>
/* Add your styles here */
.container{
width: 100vw;
margin: auto;
padding: auto;
}
/* Try sothing like this */
/* .embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton div[class="embeddedMessagingIconContainer"] > svg.embeddedMessagingIconChat {
visibility: hidden;
}
.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton {
background-image: url(https://images.publicstorage.com/Branding/logo-brand-crop.png?width=60&height=100) !important;
} */
[lwc-64un2jbuqj8-host] {
background-color: red !important;
}
// Add your code here
function initEmbeddedMessaging() {
try {
console.log("Load", embeddedservice_bootstrap);
embeddedservice_bootstrap.settings.language = 'en_US';
embeddedservice_bootstrap.settings.hideChatButtonOnLoad = true;
embeddedservice_bootstrap.init(
'00DHp000003UOhX',
'plnkr',
'https://nbalachand-231213-720-demo.my.site.com/ESWplnkr1702511340228',
{
scrt2URL: 'https://nbalachand-231213-720-demo.my.salesforce-scrt.com'
}
);
} catch (err) {
console.error('Error loading Embedded Messaging: ', err);
}
};
function showButton(){
console.log("show", embeddedservice_bootstrap);
embeddedservice_bootstrap.utilAPI.showChatButton();
}
function hideButton(){
console.log("hide", embeddedservice_bootstrap);
embeddedservice_bootstrap.utilAPI.hideChatButton();
}
function launchChat(){
embeddedservice_bootstrap.utilAPI
.launchChat()
.then(function (success) {
// Add actions to run after the chat client launches successfully.
})
.catch(function (error) {
onsole.log(error);
})
.finally(function () {
// Add actions to run whether the chat client launches
// successfully or not.
});
}