Jak używać deep linku do otwierania okna czatu (bez edytowania kodu motywu)

Możesz otworzyć okno czatu za pomocą deep linku bez modyfikowania kodu motywu. W edytorze motywu Shopify po prostu dodaj hashtag #shoply-ai-chatbot do dowolnego przycisku, ikony lub elementu tekstowego. Gdy klienci klikną te elementy, okno czatu otworzy się automatycznie.

Przykład na żywo: demo.shoplyai.ai

Kroki:

Edytuj wybrany przycisk, tekst lub ikonę w edytorze motywu.
Ustaw link lub adres URL na #shoply-ai-chatbot.

Przykłady:

Użyj przycisku, aby otworzyć okno czatu:

Użyj połączonego tekstu, aby otworzyć okno czatu:

Otwieranie czatu z wstępnie wypełnionym pytaniem

Chcesz otworzyć okno czatu i automatycznie wysłać pytanie? Możesz to zrobić za pomocą fragmentu hasha (zalecane) lub parametru zapytania URL.

Jest to idealne rozwiązanie do tworzenia bezpośrednich linków do często poruszanych tematów, takich jak zasady wysyłki, zasady zwrotów lub pytania dotyczące produktów.

Zalecane: fragment hasha (bez ponownego ładowania strony)

Użyj fragmentu hasha #shoply_question=. Ponieważ hash jest przetwarzany w całości w przeglądarce, kliknięcie tego linku nie spowoduje ponownego załadowania strony, a istniejąca historia czatu zostanie zachowana.

Format:

plaintext


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

Przykłady:

Zasady wysyłki: https://your-store.com#shoply_question=What is your shipping policy?
Zwroty: https://your-store.com#shoply_question=How do I return an item?
Status zamówienia: https://your-store.com#shoply_question=Where is my order?
Wyszukiwanie produktów: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Możesz połączyć to z dowolną stroną w swoim sklepie. Na przykład, aby otworzyć chatbota z pytaniem na stronie konkretnego produktu:

plaintext


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

Starsze rozwiązanie: parametr zapytania URL

Parametr zapytania ?shoply_question= jest nadal obsługiwany w celu zachowania zgodności wstecznej. Pamiętaj, że dodanie parametru zapytania do adresu URL, na którym klient już się znajduje, spowoduje ponowne załadowanie strony.

Format:

plaintext


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

Uwaga: pamiętaj o zakodowaniu pytania w adresie URL, gdy używasz znaków specjalnych lub spacji. Większość przeglądarek zrobi to automatycznie, ale jeśli dodajesz linki programowo, użyj prawidłowego kodowania adresu URL (np. spacje zamieniają się na %20).

Gdy klient kliknie dowolny z tych typów linków, okno czatu otworzy się automatycznie, a pytanie zostanie wysłane do chatbota AI, który natychmiast udzieli odpowiedzi.

Przypadki użycia:

Dodaj w stopce link „Zapytaj o wysyłkę”
Utwórz kody QR, które otwierają chatbota z konkretnymi pytaniami
Umieść pomocne linki w kampaniach e-mailowych lub potwierdzeniach zamówień
Dodaj kontekstowe linki pomocy na stronach produktów (np. „Zapytaj o rozmiar”)

Jak używać deep linku do otwierania okna czatu (wymaga edytowania kodu w szablonie motywu)

W poprzedniej sekcji omówiliśmy, jak używać hashtagu (deep linku) do uruchamiania okna czatu przez dodanie go do dowolnego przycisku, ikony lub elementu tekstowego bezpośrednio z edytora motywu, bez edytowania kodu motywu.

Jeśli jednak chcesz mieć pełną swobodę dodawania deep linku w dowolnym miejscu sklepu (np. tworząc nową ikonę w nagłówku), musisz edytować kod szablonu.

Poniżej znajdziesz proste przykłady kodu HTML, których możesz użyć do utworzenia nowych ikon w szablonie motywu:

Przykłady kodu

1. Ikona czatu

Poniższy kod dodaje ikonę czatu:

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 gwiazdki AI

Poniższy kod dodaje gwiazdkę 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 wywołania funkcji

Oprócz hashtagów możesz również umieścić wywołanie funkcji openShoplyAIChatBot() w atrybucie onclick dowolnego przycisku/ikony, aby po kliknięciu przycisku/ikony klienci zobaczyli okno czatu.

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>

Potrzebujesz pomocy?

Możesz użyć dowolnego z powyższych przykładów i wstawić kod obok ikony wyszukiwania w pliku sections/header.liquid, aby dodać deep link czatu do nagłówka swojego sklepu.

Jeśli jednak nie czujesz się całkowicie swobodnie podczas edytowania kodu w szablonie motywu, nie martw się!

Możesz umówić się z nami na spotkanie , a chętnie pomożemy Ci skonfigurować idealną ikonę w odpowiednim miejscu, tak aby pasowała do unikalnego charakteru Twojego sklepu.

Jak ukryć pływającą ikonę?

Po skonfigurowaniu deep linku otwierającego okno czatu możesz chcieć ukryć pływającą ikonę. Właściciele sklepów często wspominają również, że zbyt wiele pływających ikon na stronach internetowych może być przytłaczające. Rozumiemy Twoje obawy! Dlatego wprowadziliśmy funkcję ukrywania ikony czatu.

W sekcji „Dostosuj czat AI” w konsoli administracyjnej aplikacji, w ustawieniach Wybierz ikonę czatu, możesz teraz wybrać opcję:

„Ukryj pływającą ikonę i użyj deep linku do otwierania czatu”.

Pozwala to ukryć pływającą ikonę, a jednocześnie nadal umożliwia otwieranie okna czatu za pomocą deep linku.