Jak otevřít okno chatu pomocí odkazu

Okno chatu můžete otevřít pomocí deep odkazu bez úpravy kódu vašeho motivu. V editoru Shopify Theme Editor jednoduše přidejte hashtag #shoply-ai-chatbot k libovolnému tlačítku, ikoně nebo textovému prvku. Když zákazníci na tyto prvky kliknou, okno chatu se automaticky otevře.

Ukázka naživo: demo.shoplyai.ai

Postup:

Upravte požadované tlačítko, text nebo ikonu v editoru motivu.
Nastavte odkaz nebo URL na #shoply-ai-chatbot.

Příklady:

Pomocí tlačítka otevřete okno chatu:

Pomocí propojeného textu otevřete okno chatu:

Otevření chatu s dotazy ke konkrétnímu produktu

Přidejte na stránku produktu tlačítko „Otázka k tomuto produktu?“ a pomozte nakupujícím ptát se na danou položku. Nastavte jeho odkaz na #shoply_product_questions. Po kliknutí se otevře chat s názvem produktu, krátkým shrnutím produktu a automaticky generovanými otázkami relevantními pro tento produkt.

V Shopify Theme Editor otevřete šablonu produktu a přidejte nebo upravte tlačítko či propojený text, který podporuje URL.
Nastavte popisek na „Otázka k tomuto produktu?“ a odkaz na #shoply_product_questions.
Uložte změny, přejděte na stránku produktu a kliknutím na odkaz zkontrolujte produktové otázky.

Pokud váš motiv nenabízí vhodné nastavení tlačítka nebo odkazu, přidejte tento odkaz do HTML šablony produktu:

html


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

Tento odkaz používejte na stránce produktu, aby měl Shoply kontext produktu. Můžete také sdílet úplnou URL produktu končící na #shoply_product_questions.

Vyzkoušejte chat s produktovými otázkami pro Bent 85 Skis . Návrhy zahrnují otázky na hmotnost lyží, jádro, rocker profil a grafiku topsheetu. Nakupující si mohou vybrat návrh nebo napsat vlastní otázku.

Příklady, kde tyto odkazy použít, najdete v části produktové otázky poháněné AI v našem průvodci nahrazením FAQ.

Tyto produktové otázky se generují automaticky. Úvodní otázky, které nastavíte v Customize AI Chat, se místo toho použijí pro standardní otevření chatu.

Otevření chatu s předvyplněnou otázkou

Chcete otevřít okno chatu a zároveň automaticky odeslat otázku? Můžete to udělat buď pomocí fragmentu hashe (doporučeno), nebo pomocí parametru URL dotazu.

To je ideální pro vytváření přímých odkazů na běžná témata, jako jsou zásady dopravy, zásady vrácení zboží nebo dotazy k produktům.

Doporučeno: Fragment hashe (bez znovunačtení stránky)

Použijte fragment hashe #shoply_question=. Protože se hash zpracovává kompletně v prohlížeči, kliknutí na tento odkaz nezpůsobí znovunačtení stránky a veškerá existující historie chatu zůstane zachována.

Formát:

plaintext


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

Příklady:

Zásady dopravy: https://your-store.com#shoply_question=What is your shipping policy?
Vrácení zboží: https://your-store.com#shoply_question=How do I return an item?
Stav objednávky: https://your-store.com#shoply_question=Where is my order?
Hledání produktů: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Můžete to zkombinovat s jakoukoli stránkou ve vašem obchodě. Například pro otevření chatbota s otázkou na konkrétní produktové stránce:

plaintext


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

Starší varianta: Parametr URL dotazu

Parametr dotazu ?shoply_question= je stále podporován kvůli zpětné kompatibilitě. Mějte na paměti, že přidání parametru dotazu do URL, na které se zákazník už nachází, způsobí znovunačtení stránky.

Formát:

plaintext


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

Poznámka: Nezapomeňte otázku v URL zakódovat, pokud používáte speciální znaky nebo mezery. Většina prohlížečů to zvládne automaticky, ale pokud odkazy přidáváte programově, použijte správné URL kódování (např. mezery se změní na %20).

Když zákazník klikne na kterýkoli z těchto typů odkazů, okno chatu se automaticky otevře a otázka bude odeslána AI chatbotovi, který poskytne okamžitou odpověď.

Případy použití:

Přidejte do patičky odkaz „Zeptat se na dopravu“
Vytvářejte QR kódy, které otevřou chatbot s konkrétními otázkami
Zahrňte užitečné odkazy do e-mailových kampaní nebo potvrzení objednávek
Přidejte kontextové odkazy nápovědy na stránky produktů (např. „Zeptat se na velikost“)

Jak použít deep odkaz k otevření okna chatu (je potřeba upravit kód v šabloně motivu)

V předchozí části jsme si ukázali, jak použít hashtag (deep odkaz) ke spuštění okna chatu jeho přidáním k libovolnému tlačítku, ikoně nebo textu přímo z Theme Editoru, bez úprav kódu motivu.

Pokud však chcete mít plnou flexibilitu a přidat deep odkaz kamkoli ve svém obchodě (např. vytvořit novou ikonu v záhlaví), budete muset upravit kód šablony.

Níže jsou jednoduché příklady HTML kódu, které můžete použít k vytvoření nových ikon v šabloně motivu:

Příklady kódu

1. Ikona chatu

Níže uvedený kód přidá ikonu chatu:

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. AI hvězda

Níže uvedený kód přidá AI hvězdu:

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 volání funkce

Kromě použití hashtagů můžete také vložit volání funkce openShoplyAIChatBot() do atributu onclick libovolného tlačítka/ikony, takže zákazníci po kliknutí na tlačítko/ikonu uvidí okno chatu.

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>

Potřebujete pomoc?

Můžete použít kterýkoli z výše uvedených příkladů a vložit kód vedle ikony hledání v souboru sections/header.liquid, abyste přidali deep odkaz na chat do záhlaví svého obchodu.

Pokud si však nejste úplně jistí úpravami kódu v šabloně motivu, žádný strach!

Neváhejte si domluvit schůzku s námi a rádi vám pomůžeme nastavit ideální ikonu na ideálním místě tak, aby odpovídala jedinečnému stylu vašeho obchodu.

Jak skrýt plovoucí ikonu?

Jakmile nastavíte deep odkaz pro otevření okna chatu, možná budete chtít plovoucí ikonu skrýt. Majitelé obchodů také často zmiňují, že příliš mnoho plovoucích ikon na jejich webech může působit zahlcujícím dojmem. Vaše obavy chápeme! Proto jsme zavedli funkci pro skrytí ikony chatu.

V části „Customize AI Chat“ v administraci aplikace, v nastavení Select a Chat Icon, nyní můžete vybrat možnost:

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

To vám umožní skrýt plovoucí ikonu a zároveň stále umožnit otevření okna chatu pomocí deep odkazu.