Vanilla HTML Integration

CDN Installation

Include VueBot via CDN in your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  
  <!-- VueBot CSS -->
  <link rel="stylesheet" href="https://unpkg.com/@vuedapt/vuebot@latest/dist/vuebot-widget.css">
</head>
<body>
  <!-- Your website content -->
  <h1>Welcome to My Website</h1>
  <p>Your content here...</p>
  
  <!-- VueBot JavaScript -->
  <script src="https://unpkg.com/@vuedapt/vuebot@latest/dist/vuebot-widget.standalone.js"></script>
  <script>
    window.VueBot.init({
      apiKey: 'vb_your_api_key_here',
      apiBaseUrl: 'https://vuebot-api.vuedapt.com',
    });
  </script>
</body>
</html>

With Configuration

<script>
  window.VueBot.init({
    apiKey: 'vb_your_api_key_here',
    apiBaseUrl: 'https://vuebot-api.vuedapt.com',
    position: 'bottom-right',
    primaryColor: '#00a6f4',
    secondaryColor: '#00bcff',
    botName: 'AI Assistant',
    botAvatar: 'https://example.com/avatar.jpg',
    greetingMessage: 'Hello! How can I help you today?',
  });
</script>

Initialization on Page Load

If you need to initialize VueBot after the page loads:

<script>
  window.addEventListener('load', function() {
    if (window.VueBot && window.VueBot.init) {
      window.VueBot.init({
        apiKey: 'vb_your_api_key_here',
      });
    }
  });
</script>