Widget-Einbettung

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

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="IHRE_CHATBOT_ID" 
  async
></script>

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

Ihre Chatbot-ID finden

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

Oder finden Sie die ID in Ihrer Dashboard-URL: /dashboard/company/chatbots/[CHATBOT_ID]

Widget-Optionen

Passen Sie das Widget mit Datenattributen an:

Grundlegende Optionen

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="IHRE_CHATBOT_ID"
  data-position="bottom-right"
  data-language="de"
  async
></script>

Attribut	Werte	Standard
`data-position`	`bottom-right`, `bottom-left`	`bottom-right`
`data-language`	Beliebiger Sprachcode	Auto-Erkennung
`data-open`	`true`, `false`	`false`

Farbüberschreibungen

Überschreiben Sie Dashboard-Einstellungen mit Inline-Farben:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="IHRE_CHATBOT_ID"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

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="IHRE_CHATBOT_ID"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

Das FAQ-Widget zeigt veröffentlichte FAQs Ihres Chatbots.

Plattform-spezifische Anleitungen

WordPress

Installieren Sie ein "Header/Footer Scripts"-Plugin
Fügen Sie den Embed-Code im Footer-Bereich ein
Speichern und veröffentlichen

Shopify

Empfohlen: ChatReact Shopify App

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

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

Die App unterstützt auch Formular- und FAQ-Widgets als App Blocks im Theme Editor.

Alternative: Manuelle Einbettung

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

Webflow

Gehen Sie zu Project Settings → Custom Code
Fügen Sie zum Footer Code hinzu
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="IHRE_CHATBOT_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

Vue.js

Fügen Sie zu Ihrer Haupt-App.vue oder Layout hinzu:

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

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

JavaScript API

Interagieren Sie programmatisch mit dem Widget:

// Chat öffnen
ChatReact.open();

// Chat schließen
ChatReact.close();

// Öffnen/Schließen umschalten
ChatReact.toggle();

// Nachricht senden
ChatReact.sendMessage('Hallo!');

// Benutzerdaten setzen
ChatReact.setUser({
  name: 'Max Mustermann',
  email: '[email protected]'
});

Testen

Vorschau-Modus

Vor der Live-Einbettung:

Nutzen Sie die Vorschau-Funktion in Ihrem Dashboard
Testen Sie verschiedene Szenarien
Überprüfen Sie die Genauigkeit der Antworten

Lokale Entwicklung

Für lokales Testen verwenden Sie localhost-URLs:

<script 
  src="http://localhost:3000/embed/widget.js" 
  data-chatbot-id="IHRE_CHATBOT_ID" 
  async
></script>

Fehlerbehebung

Widget erscheint nicht

Prüfen Sie die Browser-Konsole auf Fehler
Verifizieren Sie, dass die Chatbot-ID korrekt ist
Stellen Sie sicher, dass der Chatbot aktiv ist (nicht deaktiviert)
Prüfen Sie, ob Werbeblocker stören

Styling-Konflikte

Wenn das CSS Ihrer Website Konflikte verursacht:

Widget verwendet Shadow DOM zur Isolation
Prüfen Sie z-index-Werte
Stellen Sie sicher, dass keine !important-Überschreibungen vorhanden sind

Performance

Das Widget ist für minimale Auswirkungen konzipiert:

Lazy Loading
< 50KB Gesamtgröße
Nicht-blockierend
Aggressives Caching