Как открыть окно чата с помощью ссылки

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

Пример вживую: demo.shoplyai.ai

Шаги:

Отредактируйте нужную кнопку, текст или иконку в редакторе темы.
Установите ссылку или URL на #shoply-ai-chatbot.

Примеры:

Используйте кнопку, чтобы открыть окно чата:

Используйте текст со ссылкой, чтобы открыть окно чата:

Открытие чата с вопросами о конкретном товаре

Добавьте кнопку «Вопрос об этом товаре?» на страницу товара, чтобы помочь покупателям задавать вопросы именно об этом товаре. Установите для нее ссылку #shoply_product_questions. При нажатии откроется чат с названием товара, кратким описанием товара и автоматически сгенерированными вопросами, относящимися к этому товару.

В редакторе тем Shopify откройте шаблон товара и добавьте или отредактируйте кнопку либо текст со ссылкой, который поддерживает URL.
Установите текст метки «Вопрос об этом товаре?» и ссылку #shoply_product_questions.
Сохраните изменения, откройте страницу товара и нажмите на ссылку, чтобы проверить вопросы о товаре.

Если ваша тема не предлагает подходящую настройку кнопки или ссылки, добавьте эту ссылку в HTML шаблона товара:

html


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

Используйте эту ссылку на странице товара, чтобы у Shoply был контекст товара. Вы также можете поделиться полным URL страницы товара, заканчивающимся на #shoply_product_questions.

Попробуйте чат с вопросами о товаре для Bent 85 Skis . Подсказки включают вопросы о весе лыж, сердечнике, профиле рокера и графике topsheet. Покупатели могут выбрать подсказку или ввести свой собственный вопрос.

Примеры того, где использовать такие ссылки, смотрите в разделе AI-powered product questions in our FAQ replacement guide.

Эти вопросы о товаре генерируются автоматически. Стартовые вопросы, которые вы настраиваете в Customize AI Chat, применяются вместо этого к стандартному открытию чата.

Открытие чата с заранее заполненным вопросом

Хотите открыть окно чата и автоматически отправить вопрос? Это можно сделать либо с помощью hash fragment (рекомендуется), либо с помощью параметра запроса URL.

Это отлично подходит для создания прямых ссылок на распространенные темы, такие как политика доставки, политика возврата или вопросы о товарах.

Рекомендуется: Hash Fragment (без перезагрузки страницы)

Используйте hash fragment #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).

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

Сценарии использования:

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

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

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

Однако если вам нужна полная гибкость, чтобы добавить 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 Star

Приведенный ниже код добавляет AI star:

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» административной консоли приложения, в настройках Select a Chat Icon, теперь можно выбрать:

опцию “Hide floating icon and use deep link to open chat”.

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