Examples | VueBot

Basic Example

The simplest way to add VueBot to your website:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/@vuedapt/vuebot@latest/dist/vuebot-widget.css">
</head>
<body>
  <script src="https://unpkg.com/@vuedapt/vuebot@latest/dist/vuebot-widget.standalone.js"></script>
  <script>
    window.VueBot.init({
      apiKey: 'vb_your_api_key_here',
    });
  </script>
</body>
</html>

Customized Example

Example with custom colors and branding:

window.VueBot.init({
  apiKey: 'vb_your_api_key_here',
  position: 'bottom-left',
  primaryColor: '#6366f1',
  secondaryColor: '#8b5cf6',
  botName: 'Support Bot',
  botAvatar: 'https://example.com/avatar.png',
  greetingMessage: 'Hi! How can I help you today?',
});

React Example

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

function App() {
  return (
    <div>
      <VueBotWidget
        config={{
          apiKey: process.env.REACT_APP_VUEBOT_API_KEY,
          primaryColor: '#00a6f4',
        }}
      />
    </div>
  );
}

Next.js Example

'use client';

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

export default function Layout({ children }) {
  return (
    <html>
      <body>
        {children}
        <VueBotWidget
          config={{
            apiKey: process.env.NEXT_PUBLIC_VUEBOT_API_KEY,
          }}
        />
      </body>
    </html>
  );
}