Jak pomocí deep linku otevřít okno chatu (bez úprav kódu motivu)

Okno chatu můžete otevřít pomocí deep linku, aniž byste upravovali kód motivu. V editoru motivu Shopify 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.

Živý příklad: demo.shoplyai.ai

Postup:

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

Příklady:

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

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

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

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

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

Doporučeno: fragment hashe (bez opětovného načtení stránky)

Použijte fragment hashe #shoply_question=. Protože se hash zpracovává výhradně v prohlížeči, kliknutí na tento odkaz stránku znovu nenačte a zachová se veškerá existující historie chatu.

Formát:

plaintext


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

Příklady:

Pravidla 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?
Objevování produktů: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Toto můžete zkombinovat s libovolnou stránkou ve svém obchodě. Chcete-li například otevřít chatbot s otázkou na konkrétní stránce produktu:

plaintext


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

Starší možnost: parametr dotazu URL

Parametr dotazu ?shoply_question= je kvůli zpětné kompatibilitě stále podporován. Upozorňujeme, že přidání parametru dotazu k URL stránky, na které se zákazník již nachází, způsobí opětovné načtení stránky.

Formát:

plaintext


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

Poznámka: Při použití speciálních znaků nebo mezer nezapomeňte otázku zakódovat do URL. Většina prohlížečů to provede automaticky, ale pokud odkazy přidáváte programově, použijte správné kódování URL (například mezery se převedou na %20).

Když zákazník klikne na některý z těchto typů odkazů, okno chatu se automaticky otevře a otázka se odešle chatbotu s umělou inteligencí, který okamžitě poskytne odpověď.

Případy použití:

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

Jak pomocí deep linku otevřít okno chatu (je třeba upravit kód v šabloně motivu)

V předchozí části jsme se zabývali tím, jak pomocí hashe (deep linku) vyvolat okno chatu jeho přidáním k libovolnému tlačítku, ikoně nebo textu přímo z editoru motivu, bez úprav kódu motivu.

Pokud však chcete mít úplnou volnost při přidávání deep linku kamkoli ve svém obchodě (například při vytváření nové ikony v záhlaví), budete muset upravit kód šablony.

Níže jsou jednoduché příklady kódu HTML, 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. Ikona hvězdy umělé inteligence

Níže uvedený kód přidá hvězdu umělé inteligence:

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 volání funkce openShoplyAIChatBot() vložit také do atributu onclick libovolného tlačítka/ikony, aby se zákazníkům po kliknutí na tlačítko/ikonu zobrazilo 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 vyhledávání v souboru sections/header.liquid, čímž do záhlaví svého obchodu přidáte deep link chatu.

Pokud si však nejste úplně jistí úpravou kódu v šabloně motivu, nemusíte se bát!

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

Jak skrýt plovoucí ikonu?

Po nastavení deep linku k otevření okna chatu můžete chtít plovoucí ikonu skrýt. Majitelé obchodů také často zmiňují, že příliš mnoho plovoucích ikon na jejich webových stránkách může působit zahlcujícím dojmem. Vašim obavám rozumíme! Proto jsme představili funkci pro skrytí ikony chatu.

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

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

To vám umožní skrýt plovoucí ikonu a současně zachovat možnost otevřít okno chatu pomocí deep linku.