So betten Sie einen Chatbot auf jeder Website ein

Sie haben einen trainierten Chatbot. Jetzt müssen Sie ihn auf Ihrer Website platzieren. Agentkit unterstützt vier Einbettungsmethoden, und welche die richtige ist, hängt von Ihrer Plattform, Ihrem technischen Setup und dem gewünschten Kontrollgrad ab. Dieser Leitfaden behandelt alle vier Optionen mit Codebeispielen, Konfigurationsdetails und plattformspezifischen Anweisungen.

Einbettungsmethoden im Überblick

Die meisten Nutzer sollten mit dem JS-Widget beginnen. Es funktioniert auf jeder Plattform, lädt asynchron und ist in weniger als fünf Minuten eingerichtet.

Bevor Sie starten

Jede Einbettungsmethode setzt einen trainierten Chatbot voraus. Falls Sie noch keinen haben:

1. Bei Agentkit registrieren (kostenlos).
2. Erstellen Sie einen Chatbot und trainieren Sie ihn mit Website-URLs, Dokumenten, Q&A-Paaren oder Text.
3. Testen Sie ihn im Playground, bis die Antworten präzise sind.
4. Holen Sie sich Ihren Einbettungscode im Dashboard unter Einstellungen dann Veröffentlichen.

Eine Trainingsanleitung finden Sie unter So trainieren Sie einen Chatbot mit Ihren Website-Inhalten.

Methode 1: JavaScript-Widget

Das JS-Widget ist die universelle Einbettungsmethode. Ein Script-Tag, platziert vor dem schließenden </body>-Tag, lädt eine Chat-Blase auf Ihrer Website. Es funktioniert auf jeder Plattform, die individuelles JavaScript erlaubt: statische HTML-Websites, CMS-Plattformen, Landingpage-Builder und Webanwendungen.

Grundinstallation

Kopieren Sie dieses Script-Tag und platzieren Sie es vor dem schließenden </body>-Tag Ihrer Seite:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  async>
</script>

Ersetzen Sie your-chatbot-id durch die tatsächliche ID aus Ihrem Agentkit-Dashboard. Das Attribut async stellt sicher, dass das Script lädt, ohne Ihre Seite zu blockieren.

Mehr brauchen Sie für einen funktionierenden Chatbot nicht. Das Widget erscheint als Chat-Blase in der unteren rechten Ecke. Besucher klicken darauf, um eine Unterhaltung zu öffnen.

Konfiguration über Datenattribute

Sie können das Widget-Verhalten anpassen, indem Sie Datenattribute zum Script-Tag hinzufügen:

<script
  src="https://cdn.agentkit.ai/widget.js"
  data-chatbot="your-chatbot-id"
  data-position="bottom-right"
  data-theme="light"
  async>
</script>

Verfügbare Datenattribute

Die meisten visuellen Anpassungen (Farben, Begrüßungsnachricht, Branding) werden über das Agentkit-Dashboard gesteuert, nicht über Datenattribute. Das hält Ihren Einbettungscode einfach, und Sie können Einstellungen ändern, ohne Code auf Ihrer Website anzufassen.

Wie das Widget lädt

Das Widget-Script ist leichtgewichtig und lädt asynchron. So läuft es ab:

1. Ihre Seite lädt normal. Das Attribut async bedeutet, dass das Script das Rendering nicht blockiert.
2. Das Script wird von unserem CDN heruntergeladen und initialisiert.
3. Eine Chat-Blase erscheint auf der Seite.
4. Klickt ein Besucher auf die Blase, lädt die vollständige Chat-Oberfläche.
5. Nachrichten werden an die Agentkit-API gesendet und in Echtzeit zurückgestreamt.

Das anfängliche Script ist klein. Die vollständige Chat-Oberfläche lädt erst, wenn der Besucher mit der Blase interagiert – die Auswirkung auf Ihre Seitengeschwindigkeit ist also minimal.

Plattformspezifische Widget-Installation

Das JS-Widget funktioniert auf allen Plattformen, die Schritte zum Hinzufügen des Scripts unterscheiden sich jedoch je nach Plattform. Hier sind Kurzlinks zu plattformspezifischen Leitfäden:

Methode 2: React-Komponente

