Zum Inhalt springen
intoCHAT

Next.js-Integration

KI-Chatbot für deine Next.js-App

Lade das intoCHAT-Widget einmal im Root-Layout mit next/script. Es bleibt bei clientseitiger Navigation bestehen, und der Agent antwortet aus den Inhalten, mit denen du ihn trainierst.

Agent kostenlos erstellen

Zuletzt aktualisiert:

So funktioniert intoCHAT in Next.js

Das intoCHAT-Widget ist ein einzelnes Script, das deine Agenten-ID aus seinem Attribut data-chatbot-id liest und der Seite eine Chat-Bubble hinzufügt. Next.js reicht data-Attribute der Script-Komponente an das fertige Script-Element weiter, die normale Komponente next/script genügt also. Setz sie ins Root-Layout, dann lädt Next.js sie nur einmal, auch wenn Besucher zwischen Routen wechseln. Farben, Position und Begrüßung kommen von intoCHAT, für Änderungen musst du also nicht neu deployen.

intoCHAT in Next.js installieren

  1. Agenten erstellen und trainieren

    Registriere dich bei intoCHAT, erstelle einen Agenten und füge im Tab Knowledge deine Website hinzu. Der Crawl rendert JavaScript-lastige Seiten vor dem Lesen, clientseitig gerenderte Routen werden also so gelesen, wie Besucher sie sehen.

  2. Agenten-ID kopieren

    Öffne den Tab Share. Der Code unter Bubble Chat enthält deine Agenten-ID im Attribut data-chatbot-id.

  3. Script ins Root-Layout einfügen

    Importiere in app/layout.tsx Script aus next/script und füge es innerhalb von body nach children ein, mit der Embed-URL, deiner Agenten-ID und strategy auf lazyOnload.

  4. Deployen und prüfen

    Öffne eine beliebige Route. Die Chat-Bubble erscheint unten in der Ecke und bleibt, während du zwischen Seiten wechselst.

app/layout.tsx

import Script from 'next/script'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://www.intochat.ai/api/embed.js"
          data-chatbot-id="YOUR_AGENT_ID"
          strategy="lazyOnload"
        />
      </body>
    </html>
  )
}

Next.js reicht data-chatbot-id an das Script-Element weiter, so findet das Widget deinen Agenten. Das Layout kann eine Server Component bleiben, weil dieses Script keine Event-Handler hat.

Was der Agent in deiner Next.js-App kann

  • Clientseitige Aktionen

    Registriere Funktionen auf deiner Seite mit window.IntoChatActions.register, dann kann der Agent sie im Chat aufrufen, etwa um den Zustand der Seite zu lesen oder ein Formular zu öffnen.

  • Eigene API-Aktionen

    Lass den Agenten deine eigenen HTTP-Endpunkte aufrufen, mit Bearer-Token, Basic Auth, API-Schlüssel oder eigenen Headern. Importiere Anfragen aus cURL und lege fest, welche Antwortfelder das Modell sieht.

  • Liest clientseitig gerenderte Seiten

    Der Website-Crawl rendert JavaScript-lastige Seiten vor dem Lesen, findet über Sitemap und Links bis zu 500 URLs und lässt dich Pfade per Muster ausschließen.

  • Fundierte Antworten

    Hybride semantische und Stichwortsuche über deine Inhalte, mit Regeln, die Antworten bei deinen Quellen halten, Prompt-Injection abwehren und sagen, wenn die Antwort fehlt.

  • Lead-Erfassung

    Frag im Chat nach E-Mail-Adresse oder Telefonnummer, manuell, nach Regeln oder wenn die KI es entscheidet. Leads kommen per E-Mail und lassen sich als CSV exportieren.

  • Gestaltet im Dashboard

    Farben, Avatar, Launcher-Icon, Position und Begrüßung legst du im Tab Appearance fest, nicht in deinem Code.

Häufige Fragen

Macht das Widget meine Next.js-App langsamer?

Mit strategy auf lazyOnload fügt Next.js das Script in der Leerlaufzeit des Browsers ein, nachdem die übrigen Ressourcen der Seite geladen sind, es hält also weder Rendering noch Hydration auf. Das Chatfenster läuft in einem eigenen iframe von intoCHAT, getrennt vom JavaScript deiner App.

Soll ich lazyOnload oder afterInteractive nutzen?

Beides funktioniert. afterInteractive, die Standardeinstellung, lädt das Script früher, direkt nach einem Teil der Hydration, die Bubble erscheint also schneller, während lazyOnload auf Leerlaufzeit wartet. In beiden Fällen erzeugt Next.js das Script-Element mit deinem Attribut data-chatbot-id, das das Widget braucht.

Funktioniert es mit dem Pages Router?

Ja. Füge dieselbe Script-Komponente in pages/_app ein, damit sie auf jeder Seite lädt. Next.js reicht data-Attribute auch im Pages Router weiter.

Kann ich den Chat nur auf bestimmten Routen zeigen?

Du kannst das Script statt ins Root-Layout in ein verschachteltes Layout setzen, dann lädt es, sobald eine Route unter diesem Layout geöffnet wird. Einmal geladen, sitzt die Bubble direkt auf der Seite und bleibt nach clientseitiger Navigation zu anderen Routen sichtbar, bis die Seite komplett neu lädt.

Meine App hat eine Content Security Policy. Was muss ich erlauben?

Erlaube www.intochat.ai in script-src für das Script, in connect-src für das Laden der Agenten-Einstellungen und in frame-src für das Chatfenster. Nutzt deine Policy Nonces, gib die Nonce auch an die Script-Komponente weiter.

Muss ich neu deployen, wenn ich den Agenten ändere?

Nein. Der Code enthält nur deine Agenten-ID. Farben, Position, Begrüßung, Vorschlagsfragen und Wissen lädt er bei jedem Seitenaufruf von intoCHAT, Änderungen erscheinen also ohne neues Deployment.

Sieh, wie er mit deiner Website antwortet

Gib die Adresse deiner Website ein und chatte mit einem Agenten, der aus deinen Seiten gebaut wird. Das dauert etwa eine Minute.

Agent kostenlos erstellen

Kostenloser Plan, keine Kreditkarte nötig.