Beeetle-chatbot-js NPM

Beeetle

Use Directly in your HTML

Bubble

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.

@unocss/reset @vueuse/core ai highlight.js lucide-vue-next marked marked-highlight radix-vue vue vue3-emoji-picker

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago