So verwendest du einen Deep Link, um das Chatfenster zu öffnen (ohne Theme-Code zu bearbeiten)

Du kannst das Chatfenster über einen Deep Link öffnen, ohne den Code deines Themes zu ändern. Füge im Shopify Theme Editor einfach das Hashtag #shoply-ai-chatbot zu einer beliebigen Schaltfläche, einem Symbol oder einem Textelement hinzu. Wenn Kunden auf diese Elemente klicken, wird das Chatfenster automatisch geöffnet.

Live-Beispiel: demo.shoplyai.ai

Schritte:

Bearbeite die gewünschte Schaltfläche, den Text oder das Symbol in deinem Theme-Editor.
Setze den Link oder die URL auf #shoply-ai-chatbot.

Beispiele:

Verwende eine Schaltfläche, um das Chatfenster zu öffnen:

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

Chat mit einer vorausgefüllten Frage öffnen

Möchtest du das Chatfenster öffnen und automatisch eine Frage senden? Du kannst dafür entweder ein Hash-Fragment (empfohlen) oder einen URL-Abfrageparameter verwenden.

Das eignet sich perfekt, um direkte Links zu häufigen Themen wie Versandrichtlinien, Rückgaberichtlinien oder Produktanfragen zu erstellen.

Empfohlen: Hash-Fragment (kein 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 deines Shops kombinieren. Um den Chatbot beispielsweise mit einer Frage auf einer bestimmten Produktseite zu öffnen:

plaintext


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

Veraltet: 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 bei Sonderzeichen oder Leerzeichen URL-kodiert zu verwenden. Die meisten Browser erledigen dies automatisch. Wenn du Links jedoch programmgesteuert hinzufügst, verwende eine korrekte URL-Kodierung (z. B. werden Leerzeichen zu %20).

Wenn ein Kunde auf einen der beiden Linktypen klickt, wird das Chatfenster automatisch geöffnet und die Frage an den AI-Chatbot gesendet, der sofort eine Antwort liefert.

Anwendungsfälle:

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

So verwendest du einen Deep Link, um das Chatfenster zu öffnen (Bearbeitung des Codes in der Theme-Vorlage erforderlich)

Im vorherigen Abschnitt haben wir besprochen, wie du das Hashtag (den Deep Link) direkt im Theme Editor zu einer beliebigen Schaltfläche, einem Symbol oder einem Text hinzufügst, um das Chatfenster zu öffnen, ohne den Code deines Themes zu bearbeiten.

Wenn du jedoch die volle Flexibilität möchtest, den Deep Link an beliebiger Stelle in deinem Shop hinzuzufügen (z. B. durch das Erstellen eines neuen Symbols im Header), musst du den Vorlagencode bearbeiten.

Im Folgenden findest du einfache HTML-Codebeispiele, mit denen du neue Symbole in deiner Theme-Vorlage erstellen kannst:

Codebeispiele

1. Chat-Symbol

Der folgende Code fügt ein Chat-Symbol 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-Sternsymbol

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. Methode mit Funktionsaufruf

Zusätzlich zur Verwendung von Hashtags kannst du den Funktionsaufruf openShoplyAIChatBot() auch in das onclick-Attribut einer beliebigen Schaltfläche oder eines Symbols eintragen, damit Kunden beim Klicken auf die Schaltfläche oder das Symbol das Chatfenster sehen.

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 Suchsymbol in der Datei sections/header.liquid einfügen, um den Chat-Deep-Link zum Header deines Shops hinzuzufügen.

Wenn du dich mit der Bearbeitung des Codes in deiner Theme-Vorlage jedoch nicht ganz wohlfühlst, musst du dir keine Sorgen machen!

Buche gerne ein Gespräch mit uns ; wir helfen dir gerne dabei, das perfekte Symbol an der idealen Stelle einzurichten, passend zum einzigartigen Stil deines Shops.

Wie blendest du das schwebende Symbol aus?

Nachdem du den Deep Link zum Öffnen des Chatfensters eingerichtet hast, möchtest du vielleicht das schwebende Symbol ausblenden. Shopbetreiber erwähnen außerdem häufig, dass zu viele schwebende Symbole auf ihren Websites überladen wirken können. Wir verstehen deine Bedenken! Deshalb haben wir eine Funktion zum Ausblenden des Chat-Symbols eingeführt.

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

Die Option “Hide floating icon and use deep link to open chat”.

Damit kannst du das schwebende Symbol ausblenden und gleichzeitig weiterhin das Öffnen des Chatfensters über einen Deep Link ermöglichen.