Jak otworzyć okno czatu za pomocą linku

Możesz otworzyć okno czatu za pomocą deep linku bez modyfikowania kodu swojego 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 URL na #shoply-ai-chatbot.

Przykłady:

Użyj przycisku, aby otworzyć okno czatu:

Użyj podlinkowanego tekstu, aby otworzyć okno czatu:

Otwieranie czatu z pytaniami dotyczącymi konkretnego produktu

Dodaj przycisk “Pytanie o ten produkt?” na stronie produktu, aby pomóc kupującym zadawać pytania o ten konkretny produkt. Ustaw jego link na #shoply_product_questions. Kliknięcie otworzy czat z nazwą produktu, krótkim wyróżnikiem produktu oraz automatycznie wygenerowanymi pytaniami związanymi z tym produktem.

W Edytorze motywu Shopify otwórz szablon produktu i dodaj lub edytuj przycisk albo podlinkowany tekst, który obsługuje URL.
Ustaw etykietę na “Pytanie o ten produkt?” i link na #shoply_product_questions.
Zapisz, przejdź na stronę produktu i kliknij link, aby sprawdzić pytania dotyczące produktu.

Jeśli Twój motyw nie oferuje odpowiedniego ustawienia przycisku lub linku, dodaj ten link w HTML szablonu produktu:

html


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

Użyj tego linku na stronie produktu, aby Shoply miał kontekst produktu. Możesz też udostępnić pełny adres URL produktu kończący się na #shoply_product_questions.

Wypróbuj czat z pytaniami o produkt dla Bent 85 Skis . Sugestie obejmują pytania o wagę nart, rdzeń, profil rocker oraz grafikę topsheetu. Kupujący mogą wybrać sugestię lub wpisać własne pytanie.

Aby zobaczyć przykłady zastosowania tych linków, zobacz pytania o produkty wspierane przez AI w naszym przewodniku po zastępowaniu FAQ.

Te pytania o produkty są generowane automatycznie. Pytania początkowe konfigurowane w Customize AI Chat dotyczą zamiast tego standardowego otwierania czatu.

Otwieranie czatu z wstępnie wpisanym pytaniem

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

To idealne rozwiązanie do tworzenia bezpośrednich linków do typowych tematów, takich jak polityka wysyłki, polityka zwrotów czy pytania o produkt.

Zalecane: fragment hash (bez przeładowania strony)

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

Format:

plaintext


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

Przykłady:

Polityka 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 konkretnej stronie produktu:

plaintext


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

Starsza metoda: parametr zapytania URL

Parametr zapytania ?shoply_question= jest nadal obsługiwany ze względu na kompatybilność wsteczną. Pamiętaj, że dodanie parametru zapytania do adresu URL, na którym klient już się znajduje, spowoduje przeładowanie strony.

Format:

plaintext


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

Uwaga: Pamiętaj, aby zakodować pytanie w URL, jeśli używasz znaków specjalnych lub spacji. Większość przeglądarek zrobi to automatycznie, ale jeśli dodajesz linki programowo, użyj poprawnego kodowania URL (np. spacje zamieniają się w %20).

Gdy klient kliknie dowolny z tych typów linków, okno czatu otworzy się automatycznie, a pytanie zostanie wysłane do chatbota AI, zapewniając natychmiastową odpowiedź.

Przykłady zastosowań:

Dodaj link “Zapytaj o wysyłkę” w stopce
Twórz kody QR otwierające chatbota z konkretnymi pytaniami
Umieszczaj pomocne linki w kampaniach e-mailowych lub potwierdzeniach zamówień
Dodawaj kontekstowe linki pomocy na stronach produktów (np. “Zapytaj o rozmiar”)

Jak użyć deep linku do otwarcia okna czatu (wymaga edycji kodu w szablonie motywu)

W poprzedniej sekcji omówiliśmy, jak użyć hashtagu (deep linku), aby wywołać okno czatu przez dodanie go do dowolnego przycisku, ikony lub tekstu bezpośrednio z Edytora motywu, bez edytowania kodu motywu.

Jeśli jednak chcesz mieć pełną elastyczność i dodawać deep link 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 używania hashtagów możesz też dodać wywołanie funkcji openShoplyAIChatBot() do atrybutu onclick dowolnego przycisku/ikony, dzięki czemu klienci zobaczą okno czatu po kliknięciu przycisku/ikony.

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 do czatu w nagłówku swojego sklepu.

Jeśli jednak nie czujesz się do końca komfortowo z edytowaniem kodu w szablonie motywu, nie martw się!

Śmiało umów się z nami na spotkanie , a chętnie pomożemy Ci skonfigurować idealną ikonę w najlepszym miejscu, tak aby pasowała do wyjątkowego charakteru Twojego sklepu.

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

Po skonfigurowaniu deep linku do otwierania okna czatu możesz chcieć ukryć pływającą ikonę. Właściciele sklepów często wspominają też, że zbyt wiele pływających ikon na stronie może być przytłaczające. Rozumiemy te obawy! Dlatego wprowadziliśmy funkcję ukrywania ikony czatu.

W sekcji “Customize AI Chat” w panelu administracyjnym aplikacji, w ustawieniach Select a Chat Icon, możesz teraz wybrać opcję:

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

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