Wenn Sie mit React, Next.js, Remix oder Gatsby arbeiten, bietet die React-Komponente eine engere Integration als das reine Script-Tag. Sie erhalten props-basierte Konfiguration, TypeScript-Typen und die Möglichkeit, in Chatbot-Events einzuhaken.

Installation

Installieren Sie das Agentkit-React-Paket:

npm install @agentkit/react

Grundlegende Verwendung

import { AgentitkChat } from '@agentkit/react';

function App() {
  return (
    <AgentitkChat chatbotId="your-chatbot-id" />
  );
}

Das rendert dieselbe Chat-Blase wie das JS-Widget, aber als React-Komponente innerhalb des Komponentenbaums Ihrer Anwendung.

Props

Next.js-Integration

Fügen Sie den Chatbot in einem Next.js-App-Router-Projekt zu Ihrem Root-Layout hinzu, damit er auf allen Seiten erscheint:

// app/layout.tsx
import { AgentitkChat } from '@agentkit/react';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <AgentitkChat chatbotId="your-chatbot-id" />
      </body>
    </html>
  );
}

Für den Pages Router fügen Sie die Komponente stattdessen zu _app.tsx hinzu.

Wann Sie die React-Komponente statt des JS-Widgets nutzen sollten

Nutzen Sie React, verwenden Sie die React-Komponente. Für alles andere nutzen Sie das JS-Widget.

Methode 3: iframe

Die iframe-Methode bettet den Chatbot als eigenständige Seite innerhalb eines Frames auf Ihrer Website ein. Das ist nützlich in Umgebungen, in denen JavaScript-Injection eingeschränkt ist, oder wenn Sie den Chatbot als Inline-Element statt als schwebende Blase anzeigen möchten.

Grundlegende iframe-Einbettung

<iframe
  src="https://cdn.agentkit.ai/embed/your-chatbot-id"
  style="width: 100%; height: 600px; border: none;"
  allow="clipboard-write">
</iframe>

Das zeigt die vollständige Chat-Oberfläche inline auf Ihrer Seite an, nicht als schwebende Blase.

Wann Sie iframe nutzen sollten

iframe-Konfiguration

Passen Sie das iframe über URL-Parameter an:

<iframe
  src="https://cdn.agentkit.ai/embed/your-chatbot-id?theme=dark"
  style="width: 400px; height: 600px; border: none; border-radius: 12px;"
  allow="clipboard-write">
</iframe>

Größe des iframes festlegen

Das iframe passt seine Größe nicht automatisch an. Sie steuern die Abmessungen über CSS:

• Chat in voller Breite eingebettet: width: 100%; height: 600px;
• Chat in der Seitenleiste: width: 400px; height: 100vh;, positioniert in einem Sidebar-Layout.
• Kompaktes Widget: width: 350px; height: 500px; für einen kleineren Inline-Bereich.

Einschränkungen der iframe-Einbettung

Für die meisten Websites ist das JS-Widget die bessere Wahl. Nutzen Sie iframe nur, wenn das JS-Widget keine Option ist oder Sie gezielt ein Inline-Chat-Erlebnis möchten.

Methode 4: WordPress-Plugin

WordPress-Websites können das JS-Widget über jede der oben beschriebenen Methoden nutzen, es gibt aber auch einen dedizierten Ansatz mit Code-Snippet-Plugins, der den Prozess für nicht-technische Nutzer vereinfacht.

Schnelleinrichtung mit WPCode

1. Installieren Sie das WPCode-Plugin (kostenlos, über 2 Mio. Installationen) unter Plugins dann Installieren.
2. Gehen Sie zu Code Snippets dann Header & Footer.
3. Fügen Sie das Agentkit-Script-Tag in den Bereich Footer ein.
4. Speichern.

Der Chatbot erscheint jetzt auf jeder Seite. WPCode unterstützt außerdem bedingte Logik, sodass Sie den Chatbot nur auf bestimmten Seiten anzeigen können.

Weitere WordPress-Methoden

Die vollständige WordPress-Anleitung mit Fehlerbehebung finden Sie unter Chatbot zu WordPress hinzufügen.

Anpassungsoptionen

Unabhängig davon, welche Einbettungsmethode Sie nutzen, erfolgen die meisten Anpassungen über das Agentkit-Dashboard. Das bedeutet, Sie können Einstellungen ändern, ohne Ihren Einbettungscode anzufassen.

Visuelle Anpassung

Verhaltensanpassung

Sicherheitsaspekte

