Cum să deschizi fereastra de chat cu un link

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

Exemplu live: demo.shoplyai.ai

Pași:

Editează butonul, textul sau iconița dorită în editorul de teme.
Setează linkul sau URL-ul la #shoply-ai-chatbot.

Exemple:

Folosește un buton pentru a deschide fereastra de chat:

Folosește un text cu link pentru a deschide fereastra de chat:

Deschide chatul cu întrebări specifice produsului

Adaugă un buton „Întrebare despre acest produs?” pe o pagină de produs pentru a-i ajuta pe cumpărători să pună întrebări despre acel articol. Setează linkul lui la #shoply_product_questions. Când se dă clic pe el, se deschide chatul cu numele produsului, un scurt rezumat al produsului și întrebări generate automat relevante pentru acel produs.

În Editorul de teme Shopify, deschide șablonul produsului și adaugă sau editează un buton ori un text cu link care acceptă un URL.
Setează eticheta la „Întrebare despre acest produs?” și linkul la #shoply_product_questions.
Salvează, vizitează o pagină de produs și dă clic pe link pentru a verifica întrebările despre produs.

Dacă tema ta nu oferă o setare potrivită pentru buton sau link, adaugă acest link în HTML-ul șablonului produsului:

html


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

Folosește acest link pe o pagină de produs pentru ca Shoply să aibă contextul produsului. De asemenea, poți distribui un URL complet de produs care se termină în #shoply_product_questions.

Încearcă chatul cu întrebări despre produs pentru Bent 85 Skis . Sugestiile includ întrebări despre greutatea schiurilor, nucleu, profilul rocker și designul topsheet-ului. Cumpărătorii pot selecta o sugestie sau își pot scrie propria întrebare.

Pentru exemple despre unde să folosești aceste linkuri, vezi întrebările despre produse bazate pe AI în ghidul nostru pentru înlocuirea paginii FAQ.

Aceste întrebări despre produse sunt generate automat. Întrebările de început pe care le configurezi în Customize AI Chat se aplică în schimb pentru deschiderea standard a chatului.

Deschide chatul cu o întrebare precompletată

Vrei 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 query în URL.

Acest lucru este perfect pentru a crea linkuri directe către subiecte comune precum politica de livrare, politica de retur sau întrebări despre produse.

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

Folosește fragmentul hash #shoply_question=. Deoarece hash-ul este procesat integral în browser, clicul pe acest link nu va reîncărca pagina, iar istoricul existent al chatului este 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?
Statusul 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?

Varianta legacy: parametru query în URL

Parametrul query ?shoply_question= este încă acceptat pentru compatibilitate retroactivă. Reține că adăugarea unui parametru query la un URL pe care clientul se află deja va provoca o reîncărcare a paginii.

Format:

plaintext


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

Notă: Nu uita să faci URL encode întrebării tale atunci când folosești caractere speciale sau spații. Majoritatea browserelor vor gestiona acest lucru automat, dar dacă adaugi linkuri programatic, folosește o codificare URL corectă (de ex., spațiile devin %20).

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

Cazuri de utilizare:

Adaugă un link „Întreabă despre livrare” în footer
Creează coduri QR care deschid chatbotul cu întrebări specifice
Include linkuri utile în campaniile tale de email sau în confirmările de comandă
Adaugă linkuri de ajutor contextual pe paginile de produs (de ex., „Întreabă despre mărime”)

Cum să folosești un link profund pentru a deschide fereastra de chat (trebuie să editezi codul în șablonul temei)

În secțiunea anterioară, am discutat despre cum să folosești hashtagul (linkul profund) pentru a declanșa fereastra de chat adăugându-l la orice buton, iconiță sau text direct din Editorul de teme, fără a edita codul temei tale.

Totuși, dacă vrei să ai flexibilitate deplină pentru a adăuga linkul profund oriunde în magazinul tău (de ex., creând o iconiță nouă în antet), va trebui să editezi codul șablonului.

Mai jos sunt exemple simple de cod HTML pe care le poți folosi pentru a crea iconițe noi în șablonul temei tale:

Exemple de cod

1. Iconiță de chat

Codul de mai jos adaugă o iconiță 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. Iconiță 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 apelului de funcție

Pe lângă folosirea hashtagurilor, poți de asemenea să pui apelul de funcție openShoplyAIChatBot() în atributul onclick al oricărui buton/iconiță, astfel încât clienții să vadă fereastra de chat când dau clic pe buton/iconiță.

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 folosi oricare dintre exemplele de mai sus și să inserezi codul lângă iconița de căutare în fișierul sections/header.liquid, pentru a adăuga linkul profund de chat în antetul magazinului tău.

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

Nu ezita să programezi o întâlnire cu noi , iar noi te vom ajuta cu plăcere să configurezi iconița perfectă în locul ideal, astfel încât să se potrivească stilului unic al magazinului tău.

Cum să ascunzi iconița plutitoare?

După ce configurezi linkul profund pentru a deschide fereastra de chat, este posibil să vrei să ascunzi iconița plutitoare. De asemenea, proprietarii de magazine menționează adesea că prea multe iconițe plutitoare pe site-urile lor pot fi copleșitoare. Îți înțelegem preocupările! De aceea am introdus o funcționalitate pentru ascunderea iconiței de chat.

În secțiunea „Customize AI Chat” din consola de administrare a aplicației, în setările Select a Chat Icon, poți selecta acum opțiunea:

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

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