Chat-Widget in Next.js und React einbinden

Das intoCHAT-Widget ist ein einfaches Script, keine React-Komponente. Es liest deine Agenten-ID aus seinem Attribut data-chatbot-id und hängt den Launcher an document.body, außerhalb deines React-Baums. Re-Renders und Routenwechsel berühren ihn deshalb nicht.

Next.js mit App Router

Lade das Script einmal im Root-Layout mit der Komponente Script aus next/script:

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>
  )
}

• Das Data-Attribut. Next.js gibt zusätzliche Attribute wie data-chatbot-id an das fertige Script-Element weiter. Genau dort sucht das Widget danach.
• Die Strategie. lazyOnload lädt das Widget, wenn der Browser im Leerlauf ist, nach den übrigen Ressourcen der Seite. afterInteractive, die Standardeinstellung, lädt es früher, der Launcher erscheint also schneller. Beides funktioniert.
• Nicht beforeInteractive. Diese Strategie ist für Scripts gedacht, die die Seite braucht, bevor sie interaktiv wird. Das Chat-Widget gehört nicht dazu, und so früh geladen konkurriert es nur mit deinem eigenen Code.
• Server Components. Das Layout kann eine Server Component bleiben, weil dieses Script keine Event-Handler hat.

Next.js lädt das Script nur einmal, auch wenn Besucher zwischen Routen wechseln. Im Pages Router fügst du dasselbe Script stattdessen in pages/_app ein.

Soll der Chat nur unter bestimmten Routen erscheinen, setze das Script in ein verschachteltes Layout. Ist es einmal geladen, bleibt der Launcher auch nach clientseitiger Navigation zu anderen Routen auf der Seite, bis zum nächsten vollständigen Seitenaufruf.

React mit Vite oder Create React App

Wähle eine von zwei Varianten, nicht beide. Das Embed-Script ignoriert eine zweite Kopie für denselben Agenten, mit beiden lädst du es also nur doppelt.

Variante 1: index.html. Füge das Script-Tag aus dem Tab Share direkt vor </body> in index.html ein: bei Vite im Projektstamm, bei Create React App in public/index.html.

Variante 2: eine Komponente. Sinnvoll, wenn du im Code entscheiden willst, ob das Widget lädt, etwa nur in Produktion:

import { useEffect } from 'react'

export default function IntoChatWidget() {
  useEffect(() => {
    // Load the widget only once, even when StrictMode runs effects twice
    if (document.getElementById('intochat-embed')) return

    const script = document.createElement('script')
    script.id = 'intochat-embed'
    script.src = 'https://www.intochat.ai/api/embed.js'
    script.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID')
    document.body.appendChild(script)
  }, [])

  return null
}

Rendere IntoChatWidget einmal in deiner Root-Komponente, etwa App. Setze das Attribut, bevor das Element in die Seite kommt, wie oben gezeigt.

StrictMode und doppelte Launcher

In der Entwicklung führt React StrictMode Effects zweimal aus. Die id-Prüfung am Anfang des Effects verhindert, dass das Script zweimal eingefügt wird. Auch ohne sie gäbe es keinen zweiten Launcher, denn das Embed-Script fügt pro Agent und Seite nur einen hinzu. Entferne das Script nicht in einer Cleanup-Funktion: Das entfernt den Launcher nicht, er bleibt bis zum nächsten vollständigen Seitenaufruf in document.body.

Clientseitige Aktionen

Der Agent kann während eines Chats Funktionen in deiner App aufrufen, etwa um einen Zustand zu lesen oder ein Formular zu öffnen. Du registrierst sie mit window.IntoChatActions.register. Siehe Clientseitige Aktionen.

Content Security Policy

Erlaube https://www.intochat.ai in script-src, connect-src und frame-src. Nutzt deine Policy Nonces, gib die nonce an die Komponente Script weiter. Next.js reicht sie durch wie das Data-Attribut.

Prüfen

Öffne eine beliebige Route. Der Launcher erscheint unten in der Ecke und bleibt beim Navigieren. Zwei Launcher bedeuten, dass zwei Snippets mit verschiedenen Agenten-IDs geladen werden. Kein Launcher und „Chatbot not found.“ in der Konsole bedeuten, dass die Agenten-ID nicht stimmt. Weitere Fälle findest du unter Fehlerbehebung, mehr Hintergrund in den Ratgebern zu Next.js und React.