React Integration

Integrate VueBot into your React application.

Installation

First, install VueBot via npm:

npm install @vuedapt/vuebot

Basic Usage

Import and use the VueBotWidget component:

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

function App() {
  return (
    <div>
      <VueBotWidget
        config={{
          apiKey: 'vb_your_api_key_here',
        }}
      />
      {/* Your app content */}
    </div>
  );
}

export default App;

With Configuration

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

function App() {
  return (
    <div>
      <VueBotWidget
        config={{
          apiKey: 'vb_your_api_key_here',
          apiBaseUrl: 'https://vuebot-api.vuedapt.com',
          position: 'bottom-right',
          primaryColor: '#00a6f4',
          botName: 'AI Assistant',
          greetingMessage: 'Hello! How can I help?',
        }}
      />
      {/* Your app content */}
    </div>
  );
}

TypeScript Support

VueBot includes full TypeScript definitions:

import VueBotWidget, { VueBotConfig } from '@vuedapt/vuebot';
import '@vuedapt/vuebot/dist/vuebot-widget.css';

const config: VueBotConfig = {
  apiKey: 'vb_your_api_key_here',
  position: 'bottom-right',
  primaryColor: '#00a6f4',
};

function App() {
  return (
    <div>
      <VueBotWidget config={config} />
    </div>
  );
}