Chatbot w Next.js: jak dodać chatbota AI za pomocą next/script (App Router i Pages Router)

• Konto Nexoply. Zarejestruj się za darmo: plan Darmowy obejmuje 50 rozmów miesięcznie, bez karty.
• Informacje o firmie w Nexoply: usługi i ceny, FAQ, zasady, godziny otwarcia i obszary działania. Najszybciej jest podać adres strony i pozwolić Nexoply zaimportować publiczne podstrony (także renderowane w JavaScripcie); przeglądasz propozycje i nic nie zostanie dodane, dopóki tego nie zatwierdzisz.
• Klucz Twojego chatbota. W panelu otwórz stronę Chatbot (kliknij Utwórz chatbota, jeśli jeszcze go nie masz). Znajdujący się tam kod instalacyjny zawiera klucz w atrybucie data-chatbot.

Na zwykłej stronie HTML kod instalacyjny wkleja się po prostu przed </body>:

<script src="https://nexoply.com/widget.js" data-chatbot="YOUR-KEY" async></script>

W Next.js nie edytujesz HTML bezpośrednio, więc ten sam skrypt dodajesz za pomocą wbudowanego komponentu next/script. Klucz jest publiczny: informuje tylko widżet, do której firmy należy.

Główny layout obejmuje każdą stronę, więc dodanie tam skryptu umieszcza czat w całej witrynie. Zaimportuj Script z next/script i umieść go wewnątrz <body>, po {children}:

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        {/* Widżet czatu Nexoply: ładuje się w przeglądarce po hydracji */}
        <Script
          src="https://nexoply.com/widget.js"
          data-chatbot={process.env.NEXT_PUBLIC_NEXOPLY_KEY}
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Następnie zapisz klucz w zmiennej środowiskowej. Prefiks NEXT_PUBLIC_ sprawia, że Next.js dołącza ją do paczki dla przeglądarki, co w tym przypadku jest w porządku, bo klucz nie jest tajny:

# .env.local (nie trafia do gita)
NEXT_PUBLIC_NEXOPLY_KEY=YOUR-KEY

W Pages Router każdą stronę obejmuje pages/_app.tsx, więc ten sam <Script> trafia tam, obok <Component {...pageProps} />. Użyj tej samej zmiennej z .env.local:

// pages/_app.tsx
import type { AppProps } from "next/app";
import Script from "next/script";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://nexoply.com/widget.js"
        data-chatbot={process.env.NEXT_PUBLIC_NEXOPLY_KEY}
        strategy="afterInteractive"
      />
    </>
  );
}

Jeśli Twój projekt łączy oba routery, dodaj skrypt zarówno w app/layout.tsx, jak i w pages/_app.tsx. Dwukrotne załadowanie niczego nie psuje: widżet montuje się tylko raz na klucz chatbota.

Wolisz komponent <Chatbot />, jak w poradniku o komponencie chatbota dla React? Przenieś Script do osobnego pliku. next/script działa w Server Components, o ile nie przekazujesz procedur obsługi zdarzeń, takich jak onLoad, więc ten plik nie potrzebuje "use client":

// components/Chatbot.tsx
import Script from "next/script";

export function Chatbot() {
  return (
    <Script
      src="https://nexoply.com/widget.js"
      data-chatbot={process.env.NEXT_PUBLIC_NEXOPLY_KEY}
      strategy="afterInteractive"
    />
  );
}

Następnie wyrenderuj <Chatbot /> wewnątrz <body> w app/layout.tsx, po {children}, albo obok <Component {...pageProps} /> w pages/_app.tsx. Renderuj go w layoucie, a nie na pojedynczej stronie, aby ładował się na każdej trasie.

strategy="afterInteractive" ładuje widżet zaraz po tym, jak strona staje się interaktywna, więc przycisk czatu pojawia się szybko. strategy="lazyOnload" czeka, aż przeglądarka będzie bezczynna i wszystko inne się załaduje; wybierz ją, jeśli chcesz, aby pierwsze ładowanie było jak najlżejsze, i nie przeszkadza Ci, że przycisk pojawi się chwilę później. Obie strategie trzymają skrypt poza krytyczną ścieżką renderowania. Szczegóły znajdziesz w dokumentacji next/script.

• Nawigacja po stronie klienta. Widżet utrzymuje otwartą rozmowę, gdy odwiedzający przechodzą między stronami za pomocą <Link> lub routera, i ponownie sprawdza Twoje reguły stron przy zmianie adresu URL, bez dodatkowego kodu.
• Bezpieczny przy SSR i hydracji. Działa tylko w przeglądarce i montuje się w document.body, poza kodem HTML, który hydruje React, więc nigdy nie powoduje niezgodności hydracji.
• Shadow DOM. Twój Tailwind ani globalny CSS nie przenikają do czatu, a jego style nie przenikają do Twojej aplikacji. Ponowne renderowania nigdy go nie usuwają.
• StrictMode i Fast Refresh. Dwukrotne uruchamianie efektów w trybie deweloperskim ani hot reload nie utworzą drugiego czatu: widżet montuje się raz na klucz.
• Przechowywanie danych. Nie ustawia plików cookie; używa localStorage dla anonimowego identyfikatora odwiedzającego i sessionStorage dla bieżącej rozmowy.

