React / Next.js Installation

Install the nuhello chatbot on your React or Next.js application.

Next.js (App Router)

For Next.js 13+ with the App Router:

Step 1: Create the Script Component

Create a new file components/NuhelloChat.tsx:

'use client';
 
import Script from 'next/script';
 
export default function NuhelloChat() {
  return (
    <Script
      id="nuhello-widget"
      strategy="afterInteractive"
      dangerouslySetInnerHTML={{
        __html: `
          window.nuhelloSettings = {
            key: "YOUR_PIXEL_KEY",
            botId: "YOUR_BOT_ID"
          };
          (function() {
            var s = document.createElement('script');
            s.src = 'https://cdn.nuhello.com/widget.js';
            s.async = true;
            document.head.appendChild(s);
          })();
        `
      }}
    />
  );
}

Step 2: Add to Layout

Add the component to your root layout (app/layout.tsx):

import NuhelloChat from '@/components/NuhelloChat';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <NuhelloChat />
      </body>
    </html>
  );
}

Next.js (Pages Router)

For Next.js with the Pages Router:

Step 1: Edit _app.tsx

Add the script to your pages/_app.tsx:

import type { AppProps } from 'next/app';
import Script from 'next/script';
 
export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Script
        id="nuhello-widget"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.nuhelloSettings = {
              key: "YOUR_PIXEL_KEY",
              botId: "YOUR_BOT_ID"
            };
            (function() {
              var s = document.createElement('script');
              s.src = 'https://cdn.nuhello.com/widget.js';
              s.async = true;
              document.head.appendChild(s);
            })();
          `
        }}
      />
      <Component {...pageProps} />
    </>
  );
}

Create React App

For Create React App projects:

Step 1: Edit index.html

Add the script to public/index.html before </head>:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... other head elements ... -->
 
    <script>
      window.nuhelloSettings = {
        key: "YOUR_PIXEL_KEY",
        botId: "YOUR_BOT_ID"
      };
      (function() {
        var s = document.createElement('script');
        s.src = 'https://cdn.nuhello.com/widget.js';
        s.async = true;
        document.head.appendChild(s);
      })();
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Using useEffect Hook

Alternatively, load the script dynamically in a React component:

import { useEffect } from 'react';
 
export default function NuhelloChat() {
  useEffect(() => {
    // Set nuhello settings
    (window as any).nuhelloSettings = {
      key: "YOUR_PIXEL_KEY",
      botId: "YOUR_BOT_ID"
    };
 
    // Create and append the script
    const script = document.createElement('script');
    script.src = 'https://cdn.nuhello.com/widget.js';
    script.async = true;
    document.head.appendChild(script);
 
    // Cleanup on unmount
    return () => {
      script.remove();
    };
  }, []);
 
  return null;
}

Then add <NuhelloChat /> to your app.

Passing User Data

To identify logged-in users, pass their data to nuhello:

'use client';
 
import Script from 'next/script';
import { useUser } from '@/hooks/useUser'; // Your auth hook
 
export default function NuhelloChat() {
  const { user } = useUser();
 
  const settings = {
    key: "YOUR_PIXEL_KEY",
    botId: "YOUR_BOT_ID",
    ...(user && {
      userId: user.id,
      name: user.name,
      email: user.email
    })
  };
 
  return (
    <Script
      id="nuhello-widget"
      strategy="afterInteractive"
      dangerouslySetInnerHTML={{
        __html: `
          window.nuhelloSettings = ${JSON.stringify(settings)};
          (function() {
            var s = document.createElement('script');
            s.src = 'https://cdn.nuhello.com/widget.js';
            s.async = true;
            document.head.appendChild(s);
          })();
        `
      }}
    />
  );
}

Opening the Widget Programmatically

Create a button to open the chat:

export default function ChatButton() {
  const openChat = () => {
    if (typeof window !== 'undefined' && (window as any).openNuhelloWidget) {
      (window as any).openNuhelloWidget();
    }
  };
 
  return (
    <button onClick={openChat}>
      Chat with us
    </button>
  );
}

TypeScript Types

Add type definitions for the nuhello global:

// types/nuhello.d.ts
declare global {
  interface Window {
    nuhelloSettings: {
      key: string;
      botId: string;
      userId?: string;
      name?: string;
      email?: string;
    };
    openNuhelloWidget: () => void;
  }
}
 
export {};

Troubleshooting

Widget not appearing in development?

Make sure you're using strategy="afterInteractive" with Next.js Script
Check the browser console for errors
Verify your pixel key and bot ID are correct

Hydration errors?

Use 'use client' directive for client components
Load the script only on the client side using useEffect

WordPress Vue.js / Nuxt.js