Quick Start | VueBot

Using CDN (Vanilla HTML)

The fastest way to get started is using the CDN. Just include the CSS and JavaScript files:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" href="https://unpkg.com/@vuedapt/vuebot@latest/dist/vuebot-widget.css">
</head>
<body>
  <!-- Your website content -->
  
  <!-- VueBot Widget -->
  <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>

Using React

For React applications, import the component and CSS:

import { useEffect } from 'react';
import VueBotWidget from '@vuedapt/vuebot';
import '@vuedapt/vuebot/dist/vuebot-widget.css'; // Required for styles

function App() {
  return (
    <div>
      <VueBotWidget
        config={{
          apiKey: 'vb_your_api_key_here',
          apiBaseUrl: 'https://vuebot-api.vuedapt.com',
        }}
      />
      <div>Your app content</div>
    </div>
  );
}

export default App;

Using Next.js

For Next.js applications, import in your page or layout:

'use client';

import VueBotWidget from '@vuedapt/vuebot';
import '@vuedapt/vuebot/dist/vuebot-widget.css';

export default function Page() {
  return (
    <div>
      <VueBotWidget
        config={{
          apiKey: 'vb_your_api_key_here',
          apiBaseUrl: 'https://vuebot-api.vuedapt.com',
        }}
      />
      {/* Your page content */}
    </div>
  );
}

Tip

Replace vb_your_api_key_here with your actual API key from vuebot-client.vuedapt.com

Configuration Options

VueBot supports many configuration options. Here are the most common ones:

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

Next Steps

Now that you have VueBot running, check out the Configuration and Customization guides to learn more about customizing your chatbot.