Next.js Integration

Add Dot to Your Next.js App

Integrate your AI chatbot with Next.js applications using our optimized Script component approach.

1

Set Environment Variables

Add your Dot configuration to your environment variables for secure and flexible deployment.

Secure configuration
Environment-specific settings
Easy deployment
2

Add Script Component

Use Next.js Script component with proper loading strategy for optimal performance.

Optimized loading
SSR compatible
TypeScript support

Environment Variables

# .env.local
NEXT_PUBLIC_DOT_ID=your-dot-id
NEXT_PUBLIC_DOT_POSITION=bottom-center
NEXT_PUBLIC_DOT_WELCOME_MESSAGE=Hi! How can I help you today?

App Router Integration

// app/layout.tsx
import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          id="dot-chatbot"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              window.DOT_CHATBOT = {
                dotId: process.env.NEXT_PUBLIC_DOT_ID,
                position: process.env.NEXT_PUBLIC_DOT_POSITION || 'bottom-center',
                welcomeMessage: process.env.NEXT_PUBLIC_DOT_WELCOME_MESSAGE || 'Hi! How can I help you today?',
                hints: ['How can I help you?', 'Ask me anything!']
              };
            `,
          }}
        />
        <Script
          src="https://cdn.d0t.my/dot.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Best Practices

Performance

Use strategy="afterInteractive" for optimal loading
Load script only on client-side
Avoid blocking initial page load

TypeScript

Add proper type definitions
Use environment variables for configuration
Enable strict type checking

Ready to integrate?

Follow the steps above to add Dot to your Next.js application, or explore other integration methods.

Ask me anything