<!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.
  });
}