Как да отворите прозореца за чат с линк

Можете да отворите прозореца за чат, като използвате deep link, без да променяте кода на вашата тема. В Shopify Theme Editor просто добавете хаштага #shoply-ai-chatbot към който и да е бутон, икона или текстов елемент. Когато клиентите кликнат върху тези елементи, прозорецът за чат ще се отвори автоматично.

Пример на живо: demo.shoplyai.ai

Стъпки:

Редактирайте желания бутон, текст или икона в редактора на темата.
Задайте линка или URL адреса на #shoply-ai-chatbot.

Примери:

Използвайте бутон, за да отворите прозореца за чат:

Използвайте текст с линк, за да отворите прозореца за чат:

Отворете чат с въпроси, специфични за продукта

Добавете бутон “Въпрос за този продукт?” към продуктовата страница, за да помогнете на клиентите да задават въпроси за конкретния артикул. Задайте неговия линк на #shoply_product_questions. При кликване чатът се отваря с името на продукта, кратък акцент за продукта и автоматично генерирани въпроси, свързани с този продукт.

В Shopify Theme Editor отворете шаблона на продукта и добавете или редактирайте бутон или текст с линк, който поддържа URL.
Задайте етикета на “Въпрос за този продукт?” и линка на #shoply_product_questions.
Запазете, посетете продуктова страница и кликнете върху линка, за да проверите продуктовите въпроси.

Ако вашата тема не предлага подходяща настройка за бутон или линк, добавете този линк в HTML кода на шаблона на продукта:

html


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

Използвайте този линк на продуктова страница, за да има Shoply контекст за продукта. Можете също така да споделите пълния URL адрес на продукта, завършващ на #shoply_product_questions.

Изпробвайте чата с въпроси за продукта за Bent 85 Skis . Предложенията включват въпроси за теглото на ските, сърцевината, rocker профила и topsheet дизайна. Клиентите могат да изберат предложение или да напишат свой собствен въпрос.

За примери къде да използвате тези линкове вижте AI-powered product questions in our FAQ replacement guide.

Тези въпроси за продукта се генерират автоматично. Началните въпроси, които конфигурирате в Customize AI Chat, се прилагат вместо това при стандартното отваряне на чата.

Отворете чат с предварително попълнен въпрос

Искате да отворите прозореца за чат и автоматично да изпратите въпрос? Можете да направите това, като използвате или hash fragment (препоръчително), или URL query parameter.

Това е идеално за създаване на директни линкове към често срещани теми като политика за доставка, политика за връщане или въпроси за продукти.

Препоръчително: Hash Fragment (без презареждане на страницата)

Използвайте hash fragment-а #shoply_question=. Тъй като hash-ът се обработва изцяло в браузъра, кликването върху този линк няма да презареди страницата, а съществуващата история на чата ще бъде запазена.

Формат:

plaintext


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

Примери:

Политика за доставка: https://your-store.com#shoply_question=What is your shipping policy?
Връщания: https://your-store.com#shoply_question=How do I return an item?
Статус на поръчка: https://your-store.com#shoply_question=Where is my order?
Откриване на продукти: https://your-store.com#shoply_question=What class 2 e-bikes are available under $2000?

Можете да комбинирате това с която и да е страница от вашия магазин. Например, за да отворите чатбота с въпрос на конкретна продуктова страница:

plaintext


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

Legacy: URL Query Parameter

Параметърът ?shoply_question= все още се поддържа за обратна съвместимост. Имайте предвид, че добавянето на query parameter към URL адрес, на който клиентът вече се намира, ще доведе до презареждане на страницата.

Формат:

plaintext


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

Забележка: Не забравяйте да URL encode-нете въпроса си, когато използвате специални символи или интервали. Повечето браузъри ще се справят с това автоматично, но ако добавяте линкове програмно, използвайте правилно URL кодиране (напр. интервалите стават %20).

Когато клиент кликне върху който и да е от двата типа линкове, прозорецът за чат ще се отвори автоматично и въпросът ще бъде изпратен към AI чатбота, осигурявайки незабавен отговор.

Случаи на употреба:

Добавете линк “Попитайте за доставката” във footer-а си
Създайте QR кодове, които отварят чатбота с конкретни въпроси
Включете полезни линкове във вашите имейл кампании или потвърждения на поръчки
Добавете контекстуални помощни линкове на продуктовите страници (напр. “Попитайте за размера”)

Как да използвате deep link за отваряне на прозореца за чат (необходимо е да редактирате кода в шаблона на темата)

В предишния раздел обсъдихме как да използвате хаштага (deep link), за да задействате прозореца за чат, като го добавите към който и да е бутон, икона или текст директно от Theme Editor, без да редактирате кода на темата си.

Ако обаче искате да имате пълна гъвкавост да добавите deep link навсякъде във вашия магазин (напр. да създадете нова икона в header-а), ще трябва да редактирате кода на шаблона.

По-долу има прости HTML примери, които можете да използвате, за да създадете нови икони в шаблона на вашата тема:

Примери с код

1. Икона за чат

Кодът по-долу добавя икона за чат:

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 звезда икона

Кодът по-долу добавя 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. Метод с извикване на функция

Освен използването на хаштагове, можете също да добавите извикването на функцията openShoplyAIChatBot() към атрибута onclick на който и да е бутон/икона, така че клиентите да виждат прозореца за чат, когато кликнат върху бутона/иконата.

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>

Нужда от помощ?

Можете да използвате който и да е от примерите по-горе и да вмъкнете кода до иконата за търсене във файла sections/header.liquid, за да добавите deep link за чата в header-а на вашия магазин.

Ако обаче не се чувствате напълно уверени да редактирате кода в шаблона на темата си, не се притеснявайте!

Чувствайте се свободни да запазите среща с нас , и ние с радост ще ви помогнем да настроите перфектната икона на идеалното място, така че да подхожда на уникалната атмосфера на вашия магазин.

Как да скриете плаващата икона?

След като конфигурирате deep link за отваряне на прозореца за чат, може да искате да скриете плаващата икона. Също така собствениците на магазини често споменават, че твърде много плаващи икони в техните уебсайтове могат да бъдат натоварващи. Разбираме вашите притеснения! Затова въведохме функция за скриване на иконата за чат.

В секцията “Customize AI Chat” на admin конзолата на приложението, под настройките Select a Chat Icon, вече можете да изберете:

„Hide floating icon and use deep link to open chat“ опцията.

Това ви позволява да скриете плаващата икона, като същевременно запазите възможността прозорецът за чат да се отваря чрез deep link.