So erstellen Sie einen FlowHunt KI-Chatbot für Shopify

Diese Anleitung führt Sie durch das Verbinden von FlowHunt mit Ihrem Shopify-Shop, das Hinzufügen eines vorgefertigten Shopify-Chatbot-Flows, das Veröffentlichen und das Einbetten des Chatbots in Ihrem Shop-Frontend.

Voraussetzungen

• Ein Shopify-Shop mit Admin-Zugriff
• Ein FlowHunt-Konto mit Zugriff auf einen Workspace: https://app.flowhunt.io/
• Wichtig: Verwenden Sie für Ihr FlowHunt-Konto dieselbe E-Mail-Adresse wie für Ihr Shopify-Admin-Konto.

1) Shopify mit FlowHunt integrieren (über Shopify App Store)

1. Öffnen Sie den Shopify App Store und suchen Sie nach „FlowHunt“.
2. Klicken Sie auf Installieren und wählen Sie ggf. den richtigen Shop aus.
3. Überprüfen Sie die angeforderten Berechtigungen und klicken Sie auf App installieren / Autorisieren.

Nach der Installation werden Sie zu Shopify und/oder FlowHunt weitergeleitet. Die Verbindung wird über den Marketplace-Installationsfluss hergestellt.

2) FlowHunt-App in Ihrem Shopify-Shop installieren

1. Überprüfen Sie im Shopify-Autorisierungsfenster die angeforderten Berechtigungen.
2. Klicken Sie auf App installieren, um die Installation abzuschließen.

3) Bestätigen, dass die Shopify-Integration aktiviert ist

Nach erfolgreicher Installation kehren Sie zu FlowHunt → Integrationen zurück. Sie sollten sehen, dass Shopify als Verbunden/Aktiviert markiert ist.

Wenn es nicht aktiviert ist, klicken Sie erneut auf Verbinden und folgen Sie dem Autorisierungsprozess.

4) Einen Shopify-Chatbot aus der Flow-Bibliothek hinzufügen

1. Gehen Sie in FlowHunt zur Flow-Bibliothek.
2. Suchen Sie nach „Shopify Chatbot“.
3. Öffnen Sie die Vorlage und klicken Sie auf Zum Workspace hinzufügen.

Damit wird ein einsatzbereiter Shopify-Chatbot-Flow zu Ihrem Workspace hinzugefügt.

5) Den Chatbot für Ihre Marke anpassen

Öffnen Sie den soeben hinzugefügten Flow und passen Sie Folgendes an:

• System-Prompt und Tonfall: Legen Sie Ihre Markenstimme und Leitplanken fest.
• Wissensquellen: Verbinden Sie Ihren Produktkatalog, FAQ, Richtlinien oder andere Dokumente.
• Tools und Aktionen: Aktivieren Sie ggf. Bestellabfrage, Statusprüfungen oder CRM-Updates, sofern Ihr Plan und Setup dies ermöglichen.
• UI/Branding: Konfigurieren Sie Widget-Namen, Begrüßungen und sichtbare Labels später im Bereich Chatbots.

Speichern Sie Ihre Änderungen, wenn Sie fertig sind.

6) Den Flow veröffentlichen

Klicken Sie auf Veröffentlichen im Flow, damit er von einem Chatbot auf Ihrer Website/Ihrem Shop genutzt werden kann.

7) Einen neuen Integrationscode (Chatbot) erstellen

1. Gehen Sie in FlowHunt zu Chatbots.
2. Klicken Sie auf Neuer Integrationscode.
3. Wählen Sie den oben erstellten veröffentlichten Flow aus.
4. Konfigurieren Sie Widget-Optionen (Theme, Position, Öffnungsverhalten, Sprache, Domain-Whitelist usw.).
5. Speichern. FlowHunt generiert daraufhin ein Script-Snippet (Ihren Integrationscode).

Bewahren Sie dieses Snippet auf—Sie werden es im nächsten Schritt in Ihr Shopify-Theme einfügen.

8) Den Chatbot auf Ihrem Shopify-Storefront einbetten

Sie können den Integrationscode auf zwei Arten hinzufügen. Wählen Sie die Variante, die am besten zu Ihren Anforderungen passt.

