Next.js Integration

Installation

First, install VueBot via npm:

npm install @vuedapt/vuebot

App Router (Next.js 13+)

For Next.js 13+ with the App Router, use the 'use client' directive:

'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',
        }}
      />
      {/* Your page content */}
    </div>
  );
}

Layout Integration

Add VueBot to your root layout to make it available on all pages:

'use client';

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

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

Environment Variables

Store your API key in environment variables for security:

# .env.local
NEXT_PUBLIC_VUEBOT_API_KEY=vb_your_api_key_here

Pages Router (Next.js 12 and below)

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

export default function Home() {
  return (
    <div>
      <VueBotWidget
        config={{
          apiKey: process.env.NEXT_PUBLIC_VUEBOT_API_KEY,
        }}
      />
      {/* Your page content */}
    </div>
  );
}