Below is the example for how a bubble would be added to your chat instance:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Beeetle</title>
</head>
<body>
<script type="module">
import BeeetleBot from "https://cdn.jsdelivr.net/npm/beeetle-chatbot-js@1.0.17/lib/web.js";
BeeetleBot.initBubble({
apiHost: 'https://beeetle-api.host.com/api/chat',
autoShowDelay: undefined,
brandColor: undefined,
isPreview: undefined,
beeetleBot: undefined,
onAnswer: undefined,
onClose: undefined,
onEnd: undefined,
onInit: undefined,
onNewInputBlock: undefined,
onOpen: undefined,
onPreviewMessageClick: undefined,
prefilledVariables: undefined,
previewMessage: undefined,
resultId: undefined,
theme: {
button: {
backgroundColor: undefined,
customCloseIconSrc: undefined,
customIconSrc: undefined,
iconColor: undefined,
size: undefined,
},
chatWindow: {
backgroundColor: undefined,
maxHeight: undefined,
maxWidth: undefined,
},
placement: undefined,
previewMessage: {
backgroundColor: undefined,
closeButtonBackgroundColor: undefined,
closeButtonIconColor: undefined,
textColor: undefined,
},
},
});
</script>
</body>
</html>This code is creating a bubble button widget at the bottom of your page.