It work’s locally on my system but how can I make it work in WordPress. It doesn’t even show up in WordPress might be because of overlapping
<html lang="en">
<head>
<style>
@keyframes slideInRight {
from {
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
button.chatLauncher {
animation-duration: 0.5s;
transition-duration: 0.5s;
position: fixed;
bottom: 32px;
right: 32px;
z-index: 9999;
border: 4px solid #981f25;
padding: 1em;
border-radius: 8px;
margin: 0;
text-decoration: none;
background-color: #ffffff;
color: #454545;
font-family: sans-serif;
font-size: 1rem;
cursor: pointer;
text-align: left;
-webkit-appearance: none;
-moz-appearance: none;
width: 264px;
opacity: 0;
}
button.chatLauncher.open {
animation-name: slideInRight;
opacity: 1;
}
button.chatLauncher:hover,
button.chatLauncher:focus {
background-color: rgb(225, 225, 254);
border: 4px solid #0053ba;
}
button.chatLauncher:focus {
outline: 1px solid #0053ba;
outline-offset: -4px;
}
</style>
</head>
<body>
<!-- We want to hide this element initially, because web chat isn't ready yet. -->
<button type="button" class="chatLauncher" style="display:none;">
<div>
Metal Roof Virtual Assistant.
</div>
<div>
<strong>Powered By NextGen</strong>
</div>
</button>
<script>
window.watsonAssistantChatOptions = {
integrationID: "5689411d-538c-44c2-87c5-f7dd2bc156be", // The ID of this integration.
region: "us-south", // The region your integration is hosted in.
serviceInstanceID: "f6c21fcb-341c-4546-aa96-1587230b3fec", // The ID of your service instance.
showLauncher: false,
onLoad: function(instance) {
// Select the button element from the page.
const button = document.querySelector('.chatLauncher');
// Add the event listener to open your web chat.
button.addEventListener('click', function clickListener() {
instance.openWindow();
});
// Render the web chat. Nothing appears on the page, because the launcher is
// hidden and the web chat window is closed by default.
instance.render().then(function() {
// Now that web chat has been rendered (but is still closed), we make the
// custom launcher button visible.
button.style.display = 'block';
button.classList.add('open');
});
}
};
setTimeout(function(){const t=document.createElement('script');t.src="https://web-chat.global.assistant.watson.appdomain.cloud/versions/" + (window.watsonAssistantChatOptions.clientVersion || 'latest') + "/WatsonAssistantChatEntry.js";document.head.appendChild(t);});
</script>
</body>
</html>