Embed Chat Assistant

Complete step-by-step instructions for embedding the chatbot into your existing website with open, close, and destroy buttons.

Step 1: Add the Container Div

Add this div element anywhere in your html page inside body

<div id="chatbot-container"></div>

Step 2: Copy and Paste This Snippet

Copy the following code snippet and paste it just before the closing </body> tag in your HTML:

<script type="module">
  import { initChatbot } from 'YOUR_CDN_URL/vueChat.js';
  
  let chatbotInstance = null;
  
  async function initializeChatbot() {
    try {
      chatbotInstance = await initChatbot('chatbot-container', {
        userApiKey: 'YOUR_API_KEY',
        authMap: {
          userIdKey: 'YOUR_USER_ID_KEY', // chat scans localstorage or cookie for the userID
        },
        theme: 'YOUR_THEME', // optional
      });
      
      console.log('Chatbot initialized successfully!');
    } catch (error) {
      console.error('Failed to initialize chatbot:', error);
    }
  }

  // Below action handlers can be handled differently in your app based on your app code structure and where the buttons are placed

  window.addEventListener('DOMContentLoaded', async () => {
    await initializeChatbot();
    
    const openBtn = document.getElementById('openBtn');
    const closeBtn = document.getElementById('closeBtn');
    const destroyBtn = document.getElementById('destroyBtn');
    
    if (openBtn) {
      openBtn.addEventListener('click', () => {
        if (chatbotInstance) chatbotInstance.open();
      });
    }
    
    if (closeBtn) {
      closeBtn.addEventListener('click', () => {
        if (chatbotInstance) chatbotInstance.close();
      });
    }
    
    if (destroyBtn) {
      destroyBtn.addEventListener('click', () => {
        if (chatbotInstance) {
          chatbotInstance.destroy();
          chatbotInstance = null;
        }
      });
    }
  });
  
  window.addEventListener('beforeunload', () => {
    if (chatbotInstance) chatbotInstance.destroy();
  });
</script>

The chatbotInstance exposes 3 methods: open(), close(), and destroy(), which allow you to control the chatbot widget programmatically.

Replace These Placeholders

After pasting the snippet, replace the following placeholders with your actual values:

Optional: Add Control Buttons (Example)

If you want control buttons, add these anywhere in your HTML (near the container div):

<div>
  <button id="openBtn">Open Chat</button>
  <button id="closeBtn">Close Chat</button>
  <button id="destroyBtn">Destroy Chat</button>
</div>

That's it! Your chatbot should now be working. Refresh your page to see it.