So öffnest du das Chatfenster mit einem Link

Du kannst das Chatfenster mit einem Deep Link öffnen, ohne den Code deines Themes zu ändern. Füge im Shopify Theme Editor einfach den Hashtag #shoply-ai-chatbot zu einem beliebigen Button-, Icon- oder Textelement hinzu. Wenn Kund:innen auf diese Elemente klicken, wird das Chatfenster automatisch geöffnet.

Live-Beispiel: demo.shoplyai.ai

Schritte:

Bearbeite den gewünschten Button, Text oder das Icon in deinem Theme Editor.
Setze den Link oder die URL auf #shoply-ai-chatbot.

Beispiele:

Verwende einen Button, um das Chatfenster zu öffnen:

Verwende einen verlinkten Text, um das Chatfenster zu öffnen:

Chat mit produktspezifischen Fragen öffnen

Füge auf einer Produktseite einen Button „Frage zu diesem Produkt?“ hinzu, damit Käufer:innen Fragen zu diesem Artikel stellen können. Setze den Link auf #shoply_product_questions. Beim Klicken wird der Chat mit dem Produktnamen, einer kurzen Produktzusammenfassung und automatisch generierten, zu diesem Produkt passenden Fragen geöffnet.

Öffne im Shopify Theme Editor deine Produktvorlage und füge einen Button oder verlinkten Text mit URL-Unterstützung hinzu oder bearbeite ihn.
Setze die Beschriftung auf „Frage zu diesem Produkt?“ und den Link auf #shoply_product_questions.
Speichere, öffne eine Produktseite und klicke auf den Link, um die Produktfragen zu prüfen.

Wenn dein Theme keine passende Button- oder Link-Einstellung bietet, füge diesen Link in das HTML der Produktvorlage ein:

html


<a href="#shoply_product_questions">Question About This Product?</a>

Verwende diesen Link auf einer Produktseite, damit Shoply den Produktkontext hat. Du kannst auch eine vollständige Produkt-URL teilen, die mit #shoply_product_questions endet.

Probiere den Chat für Produktfragen für Bent 85 Skis aus . Die Vorschläge enthalten Fragen zu Ski-Gewicht, Kern, Rocker-Profil und Topsheet-Grafik. Käufer:innen können einen Vorschlag auswählen oder ihre eigene Frage eingeben.

Beispiele dafür, wo du diese Links verwenden kannst, findest du unter KI-gestützte Produktfragen in unserem Leitfaden zum Ersetzen deiner FAQ-Seite.

Diese Produktfragen werden automatisch generiert. Die Startfragen, die du unter Customize AI Chat konfigurierst, gelten stattdessen für das normale Öffnen des Chats.

Chat mit einer vorausgefüllten Frage öffnen

Möchtest du das Chatfenster öffnen und automatisch eine Frage senden? Das geht entweder mit einem Hash-Fragment (empfohlen) oder einem URL-Abfrageparameter.

Das ist ideal, um direkte Links zu häufigen Themen wie Versandrichtlinien, Rückgaberichtlinien oder Produktanfragen zu erstellen.

Empfohlen: Hash-Fragment (ohne Neuladen der Seite)

Verwende das Hash-Fragment #shoply_question=. Da der Hash vollständig im Browser verarbeitet wird, wird die Seite beim Klicken auf diesen Link nicht neu geladen, und ein vorhandener Chatverlauf bleibt erhalten.

Format:

plaintext


https://your-store.com#shoply_question=your question here

Beispiele:

Versandrichtlinie: https://your-store.com#shoply_question=What is your shipping policy?
Rückgaben: https://your-store.com#shoply_question=How do I return an item?
Bestellstatus: https://your-store.com#shoply_question=Where is my order?
Produktsuche: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Du kannst dies mit jeder Seite in deinem Shop kombinieren. Zum Beispiel, um den Chatbot mit einer Frage auf einer bestimmten Produktseite zu öffnen:

plaintext


https://your-store.com/products/blue-jacket#shoply_question=What sizes are available?

Ältere Variante: URL-Abfrageparameter

Der Abfrageparameter ?shoply_question= wird aus Gründen der Abwärtskompatibilität weiterhin unterstützt. Beachte, dass das Anhängen eines Abfrageparameters an eine URL, auf der sich der Kunde bereits befindet, ein Neuladen der Seite verursacht.

Format:

plaintext


https://your-store.com?shoply_question=your question here

Hinweis: Denke daran, deine Frage per URL zu kodieren, wenn du Sonderzeichen oder Leerzeichen verwendest. Die meisten Browser erledigen das automatisch, aber wenn du Links programmatisch hinzufügst, verwende eine korrekte URL-Kodierung (z. B. werden Leerzeichen zu %20).

Wenn Kund:innen auf einen dieser Linktypen klicken, wird das Chatfenster automatisch geöffnet und die Frage an den KI-Chatbot gesendet, der sofort eine Antwort liefert.

Anwendungsfälle:

Füge in deinem Footer einen Link „Frage zum Versand“ hinzu
Erstelle QR-Codes, die den Chatbot mit bestimmten Fragen öffnen
Füge hilfreiche Links in deine E-Mail-Kampagnen oder Bestellbestätigungen ein
Ergänze kontextbezogene Hilfelinks auf Produktseiten (z. B. „Frage zur Größe“)

So verwendest du einen Deep Link, um das Chatfenster zu öffnen (Code in der Theme-Vorlage muss bearbeitet werden)

