Cum să utilizezi un deep link pentru a deschide fereastra de chat (fără să editezi codul temei)

Poți deschide fereastra de chat folosind un deep link, fără să modifici codul temei. În Editorul de teme Shopify, adaugă pur și simplu hashtagul #shoply-ai-chatbot oricărui buton, pictograme sau element text. Când clienții fac clic pe aceste elemente, fereastra de chat se va deschide automat.

Exemplu live: demo.shoplyai.ai

Pași:

Editează butonul, textul sau pictograma dorită în editorul temei.
Setează linkul sau URL-ul la #shoply-ai-chatbot.

Exemple:

Utilizează un buton pentru a deschide fereastra de chat:

Utilizează un text cu link pentru a deschide fereastra de chat:

Deschiderea chatului cu o întrebare precompletată

Dorești să deschizi fereastra de chat și să trimiți automat o întrebare? Poți face acest lucru folosind fie un fragment hash (recomandat), fie un parametru de interogare URL.

Este ideal pentru crearea de linkuri directe către subiecte obișnuite, precum politica de livrare, politica de retur sau întrebări despre produse.

Recomandat: fragment hash (fără reîncărcarea paginii)

Utilizează fragmentul hash #shoply_question=. Deoarece hash-ul este procesat în întregime în browser, făcând clic pe acest link nu se va reîncărca pagina, iar istoricul existent al chatului va fi păstrat.

Format:

plaintext


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

Exemple:

Politica de livrare: https://your-store.com#shoply_question=What is your shipping policy?
Retururi: https://your-store.com#shoply_question=How do I return an item?
Starea comenzii: https://your-store.com#shoply_question=Where is my order?
Descoperirea produselor: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Poți combina acest lucru cu orice pagină din magazinul tău. De exemplu, pentru a deschide chatbotul cu o întrebare pe o anumită pagină de produs:

plaintext


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

Moștenit: parametru de interogare URL

Parametrul de interogare ?shoply_question= este în continuare acceptat pentru compatibilitate cu versiunile anterioare. Reține că adăugarea unui parametru de interogare la URL-ul pe care se află deja clientul va provoca o reîncărcare a paginii.

Format:

plaintext


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

Notă: Nu uita să codifici întrebarea în URL atunci când utilizezi caractere speciale sau spații. Majoritatea browserelor vor face acest lucru automat, dar dacă adaugi linkuri programatic, folosește o codificare URL corectă (de exemplu, spațiile devin %20).

Când un client face clic pe oricare dintre cele două tipuri de linkuri, fereastra de chat se va deschide automat, iar întrebarea va fi trimisă chatbotului AI, oferind un răspuns instantaneu.

Cazuri de utilizare:

Adaugă în subsol un link „Întreabă despre livrare”
Creează coduri QR care deschid chatbotul cu întrebări specifice
Include linkuri utile în campaniile tale de e-mail sau în confirmările comenzilor
Adaugă linkuri de ajutor contextuale pe paginile produselor (de exemplu, „Întreabă despre mărime”)

Cum să utilizezi un deep link pentru a deschide fereastra de chat (este necesară editarea codului în șablonul temei)

În secțiunea anterioară, am discutat despre utilizarea hashtagului (deep linkului) pentru a declanșa fereastra de chat, adăugându-l oricărui buton, pictograme sau text direct din Editorul de teme, fără să editezi codul temei.

Totuși, dacă dorești flexibilitate deplină pentru a adăuga deep linkul oriunde în magazinul tău (de exemplu, pentru a crea o pictogramă nouă în antet), va trebui să editezi codul șablonului.

Mai jos găsești exemple simple de cod HTML pe care le poți utiliza pentru a crea pictograme noi în șablonul temei:

Exemple de cod

1. Pictograma de chat

Codul de mai jos adaugă o pictogramă de chat:

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. Pictograma stea AI

Codul de mai jos adaugă o stea AI:

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. Metoda de apelare a funcției

Pe lângă utilizarea hashtagurilor, poți adăuga și apelul funcției openShoplyAIChatBot() în atributul onclick al oricărui buton/unei pictograme, astfel încât clienții să vadă fereastra de chat când fac clic pe buton/pictogramă.

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>

Ai nevoie de ajutor?

Poți utiliza oricare dintre exemplele de mai sus și poți insera codul lângă pictograma de căutare din fișierul sections/header.liquid pentru a adăuga deep linkul de chat în antetul magazinului.

Totuși, dacă nu te simți complet confortabil să editezi codul din șablonul temei, nu-ți face griji!

Nu ezita să programezi o întâlnire cu noi , iar noi te vom ajuta cu plăcere să configurezi pictograma perfectă în locul ideal, potrivit stilului unic al magazinului tău.

Cum ascunzi pictograma plutitoare?

După ce configurezi deep linkul pentru a deschide fereastra de chat, este posibil să dorești să ascunzi pictograma plutitoare. De asemenea, proprietarii magazinelor menționează adesea că prea multe pictograme plutitoare pe site-urile lor pot fi copleșitoare. Îți înțelegem preocupările! De aceea am introdus o funcție pentru ascunderea pictogramei de chat.

În secțiunea „Personalizează chatul AI” din consola de administrare a aplicației, în setările Selectează o pictogramă de chat, poți selecta acum opțiunea:

„Ascunde pictograma plutitoare și utilizează deep linkul pentru a deschide chatul”.

Aceasta îți permite să ascunzi pictograma plutitoare, păstrând în același timp posibilitatea de a deschide fereastra de chat printr-un deep link.