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

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

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

Стъпки:

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

Примери:

Използване на бутон за отваряне на прозореца за чат:

Използване на свързан текст за отваряне на прозореца за чат:

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

Искате ли да отворите прозореца за чат и автоматично да изпратите въпрос? Можете да направите това чрез фрагмент от хеша (препоръчително) или параметър на URL заявка.

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

Препоръчително: фрагмент от хеша (без презареждане на страницата)

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

Формат:

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?

Наследен вариант: параметър на URL заявка

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

Формат:

plaintext


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

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

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

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

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

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

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

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

По-долу са дадени прости примери с 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, за да добавите дълбоката връзка към заглавната част на магазина си.

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

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

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

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

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

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

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