Copy Kode HTML lalu pasang ke blogmu. Pastekan di head atau footer.
<style>
.botbot-chat-widget {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
.botbot-chat-widget *, .botbot-chat-widget *::before, .botbot-chat-widget *::after {
box-sizing: border-box;
}
.botbot-chat-widget.show .chat-content {
display: block;
}
.botbot-chat-widget.show .msg-button {
background: #f3f3f3;
}
.botbot-chat-widget .msg-button {
width: 60px;
height: 60px;
border-radius: 50%;
display: block;
border: 0;
box-shadow: 0 2px 3px #ddd, 2px 0 3px #ddd;
cursor: pointer;
outline: none;
border: 0.5px solid #ddd;
background: white;
}
.botbot-chat-widget .msg-button img {
max-width: 100%;
}
.botbot-chat-widget .msg-button:hover {
opacity: 0.9;
}
.botbot-chat-widget .chat-content {
display: none;
position: absolute;
bottom: calc(100% + 20px);
right: 0;
box-shadow: 0 4px 5px #ddd;
background: white;
}
.botbot-chat-widget .chat-content iframe {
width: 500px;
height: 520px;
border: 0;
}
</style>
<div style="position: relative;" >
<div class="botbot-chat-widget">
<div class="chat-content"></div>
<button class="msg-button" onclick="handleToggleChatWidget();" data-botbot-url="https://bingchat.jawaraspeed.com/web/#/">
<img src="https://static.wikia.nocookie.net/logopedia/images/d/d9/Bing_Chat_2023.svg" alt="">
Chat AI</button>
</div>
</div>
<script id="rendered-js" >
(function (win) {
win.handleToggleChatWidget = function handleToggleChatWidget() {
var chatWidget = document.querySelector('.botbot-chat-widget');
var chatWidgetContent = chatWidget.querySelector('.chat-content');
var button = chatWidget.querySelector('.msg-button');
var iframe = document.getElementById('botbot-iframe');
var expanded = chatWidget.getAttribute('aria-expanded');
var botbotUrl = button.getAttribute('data-botbot-url');
if (expanded === 'true') {
chatWidget.classList.remove('show');
chatWidget.setAttribute('aria-expanded', false);
} else {
if (!iframe) {
iframe = document.createElement('iframe');
iframe.setAttribute('id', 'botbot-iframe');
iframe.setAttribute('src', botbotUrl);
iframe.setAttribute('allowfullscreen', 'true');
chatWidgetContent.appendChild(iframe);
}
chatWidget.classList.add('show');
chatWidget.setAttribute('aria-expanded', true);
}
};
})(window);
</script>