Zum Inhalt springen
intoCHAT

Bubble-Integration

KI-Chatbot für deine Bubble-App

Trainiere einen Agenten mit den öffentlichen Seiten, Hilfetexten und FAQs deiner App und binde ihn über die Custom-Header- und Body-Einstellungen von Bubble auf jeder Seite ein. Ohne Plugin, und du kannst ihn vorher im Playground testen.

Agent kostenlos erstellen

Zuletzt aktualisiert:

So funktioniert intoCHAT auf Bubble

Bubble erlaubt es, über den Settings-Tab eigenes HTML auf allen Seiten einer App einzubinden. Genau das nutzt intoCHAT: Ein Script-Tag setzt eine Chat-Bubble in die Ecke jeder Seite. Der Agent antwortet aus dem, was du ihm gibst, etwa deinen öffentlichen Seiten, Hilfedokumenten und Q&A-Paaren, und sagt offen, wenn er etwas nicht weiß. Die Bubble liegt fest in einer Ecke über deiner Seite, getrennt von deinen Bubble-Elementen und Workflows.

intoCHAT auf Bubble installieren

  1. Agenten erstellen und trainieren

    Registriere dich bei intoCHAT, erstelle einen Agenten und füge im Tab Knowledge Wissen hinzu: die öffentlichen Seiten deiner App, Hilfedokumente oder Text und Q&A-Paare. Seiten hinter einem Login können nicht gecrawlt werden, lade diese Inhalte also hoch oder füge sie ein.

  2. Script-Tag kopieren

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

  3. Custom-Header- und Body-Einstellungen öffnen

    Öffne im Bubble-Editor den Settings-Tab, geh zu SEO / metatags und such den Bereich für Custom Headers und Body.

  4. Ins Body-Feld einfügen

    Füge das Script in das Body-Feld ein, nicht in das Header-Feld. Code dort wird in den Body jeder Seite deiner App eingefügt.

  5. Deployen und prüfen

    Deploye deine App auf Live und öffne sie im Browser. Die Chat-Bubble erscheint unten in der Ecke, mit den Farben und der Position aus dem Tab Appearance.

Der Code für Bubble

<script src="https://www.intochat.ai/api/embed.js" data-chatbot-id="YOUR_AGENT_ID"></script>

Nutze das Body-Feld, nicht das Header-Feld. Das Script hängt die Chat-Bubble an den Body der Seite, sobald es läuft, deshalb muss es innerhalb des Body geladen werden.

Was der Agent in deiner Bubble-App macht

  • Ruft die API deiner App auf

    Mit eigenen API-Aktionen ruft der Agent während des Chats einen HTTP-Endpunkt auf, mit Bearer-Token, API-Key oder eigenen Headern. Du legst fest, welche Felder der Antwort das Modell sieht.

  • Führt Funktionen auf deiner Seite aus

    Clientseitige Aktionen führen JavaScript-Funktionen aus, die du auf der Seite des Besuchers registrierst, damit der Agent etwas auslösen kann, das deine Seite schon kann.

  • Lernt aus deinen Dokumenten

    Lade PDF-, Word- oder Markdown-Dateien hoch, füge Hilfeseiten per URL hinzu oder schreib Q&A-Paare. Q&A-Antworten haben Vorrang vor anderen Quellen.

  • Bleibt bei deinen Inhalten

    Eingebaute Regeln binden die Antworten an deine Quellen und wehren Prompt-Injection ab. Steht die Antwort nicht in deinen Inhalten, sagt der Agent, dass er es nicht weiß, statt zu raten.

  • Sammelt Leads im Chat

    Ein kurzes Formular im Gespräch fragt nach E-Mail-Adresse oder Telefonnummer, nach Regeln, die du festlegst. Jeder neue Lead geht per E-Mail an dich und bis zu fünf Kolleginnen und Kollegen.

  • Passt zum Look deiner App

    Lege Farben für Bubble und Kopfzeile, Avatar, Launcher-Icon und Position fest oder übernimm Logo und Farben von deiner Website-Adresse.

Häufige Fragen

Macht intoCHAT meine Bubble-App langsamer?

Das Script ist eine einzelne Datei, die innerhalb des Seiten-Body lädt. Das Chatfenster läuft in einem eigenen iframe von intoCHAT, sein Code bleibt also von den Elementen und Workflows deiner App getrennt.

Warum erscheint die Chat-Bubble nicht in meiner Bubble-App?

Prüfe, ob das Script im Body-Feld steht und nicht im Header-Feld, denn es braucht beim Start einen vorhandenen Body. Wenn du die Live-App ansiehst, stell sicher, dass du die Änderung deployt hast, und vergleiche die Agenten-ID mit der im Tab Share.

Brauche ich ein Bubble-Plugin für intoCHAT?

Nein. intoCHAT wird mit einem Script-Tag im Custom-Body-Feld von Bubble installiert, es gibt also kein Plugin, das du installieren oder aktualisieren musst. Farben, Position, Begrüßung und Wissen verwaltest du komplett in intoCHAT.

Kann ich den Chat in eine Seite einbetten statt als Bubble?

Ja. Füge der Seite ein HTML-Element hinzu und setze den iframe-Code aus dem Tab Share ein, dann erscheint der Chat in der Größe und an der Stelle, die du wählst. Nutze auf einer Seite entweder den iframe oder das Bubble-Script, nicht beides, damit Besucher nicht zwei Chats sehen.

Muss ich meine Bubble-App ändern, wenn ich den Agenten anpasse?

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

Wie sieht der Chat auf dem Smartphone aus?

Auf Bildschirmen bis 768 Pixel Breite öffnet sich der Chat im Vollbild, und die Seite scrollt nicht, solange er offen ist. Schließt der Nutzer ihn, ist er wieder an derselben Stelle der Seite.

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.