Beim Einbetten eines Chatbots auf Ihrer Website sollten Sie diese Sicherheitseinstellungen im Blick behalten.

Domain-Beschränkung

Legen Sie in Ihren Chatbot-Einstellungen immer eine Domain-Beschränkung fest. So stellen Sie sicher, dass Ihr Chatbot nur auf Ihren autorisierten Domains lädt. Ohne diese Einstellung könnte jeder, der Ihre Chatbot-ID findet, Ihren Chatbot auf einer eigenen Website einbetten und Ihr Nachrichtenkontingent nutzen.

Gehen Sie im Agentkit-Dashboard zu Einstellungen und fügen Sie jede Domain hinzu, auf der der Chatbot funktionieren soll:

• Ihre primäre Domain (z. B. ihrunternehmen.de)
• Alle Subdomains (z. B. support.ihrunternehmen.de)
• Entwicklungs- oder Staging-Domains, falls Sie testen müssen

Ratenlimit

Das Ratenlimit begrenzt, wie viele Nachrichten ein einzelner Besucher pro Sitzung senden kann. Das verhindert Missbrauch und hilft, Ihr Nachrichtenkontingent zu verwalten. Für die meisten Websites ist ein Limit von 15–25 Nachrichten pro Sitzung angemessen.

Content Security Policy

Nutzt Ihre Website Content-Security-Policy-Header, müssen Sie die Agentkit-Domains auf die Whitelist setzen. Fügen Sie Ihrer CSP Folgendes hinzu:

• script-src: cdn.agentkit.ai
• frame-src: cdn.agentkit.ai (bei Nutzung der iframe-Methode)
• connect-src: *.agentkit.com (für API-Aufrufe)

Fehlerbehebung bei häufigen Einbettungsproblemen

Der Chatbot erscheint nicht

Der Chatbot erscheint, antwortet aber nicht

• Trainingsdaten prüfen. Ein untrainierter Chatbot hat nichts, womit er arbeiten kann.
• Chatbot-ID prüfen. Eine falsche ID bedeutet, dass das Widget lädt, den Chatbot aber nicht findet.
• Domain-Beschränkung prüfen. Steht Ihre Domain nicht auf der zulässigen Liste, antwortet der Chatbot nicht.
• Tarifkontingent prüfen. Haben Sie Ihre monatlichen Nachrichten aufgebraucht, antwortet der Chatbot bis zum nächsten Abrechnungszeitraum nicht mehr.

Der Chatbot kollidiert mit anderen Widgets

Überschneidet sich ein anderes Chat-Widget (Intercom, Crisp, Drift) mit Ihrem, entfernen Sie entweder das andere Widget, ändern Sie die Agentkit-Position auf bottom-left, oder nutzen Sie die iframe-Methode, um den Chatbot inline statt als schwebende Blase zu platzieren.

Den richtigen Tarif für Ihre Einbettung wählen

Die jährliche Abrechnung spart bei allen kostenpflichtigen Tarifen etwa 20 %. Starten Sie mit dem Free-Tarif, um die Einbettung zu testen, und upgraden Sie, sobald Ihr Traffic mehr Nachrichten erfordert.

Nächste Schritte

Sobald Ihr Chatbot eingebettet ist, verlagert sich die Arbeit von der Installation zur Optimierung:

1. Überwachen Sie die Unterhaltungen in der ersten Woche im Agentkit-Dashboard. Identifizieren Sie Fragen, mit denen der Chatbot Schwierigkeiten hat.
2. Ergänzen Sie Trainingsdaten für Schwachstellen. Q&A-Paare sind der schnellste Weg, um konkrete Antwortprobleme zu beheben.
3. Aktivieren Sie die Lead-Erfassung, um E-Mail-Adressen von Besuchern während des Gesprächs zu erfassen. Siehe den Leitfaden zur Lead-Generierung.
4. Verbinden Sie Ihre Tools über Zapier, Webhooks oder die REST-API. Siehe den Integrationsleitfaden.
5. Richten Sie Domain-Beschränkung und Ratenlimit ein – für Sicherheit und Kontingentverwaltung.

Plattformspezifische Anleitungen finden Sie in den ausführlichen Leitfäden:

• WordPress
• Shopify
• Squarespace
• Wix
• Webflow

Erstellen Sie Ihren Chatbot kostenlos →

Keine Kreditkarte erforderlich.