Im vorherigen Abschnitt haben wir erklärt, wie du den Hashtag (Deep Link) verwenden kannst, um das Chatfenster auszulösen, indem du ihn direkt im Theme Editor zu einem beliebigen Button, Icon oder Text hinzufügst — ganz ohne den Code deines Themes zu bearbeiten.

Wenn du jedoch die volle Flexibilität haben möchtest, den Deep Link irgendwo in deinem Shop hinzuzufügen (z. B. indem du ein neues Icon im Header erstellst), musst du den Vorlagencode bearbeiten.

Unten findest du einfache HTML-Codebeispiele, mit denen du neue Icons in deiner Theme-Vorlage erstellen kannst:

Codebeispiele

1. Chat-Icon

Der folgende Code fügt ein Chat-Icon hinzu:

plaintext


<a href="#shoply-ai-chatbot"
   style="display:inline-flex;align-items:center;margin-right:13px">
    <svg viewBox="64 64 896 896" style="height:28px;width:28px;fill:orange">
        <path
            d="M868.2 377.4c-18.9-45.1-46.3-85.6-81.2-120.6a377.26 377.26 0 00-120.5-81.2A375.65 375.65 0 00519 145.8c-41.9 0-82.9 6.7-121.9 20C306 123.3 200.8 120 170.6 120c-2.2 0-7.4 0-9.4.2-11.9.4-22.8 6.5-29.2 16.4-6.5 9.9-7.7 22.4-3.4 33.5l64.3 161.6a378.59 378.59 0 00-52.8 193.2c0 51.4 10 101 29.8 147.6 18.9 45 46.2 85.6 81.2 120.5 34.7 34.8 75.4 62.1 120.5 81.2C418.3 894 467.9 904 519 904c51.3 0 100.9-10.1 147.7-29.8 44.9-18.9 85.5-46.3 120.4-81.2 34.7-34.8 62.1-75.4 81.2-120.6a376.5 376.5 0 0029.8-147.6c-.2-51.2-10.1-100.8-29.9-147.4zm-66.4 266.5a307.08 307.08 0 01-65.9 98c-28.4 28.5-61.3 50.7-97.7 65.9h-.1c-38 16-78.3 24.2-119.9 24.2a306.51 306.51 0 01-217.5-90.2c-28.4-28.5-50.6-61.4-65.8-97.8v-.1c-16-37.8-24.1-78.2-24.1-119.9 0-55.4 14.8-109.7 42.8-157l13.2-22.1-9.5-23.9L206 192c14.9.6 35.9 2.1 59.7 5.6 43.8 6.5 82.5 17.5 114.9 32.6l19 8.9 19.9-6.8c31.5-10.8 64.8-16.2 98.9-16.2a306.51 306.51 0 01217.5 90.2c28.4 28.5 50.6 61.4 65.8 97.8l.1.1.1.1c16 37.6 24.1 78 24.2 119.8-.1 41.7-8.3 82-24.3 119.8zM681.1 364.2c-20.4 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.6 37.1 37.1 37.1s37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1zm-175.2 0c-20.5 0-37.1 16.7-37.1 37.1v55.1c0 20.4 16.7 37.1 37.1 37.1 20.5 0 37.1-16.7 37.1-37.1v-55.1c0-20.5-16.7-37.1-37.1-37.1z" />
    </svg>
</a>

2. KI-Stern-Icon

Der folgende Code fügt einen KI-Stern hinzu:

plaintext


<a href="#shoply-ai-chatbot" style="display:inline-flex;align-items:center">
    <img style="height:28px;width:28px" src="https://[CFN_PRODUCTION_ASSET]/AIStar.svg" alt="Shoply Chatbot"  />
</a>

3. Funktionsaufruf-Methode

Zusätzlich zur Verwendung von Hashtags kannst du auch den Funktionsaufruf openShoplyAIChatBot() in das onclick-Attribut eines beliebigen Buttons/Icons einfügen, sodass Kund:innen das Chatfenster sehen, wenn sie auf den Button/das Icon klicken.

plaintext


<button onclick="openShoplyAIChatBot()" style="border-radius:20px;margin:10px;cursor:pointer;background:black">
    <span style="font-size:13px;color:white;margin:5px">Click to Chat</span>
</button>

Brauchst du Hilfe?

Du kannst jedes der obigen Beispiele verwenden und den Code neben dem Such-Icon in die Datei sections/header.liquid einfügen, um den Chat-Deep-Link zum Header deines Shops hinzuzufügen.

Wenn du dich beim Bearbeiten des Codes in deiner Theme-Vorlage aber nicht ganz wohlfühlst, keine Sorge!

Du kannst gerne ein Meeting mit uns buchen , und wir helfen dir gern dabei, das perfekte Icon an der idealen Stelle einzurichten, passend zum individuellen Stil deines Shops.

Wie blendet man das schwebende Icon aus?

Sobald du den Deep Link zum Öffnen des Chatfensters konfiguriert hast, möchtest du das schwebende Icon vielleicht ausblenden. Außerdem erwähnen Shop-Betreiber:innen oft, dass zu viele schwebende Icons auf ihren Websites überwältigend wirken können. Wir verstehen diese Bedenken! Deshalb haben wir eine Funktion eingeführt, mit der du das Chat-Icon ausblenden kannst.

Im Abschnitt „Customize AI Chat“ in der Admin-Konsole der App kannst du unter den Einstellungen Select a Chat Icon jetzt die folgende Option auswählen:

„Hide floating icon and use deep link to open chat”

Damit kannst du das schwebende Icon ausblenden und das Chatfenster weiterhin per Deep Link öffnen.