Shopify-Integration
Fügen Sie ChatReact AI-Chatbots, Kontaktformulare und FAQ-Akkordeons zu Ihrem Shopify-Shop mit der offiziellen ChatReact Shopify App hinzu.
Installation
- Installieren Sie die ChatReact App aus dem Shopify App Store
- Öffnen Sie die App in Ihrem Shopify-Admin-Bereich
Keine separate Konto-Verbindung ist erforderlich — Sie verknüpfen die App mit Ihren Chatbots und Formularen, indem Sie deren IDs aus dem ChatReact-Dashboard einfügen.
Funktionen
Die Shopify-App bietet drei Widget-Typen:
| Widget | Beschreibung | Platzierung |
|---|---|---|
| Chat Widget | AI-Chatbot mit Live-Chat-Unterstützung | Site-weit oder auf bestimmten Seiten über App Embed |
| Form Widget | Kontaktformulare mit Spam-Schutz | Inline über App Block im Theme Editor |
| FAQ Widget | FAQ-Anzeige im Akkordeon-Stil | Inline über App Block im Theme Editor |
Einrichtung des Chat Widget
Die Einrichtung des Chat Widgets erfolgt in zwei Schritten: Erstellen Sie eine Widget-Zuordnung in der ChatReact-App und aktivieren Sie dann das App Embed in Ihrem Theme.
Schritt 1: Erstellen einer Widget-Zuordnung
- Öffnen Sie die ChatReact-App in Ihrem Shopify-Admin
- Klicken Sie auf der Chat Widget-Registerkarte auf Add Assignment
- Geben Sie Ihre Chatbot ID ein (zu finden im ChatReact-Dashboard unter Settings → Embed)
- Klicken Sie auf Save Assignment
Schritt 2: Aktivieren des App Embed
- Gehen Sie zu Online Store → Themes → Edit theme
- Klicken Sie auf das App embeds-Symbol (Puzzleteil) in der linken unteren Seitenleiste
- Schalten Sie ChatReact Chat Widget auf ON
- Klicken Sie auf Save
Sie müssen das App Embed nur einmal aktivieren. Danach steuern Sie, wo das Widget erscheint, vollständig über die ChatReact-App.
Das Chat Widget erscheint auf jeder Seite, die von einer Ihrer Widget-Zuordnungen abgedeckt wird.
Widget-Zuordnungen
Jede Zuordnung verknüpft einen Chatbot mit Ihrem Storefront. Es gibt zwei Zuordnungsarten:
- Everywhere: Widget erscheint auf allen Seiten (Standard). Sie können optional Exclude URLs hinzufügen — ein Pfad pro Zeile, mit
*Wildcards unterstützt (z. B./blogs/*) - Specific Page: Widget erscheint nur auf dem von Ihnen eingegebenen Seitenpfad (z. B.
/pages/about)
Wenn eine Seite ihre eigene Specific Page-Zuordnung hat, wird dort dieser Chatbot anstelle des Everywhere-Chatbots angezeigt.
Hinzufügen von Form- und FAQ-Widgets
Form- und FAQ-Widgets werden als App Blocks im Theme Editor hinzugefügt:
- Gehen Sie zu Online Store → Themes → Edit theme
- Navigieren Sie zu der Seite, auf der Sie das Widget wünschen
- Klicken Sie auf Add block und suchen Sie nach "ChatReact"
- Wählen Sie ChatReact Form oder ChatReact FAQ
- Geben Sie die Form ID oder Chatbot ID in den Block-Einstellungen ein
Manuelles Einbetten (Liquid)
Wenn Sie Vorlagen lieber direkt bearbeiten, können Sie die Widgets auch in jede Liquid-Vorlage hinzufügen:
<!-- Form widget -->
<div id="chatreact-form"></div>
<script src="https://www.chatreact.ai/embed/form.js"
data-form-id="YOUR_FORM_ID"
data-container="chatreact-form"
async></script>
<!-- FAQ widget -->
<div id="chatreact-faq"></div>
<script src="https://www.chatreact.ai/embed/faq-widget.js"
data-chatbot-id="YOUR_CHATBOT_ID"
data-container="chatreact-faq"
async></script>
Styling des Form Widget
Passen Sie das Erscheinungsbild des Formulars im Theme Editor an:
| Einstellung | Optionen |
|---|---|
| Alignment | Left, Center, Right |
| Max Width | 200–1200px |
| Font Size | 12–28px |
| Margin Bottom | 0–120px |
| Language | Auto-detect (Standard) oder eine von 24 Sprachen |
Styling des FAQ Widget
| Einstellung | Optionen |
|---|---|
| Categories | Optionale, durch Kommas getrennte Kategorie-Slugs (z. B. general,pricing), um nur ausgewählte FAQ-Kategorien anzuzeigen |
| Font Size | 12–28px |
| Margin Bottom | 0–120px |
| Language | Auto-detect (Standard) oder eine von 24 Sprachen |
Verwaltung der Widgets
Die ChatReact-App in Ihrem Shopify-Admin bietet drei Registerkarten:
- Chat Widget — Erstellen und verwalten Sie die Widget-Zuordnungen, die steuern, welche Seiten das Chat Widget anzeigen
- Forms — Schritt-für-Schritt-Einbettungsanweisungen, das manuelle Liquid-Snippet und wo Sie Ihre Form ID finden
- FAQ Widget — Einbettungsanweisungen für das FAQ-Widget und wo Sie Ihre Chatbot ID finden
Die Auswahl von Formularen und FAQs erfolgt im Theme Editor: Geben Sie die Form ID oder Chatbot ID in den Block-Einstellungen ein.
Sprachunterstützung
Die App unterstützt alle 24 EU-Sprachen:
- Das Chat Widget erkennt automatisch die Browsersprache jedes Besuchers und gleicht sie mit den unterstützten Sprachen Ihres Chatbots ab; falls keine Übereinstimmung besteht, fällt es auf die primäre Sprache des Chatbots zurück
- Die Form- und FAQ-Blöcke haben jeweils ihre eigene Language-Einstellung im Theme Editor — standardmäßig auf Auto-detect gesetzt und kann pro Block überschrieben werden
Deinstallation
Wenn Sie die ChatReact-App deinstallieren, werden alle Widget-Konfigurationen und gespeicherten Daten automatisch aus Ihrem Shopify-Shop entfernt.