Как использовать deep link для открытия окна чата (без редактирования кода темы)

Вы можете открыть окно чата с помощью deep link, не изменяя код темы. В редакторе темы 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

Параметр запроса ?shoply_question= по-прежнему поддерживается для обратной совместимости. Обратите внимание: добавление параметра запроса к URL, на котором уже находится клиент, вызовет перезагрузку страницы.

Формат:

plaintext


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

Примечание: не забудьте закодировать вопрос в URL при использовании специальных символов или пробелов. Большинство браузеров сделает это автоматически, но при программном добавлении ссылок используйте корректное кодирование URL (например, пробелы заменяются на %20).

Когда клиент нажимает на ссылку любого из двух типов, окно чата открывается автоматически, а вопрос отправляется ИИ-чат-боту, который сразу предоставляет ответ.

Варианты использования:

Добавьте в подвал ссылку “Спросить о доставке”
Создавайте QR-коды, открывающие чат-бот с конкретными вопросами
Добавляйте полезные ссылки в email-кампании или подтверждения заказов
Добавляйте контекстные ссылки помощи на страницы товаров (например, “Спросить о размере”)

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

В предыдущем разделе мы рассмотрели, как запустить окно чата с помощью хэштега (deep link), добавив его к любой кнопке, значку или тексту прямо из редактора темы, без редактирования кода темы.

Однако если вам нужна полная свобода при добавлении deep link в любое место магазина (например, при создании нового значка в шапке), потребуется отредактировать код шаблона.

Ниже приведены простые примеры 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 чата в шапку магазина.

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

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

Как скрыть плавающий значок?

После настройки deep link для открытия окна чата вы можете захотеть скрыть плавающий значок. Владельцы магазинов также часто отмечают, что большое количество плавающих значков на сайтах может перегружать интерфейс. Мы понимаем ваши сомнения! Поэтому мы добавили возможность скрыть значок чата.

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

«Hide floating icon and use deep link to open chat».

Это позволяет скрыть плавающий значок и при этом сохранить возможность открывать окно чата через deep link.