Zum Inhalt springen
intoCHAT

React-Integration

KI-Chatbot für deine React-App

Binde das intoCHAT-Widget mit einem Script-Tag in index.html ein oder lade es aus einer kleinen Komponente mit useEffect. Es bleibt bei clientseitigen Routenwechseln bestehen.

Agent kostenlos erstellen

Zuletzt aktualisiert:

So funktioniert intoCHAT in React

Das intoCHAT-Widget ist ein normales Script, keine React-Komponente. Es liest deine Agenten-ID aus dem Attribut data-chatbot-id des Script-Elements, das es geladen hat, und hängt dann eine Chat-Bubble an document.body, außerhalb deines React-Baums. Deshalb funktioniert es mit jedem Router und jeder State-Bibliothek, und Re-Renders berühren es nie. Farben, Position und Begrüßung stellst du in intoCHAT ein, für Änderungen brauchst du also keinen neuen Build.

intoCHAT in einer React-App 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, Routen, die deine App im Browser rendert, werden also so gelesen, wie Besucher sie sehen.

  2. Script-Tag kopieren

    Öffne den Tab Share und kopiere den Code unter Bubble Chat. Deine Agenten-ID ist darin schon enthalten.

  3. Am einfachsten: in index.html einfügen

    Füge das Script-Tag direkt vor dem schließenden Body-Tag in index.html ein: bei Vite im Projektstamm, bei Create React App in public/index.html.

  4. Oder aus einer Komponente laden

    Wenn du es lieber im Code hast, füge die Komponente IntoChatWidget unten hinzu und rendere sie einmal in deiner Root-Komponente, etwa App. Nutze nur eine der beiden Varianten.

  5. Prüfen

    Starte deine App. Die Chat-Bubble erscheint unten in der Ecke und bleibt, während du zwischen Routen wechselst.

IntoChatWidget.jsx

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
}

Das Widget liest seine Agenten-ID aus dem Attribut data-chatbot-id des Script-Elements, das es geladen hat. Setz das Attribut deshalb, bevor du das Element zur Seite hinzufügst. Die ID-Prüfung verhindert eine zweite Kopie in der Entwicklung.

Was der Agent in deiner React-App kann

  • Clientseitige Aktionen

    Registriere Funktionen mit window.IntoChatActions.register, dann kann der Agent sie im Chat aufrufen, um Zustand aus deiner App zu lesen oder etwas auszulösen, das sie definiert.

  • Eigene API-Aktionen

    Lass den Agenten deine HTTP-API 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 deine gerenderten 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.

  • Neues Design ohne neuen Build

    Farben, Avatar, Launcher-Icon, Position und Begrüßung legst du im Tab Appearance fest. Das alles lädt mit dem Widget, nicht aus deinem Bundle.

Häufige Fragen

Soll ich index.html oder die Komponente nutzen?

index.html ist die einfachste Variante und lädt das Widget auf jeder Seite. Nimm die Komponente, wenn du im Code entscheiden willst, ob es lädt, etwa nur in Produktion oder erst nach der Cookie-Zustimmung. Nutze nur eine der beiden, sonst bekommst du zwei Bubbles.

Warum sehe ich in der Entwicklung zwei Chat-Bubbles?

React StrictMode führt Effects in der Entwicklung zweimal aus, und das Widget fügt bei jedem Lauf seines Scripts eine neue Bubble hinzu. Die ID-Prüfung am Anfang des Effects verhindert, dass der zweite Lauf ein weiteres Script einfügt. Prüf außerdem, dass das Script nicht zusätzlich in index.html steht.

Macht das Widget meine React-App langsamer?

Aus der Komponente geladen, wird das Script erst nach dem Rendern deiner App eingefügt und hält das erste Rendern nicht auf. In index.html ist es ein normales Script am Ende des Body. In beiden Fällen läuft das Chatfenster in einem eigenen iframe von intoCHAT, getrennt vom Code deiner App.

Funktioniert es mit React Router und anderem clientseitigem Routing?

Ja. Das Widget sitzt in document.body, außerhalb deines React-Roots, Routenwechsel und Re-Renders betreffen es also nicht. Es bleibt auch, wenn die Komponente, die es geladen hat, unmountet, bis zum nächsten vollständigen Neuladen der Seite.

Kann der Agent Code in meiner React-App ausführen?

Ja, mit clientseitigen Aktionen. Registriere eine Funktion mit window.IntoChatActions.register, dann kann der Agent sie im Chat aufrufen, um Zustand aus deiner App zu lesen oder etwas auszulösen, das sie definiert. Läuft dein Code, bevor das Widget geladen ist, leg Name und Funktion als Paar in window.IntoChatActionsQueue ab, und das Widget registriert sie beim Start.

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. Ohne diese Einträge blockiert der Browser das Widget, und die Bubble erscheint nicht.

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.