Variante A — In theme.liquid einfügen (shopweit)

Mit dieser Methode wird der Chatbot auf jeder Seite Ihres Shops angezeigt. Gehen Sie wie folgt vor:

Schritt 1: Navigieren Sie in Ihrem Shopify-Admin zu Onlineshop > Themes

Schritt 2: Klicken Sie auf die Anpassen-Schaltfläche neben Ihrem aktiven Theme
Schritt 3: Klicken Sie oben links auf die 3 Punkte (⋯) und wählen Sie Code bearbeiten

Schritt 4: Suchen Sie Ihre theme.liquid-Datei im Layout-Ordner (/layout/theme.liquid)

Schritt 5: Fügen Sie den Integrationscode direkt vor dem schließenden </body>-Tag ein
Schritt 6: Speichern Sie Ihre Änderungen mit Strg + S (oder Cmd + S am Mac)

Nach dem Speichern besuchen Sie Ihr Storefront und aktualisieren Sie die Seite. Der Chatbot sollte auf allen Seiten erscheinen.

Wichtige Hinweise:

• Das Einfügen vor </body> sorgt dafür, dass das Widget auf jeder Seite geladen wird
• Lassen Sie das FlowHunt-Snippet unverändert
• Der Chatbot erscheint auf allen Seiten Ihres Shops

Variante B — Über einen Custom Liquid Abschnitt (spezifische Seiten)

Mit dieser Methode können Sie den Chatbot nur auf bestimmten Seiten oder Templates anzeigen lassen. Perfekt, wenn Sie den Chatbot z.B. nur auf Produktseiten oder speziellen Landingpages wünschen.

Schritt 1: Gehen Sie zu Onlineshop > Themes und klicken Sie neben Ihrem aktiven Theme auf Anpassen

Schritt 2: Navigieren Sie zu dem spezifischen Template, zu dem Sie den Chatbot hinzufügen möchten (z. B. Produktseiten, Kategorieseiten oder bestimmte Seiten)

Schritt 3: Klicken Sie auf Abschnitt hinzufügen oder Block hinzufügen (abhängig von Ihrem Theme)
Schritt 4: Suchen Sie Custom Liquid und wählen Sie es aus
Schritt 5: Fügen Sie Ihren FlowHunt-Integrationscode in das Custom Liquid-Inhaltsfeld ein

Schritt 6: Klicken Sie auf Speichern und dann auf Vorschau, um den Chatbot in diesem Template zu testen

Wichtige Hinweise:

• Mit dieser Methode steuern Sie exakt, wo der Chatbot erscheint
• Sie müssen die Schritte für jedes Template wiederholen, auf dem Sie den Chatbot anzeigen möchten
• Ideal, um den Chatbot vorab auf ausgewählten Seiten zu testen, bevor Sie ihn shopweit ausrollen
• Der Chatbot erscheint nur auf den von Ihnen konfigurierten Templates

Überprüfung und Test

• Öffnen Sie Ihr Storefront in einem Inkognito-/Privatfenster, um zwischengespeicherte Assets zu vermeiden.
• Stellen Sie typische Fragen (Versand, Rückgabe, Produktverfügbarkeit), um den Flow zu validieren.
• Überprüfen Sie die Gesprächsprotokolle in FlowHunt (aktivieren Sie bei Bedarf „Verbose“), um zu sehen, welche Dokumente oder Tools verwendet wurden.

Fehlerbehebung

• Chatbot wird nicht angezeigt: Stellen Sie sicher, dass der Integrationscode auf der Seite eingebunden ist, Ihr Theme veröffentlicht ist und die Domain in den Chatbot-Einstellungen erlaubt ist.
• Doppelte Widgets: Entfernen Sie doppelte Snippets und lassen Sie nur einen aktiven Integrationscode.
• Fehlende Antworten: Überprüfen Sie die Wissensquellen und Document Retriever-Einstellungen im Flow und veröffentlichen Sie erneut.
• Shopify-Berechtigungsfehler: Verbinden Sie Shopify in FlowHunt → Integrationen erneut und installieren Sie ggf. neu.