Widget-Einbettung

Fügen Sie Ihren AI-Chatbot in Sekunden zu jeder Website hinzu — mit unserem einfachen Embed-Code.

Schnellstart

Fügen Sie diesen Code vor dem schließenden </body>-Tag ein:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

Das war's! Ihr Chatbot ist jetzt auf Ihrer Website live.

So finden Sie Ihre Chatbot-ID

1. Gehen Sie zu den Einstellungen Ihres Chatbots
2. Navigieren Sie zum Embed-Tab
3. Kopieren Sie den Embed-Code (enthält Ihre ID)

Anpassung des Widgets

Aussehen und Verhalten des Widgets werden in Ihrem Dashboard konfiguriert — nicht im Embed-Code. Gehen Sie zu Dashboard → Chatbots → [Ihr Chatbot] → Widget, um anzupassen:

• Position — unten rechts, unten links oder inline
• Farben — Primär-, Hintergrund- und Textfarben sowie Border-Radius
• Größe — Widget-Breite und -Höhe

Um den Chat automatisch nach einer konfigurierbaren Verzögerung zu öffnen, aktivieren Sie Auto-Open im Behavior-Tab derselben Einstellungsseite.

Änderungen werden automatisch auf Ihrer Website angewendet — kein Aktualisieren des Embed-Codes erforderlich. Siehe die Widget Customization-Anleitung für alle verfügbaren Optionen.

Die Widget-Sprache wird automatisch anhand der Browsersprache des Besuchers erkannt, basierend auf den Sprachen, die Sie im Languages-Tab Ihres Chatbots aktivieren.

FAQ-Widget

Zeigen Sie FAQs als Akkordeon auf jeder Seite an:

<div id="chatreact-faq"></div>
<script 
  src="https://www.chatreact.ai/embed/faq-widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  async
></script>

Das FAQ-Widget zeigt veröffentlichte FAQs Ihres Chatbots. Farben und Styling (Primär-, Hintergrund- und Textfarben, Border-Radius) werden in Dashboard → FAQs → Settings konfiguriert.

Optionen des FAQ-Widgets

Beispiel: Kategorie-Filter

<script
  src="https://www.chatreact.ai/embed/faq-widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-categories="shipping,returns"
  async
></script>

Mobile-Optimierung

Das Chat-Widget ist vollständig für mobile Geräte optimiert:

• Vollbreiten-Layout auf kleinen Bildschirmen
• Hochfahr-Animation beim Öffnen
• iOS-Tastaturbehandlung (Widget passt sich an die Bildschirmtastatur an)
• Safe-Area-Unterstützung für iPhone Notch und Home Indicator
• Größere Touch-Ziele für bessere Bedienbarkeit
• Eingabe-Schriftgröße verhindert iOS Auto-Zoom

Plattform-spezifische Anleitungen

WordPress

Empfohlen: Verwenden Sie das offizielle ChatReact WordPress Plugin für die einfachste Integration mit Gutenberg-Blocks, Elementor-Widgets und Shortcodes.

Alternative: Manuelle Einbettung über ein "Header/Footer Scripts"-Plugin:

1. Installieren Sie ein beliebiges "Header/Footer Scripts"-Plugin
2. Fügen Sie den Embed-Code in den Footer-Bereich ein
3. Speichern und veröffentlichen

Shopify

Empfohlen: ChatReact Shopify App

Installieren Sie die ChatReact-App aus dem Shopify App Store für die einfachste Integration:

1. Installieren Sie die ChatReact-App in Ihrem Shopify-Admin
2. Geben Sie Ihre Chatbot-ID in den App-Einstellungen ein
3. Das Chat-Widget erscheint automatisch in Ihrem Storefront
4. Verwalten Sie Widget-Zuordnungen pro Seite oder aktivieren Sie es überall

Die App unterstützt außerdem Form- und FAQ-Widgets als App Blocks im Theme Editor.

Alternative: Manuelle Einbettung

1. Gehen Sie zu Online Store → Themes → Edit Code
2. Öffnen Sie theme.liquid
3. Fügen Sie den Code vor </body> ein
4. Speichern

Webflow

1. Gehen Sie zu Project Settings → Custom Code
2. In Footer Code einfügen
3. Site veröffentlichen

Next.js / React

Verwenden Sie die Script-Komponente:

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script 
        src="https://www.chatreact.ai/embed/widget.js"
        data-chatbot-id="YOUR_CHATBOT_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

Vue.js

Fügen Sie es in Ihre Haupt-App.vue oder Ihr Layout ein:

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://www.chatreact.ai/embed/widget.js';
  script.dataset.chatbotId = 'YOUR_CHATBOT_ID';
  script.async = true;
  document.body.appendChild(script);
});
</script>

JavaScript-API

Interagieren Sie programmgesteuert mit dem Widget:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

// Toggle open/closed
ChatReact.toggle();

// Start a fresh conversation
ChatReact.newChat();

// Remove the widget from the page entirely
// (useful in single-page apps, e.g. on route changes)
ChatReact.destroy();

Testen

Vorschau-Modus

Vor der Live-Einbettung:

1. Verwenden Sie die Preview-Funktion in Ihrem Dashboard
2. Testen Sie verschiedene Szenarien
3. Überprüfen Sie, ob die Antworten korrekt sind

Fehlerbehebung

Widget erscheint nicht

1. Prüfen Sie die Browser-Konsole auf Fehler
2. Verifizieren Sie, dass die Chatbot-ID korrekt ist
3. Stellen Sie sicher, dass der Chatbot aktiv ist (nicht deaktiviert)
4. Prüfen Sie, ob Werbeblocker stören
5. Überprüfen Sie Ihre Plan-Nutzung — das Widget pausiert, wenn das monatliche Limit Ihres Plans erreicht ist

Caching- & Optimierungs-Plugins

Einige Caching- oder Skript-Optimierungs-Plugins schreiben Script-URLs um, was dazu führen kann, dass das Widget nicht geladen wird. Falls das passiert, fügen Sie eine explizite API-URL zum Script-Tag hinzu:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-api-url="https://www.chatreact.ai"
  async
></script>

Dasselbe Attribut funktioniert auch bei den FAQ- und Formular-Widget-Skripts.

Styling-Konflikte

Wenn das CSS Ihrer Seite in Konflikt steht:

• Das Widget kapselt seine Styles innerhalb seines eigenen Containers und verwendet hochprioritäre Regeln, um Konflikten zu widerstehen
• Prüfen Sie die z-index-Werte von Elementen, die das Widget überlappen
• Vermeiden Sie allgemeine !important-Regeln in Ihrem Site-CSS, die generische Elemente ansprechen

Performance

Das Widget ist für minimalen Einfluss ausgelegt:

• Lädt asynchron — blockiert niemals das Rendering Ihrer Seite
• Leichtgewichtig: ungefähr 30 KB komprimierte Übertragungsgröße

Nächste Schritte

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — Betten Sie eigenständige Formulare mit dem Form-Widget ein