Next.js ułatwia zbudowanie własnego chatbota i czasem to właściwy wybór. Oba podejścia sprawdzają się w różnych zadaniach:

• Zbuduj go sam za pomocą biblioteki UI do czatu lub własnych komponentów oraz route handlera albo API route, który wywołuje model AI z Twoim własnym kluczem API. Odpowiadasz też za treści, na podstawie których odpowiada, przechowywanie rozmów i ochronę przed nadużyciami. Sprawdza się, gdy czat jest częścią Twojego produktu, na przykład asystent pracujący na danych Twoich użytkowników.
• Hostowany chatbot AI, taki jak Nexoply, dostarcza interfejs, AI i backend razem. Odpowiada na pytania odwiedzających tylko na podstawie dodanych lub zaimportowanych przez Ciebie informacji o firmie (usługi i ceny, FAQ, zasady, godziny otwarcia) i mówi, gdy czegoś nie wie. Nie ma klucza AI i nic nie działa na Twoim serwerze; rozmowy, pytania bez odpowiedzi i ochrona przed spamem są obsługiwane w panelu. Sprawdza się na stronie dla klientów, która ma odpowiadać na pytania o firmę.

Jeśli chcesz mieć pełną kontrolę nad interfejsem i modelem, zbuduj go sam. Jeśli celem jest odpowiadanie na pytania odwiedzających bez utrzymywania backendu, hostowany widżet wymaga mniej pracy. Zobacz, jak Nexoply odpowiada na podstawie informacji o Twojej firmie.

Chcesz mieć przycisk „Napisz do nas” w sekcji hero albo przy cenniku? Wyślij zdarzenie nexoply:open-chat na obiekcie window. Ponieważ używa onClick, musi to być komponent kliencki:

"use client";
// components/ChatButton.tsx

export function ChatButton() {
  return (
    <button
      type="button"
      // otwiera okno czatu Nexoply
      onClick={() => window.dispatchEvent(new Event("nexoply:open-chat"))}
    >
      Napisz do nas
    </button>
  );
}

Używaj <ChatButton /> na dowolnej stronie lub w dowolnym komponencie serwerowym. Nie ma API do usunięcia widżetu po załadowaniu: aby ukryć przycisk czatu na niektórych stronach (np. /checkout), dodaj regułę strony z opcją „Bez przycisku” w sekcji Chatbot → Personalizacja → Przycisk czatu → Inaczej na niektórych stronach.

Uruchom next dev, otwórz http://localhost:3000, a w rogu pojawi się przycisk czatu. Zadaj prawdziwe pytanie, np. „Czy pracujecie w weekendy?”; po kilku sekundach rozmowa pojawi się w sekcji Rozmowy w panelu. Zmiany wprowadzone w panelu docierają na stronę w ciągu około minuty, bez ponownego wdrażania.

Jeśli Twoja aplikacja wysyła nagłówek Content-Security-Policy (np. z middleware lub next.config), zezwól na Nexoply w:

• script-src https://nexoply.com: aby załadować widget.js.
• connect-src https://nexoply.com: dla żądań czatu.
• img-src https://nexoply.com: dla obrazów, takich jak logo i ikona przycisku.

• Brak przycisku, a data-chatbot w źródle strony jest pusty. Zmienna środowiskowa nie została odczytana: sprawdź prefiks NEXT_PUBLIC_, zrestartuj next dev, a na hostingu dodaj zmienną i wdróż ponownie.
• Skrypt jest na pojedynczej stronie zamiast w layoucie. Umieść go w app/layout.tsx lub pages/_app.tsx, aby ładował się na każdej trasie.
• Tag został zmieniony. Musi zachować atrybut data-chatbot i src zawierający widget.js.
• Blokada przez CSP lub listę dozwolonych stron. Poszukaj błędów w konsoli przeglądarki i sprawdź dwie powyższe sekcje.
• Chatbot wyłączony. Sprawdź, czy przełącznik Chatbot włączony jest włączony.
• Blokery reklam. Rzadko zdarza się, że rozszerzenie blokuje widżety czatu. Spróbuj w oknie prywatnym bez rozszerzeń.

Gdy wszystko działa, dopasuj czat do strony w sekcji Chatbot → Personalizacja: ikona przycisku, etykieta, kolory i położenie albo zakładka boczna przy krawędzi ekranu (np. „Pomoc”); inny wygląd na telefonach; reguły dla wybranych stron (np. zakładka boczna tylko na /pricing). Zobacz wszystkie opcje personalizacji i to, jak asystent poznaje Twoją firmę, porównaj plany i limity rozmów albo przeczytaj poradnik o komponencie chatbota dla React i poradnik chatbota dla Vue i Nuxt.