WebChatAgent Logo

KI-Chatbot zu Shopify hinzufügen

Shopify

Fügen Sie Ihrem Shopify-Store in wenigen Minuten einen KI-Chatbot hinzu. Sie müssen keine App installieren, sondern fügen lediglich ein kleines Snippet in Ihr Theme ein, und die Chat-Blase erscheint im gesamten Store. Nutzen Sie zuerst die Methode über den Theme-Editor. Bearbeiten Sie den Theme-Code nur dann, wenn Ihr Theme keine benutzerdefinierten Blöcke unterstützt.

Methode 1: Theme-Editor (Empfohlen)

  1. Theme-Editor öffnen, Gehen Sie in Ihrem Shopify-Adminbereich zu Online Store > Themes und klicken Sie bei Ihrem aktiven Theme auf Anpassen.
  2. Custom-Liquid-Block hinzufügen, Scrollen Sie in der linken Seitenleiste nach unten und klicken Sie auf Abschnitt hinzufügen. Suchen Sie nach Custom Liquid (oder je nach Theme nach Custom HTML).
  3. Code einfügen, Geben Sie den folgenden Code ein:
<script src="https://webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent chatbot-id="YOUR_ID"></web-chat-agent>
  1. YOUR_ID ersetzen, Ersetzen Sie YOUR_ID durch Ihre tatsächliche Chatbot-ID aus dem WebChatAgent-Dashboard.
  2. Speichern, Klicken Sie oben rechts auf Speichern. Das Chat-Widget erscheint nun in Ihrem Store.

Methode 2: Theme-Code bearbeiten

Verwenden Sie diese Methode, wenn Ihr Theme keine Custom-Liquid-Abschnitte unterstützt oder wenn Sie das Widget auf jeder Seite anzeigen möchten.

  1. Gehen Sie zu Online Store > Themes, klicken Sie auf die drei Punkte (⋯) neben Ihrem aktiven Theme und wählen Sie Code bearbeiten.
  2. Öffnen Sie im Ordner Layout die Datei theme.liquid.
  3. Fügen Sie den folgenden Code vor dem schließenden </body>-Tag ein:
<script src="https://webchatagent.com/widget/web-chat-agent.js" async></script>
<web-chat-agent chatbot-id="YOUR_ID"></web-chat-agent>
  1. Ersetzen Sie YOUR_ID durch Ihre Chatbot-ID und klicken Sie auf Speichern.

Chatbot-ID finden

Melden Sie sich in Ihrem WebChatAgent-Dashboard an, öffnen Sie Ihren Assistent und navigieren Sie zu Kanäle → Chat-Widget. Klappen Sie Installationsdetails anzeigen auf und klicken Sie auf Code kopieren. Das Snippet enthält bereits Ihre Chatbot-ID, sodass Sie den gesamten Code einfügen können, anstatt die ID manuell einzutippen.

Fehlerbehebung

  • Widget wird nicht angezeigt?, Leeren Sie den Cache Ihres Shopify-Themes und öffnen Sie Ihren Store in einem Inkognito-Fenster.
  • Widget nur auf bestimmten Seiten?, Wenn Sie Methode 1 verwendet haben, stellen Sie sicher, dass der Custom-Liquid-Abschnitt in einem Template platziert ist, das auf allen Seiten geladen wird (z. B. im Footer-Bereich).
  • Konflikte mit anderen Apps?, Deaktivieren Sie andere Chat- oder Popup-Apps vorübergehend, um Konflikte auszuschließen.