Next.js Integration

Learn how to integrate EasyFindAi into your Next.js application

1

Get Your API Key

Select a chatbot in the dashboard to view its API key

2

Create a Client Component

Create a client component to load the EasyFindAi chatbot script. This approach works with both App Router and Pages Router.

"use client";


import { useEffect } from "react";


export function EasyFindAiChatbot() {
  useEffect(() => {
    // Create script element
    const script = document.createElement("script");
    script.src = "https://easyfindai.com/api/chatbot-embed?apiKey=YOUR_API_KEY";


    // Append to document
    document.body.appendChild(script);


    // Cleanup function
    return () => {
      if (document.body.contains(script)) {
        document.body.removeChild(script);
      }
    };
  }, []);
  
  return null;
}
3

Add to Your Layout

Import and use the component in your layout or page component. For best results, add it to your root layout so it's available throughout your site.

// In your layout.tsx or page.tsx
import { EasyFindAiChatbot } from "@/components/EasyFindAiChatbot";


export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <EasyFindAiChatbot />
      </body>
    </html>
  );
}
4

Alternative: Direct Script Tag (Pages Router Only)

If you're using the Pages Router, you can add the script directly to your _document.js file. This won't work with App Router.

// In pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'


export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
        <script
          src="https://easyfindai.com/api/chatbot-embed?apiKey=YOUR_API_KEY"
        />
      </body>
    </Html>
  )
}

That's it!

The chatbot will now be available on all pages of your website. No additional configuration is needed!