Дизайн и фронтенд ассистента Shopify

СОДЕРЖАНИЕ

Настройка дизайна ассистента

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

Основная идентичность и позиционирование

Идентификация: Вы можете задать «Имя ассистента» (например, «ИИ-ассистент»), которое отображается в заголовке, и при необходимости указать «URL аватара ассистента», чтобы отобразить пользовательский логотип или изображение рядом с именем.

Позиционирование: Используйте выпадающий список “Позиция на экране”, чтобы выбрать, где виджет закрепляется на вашей витрине (обычно внизу справа).

Макет и размеры

Вы можете точно контролировать физический размер и форму интерфейса чата, используя пиксели (px), высоту области просмотра (vh) или единицы rem:

Настройте общую «Ширину чата» (например, 400px) и «Максимальную высоту чата» (например, 50vh).

Настройте отступы с помощью «Отступы сообщений» и измените кривизну интерфейса с помощью элементов управления радиусом, таких как «Радиус контейнера сообщений» (18px) и «Радиус окна чата» (12px).

Управляйте размером типографики с помощью настроек «Размер шрифта чата», «Размер текста заголовка чата» и «Размер значка заголовка чата».

Цветовая тема

Интерфейс предоставляет обширные средства выбора шестнадцатеричных кодов для изменения каждого отдельного элемента окна чата.

Фоны: Настройте основной «Фон чата» (#FFFFFF), «Фон сообщений клиента» и «Фон сообщений ассистента» (#000000). Вы также можете настроить отдельные разделы, такие как «Фон приветственного текстового поля» или «Цвет фона часто задаваемых вопросов» (#F9FAFB).

Границы: Определите тонкие контуры для поля сообщения, блоков часто задаваемых вопросов и ссылок, чтобы создать целостный вид.

Часто задаваемые вопросы

Вкладка «Часто задаваемые вопросы» позволяет создавать заранее написанные вопросы, которые отображаются до того, как пользователь введёт своё первое сообщение. Это помогает мгновенно решать типичные запросы без необходимости генерации ИИ.

Нажмите “+ Добавить вопрос”, чтобы создать новую запись.

Для каждой записи введите общий “Вопрос” (например, “Можете ли вы отправить товар в США?”) и отформатируйте статический “Ответ” с помощью редактора форматированного текста (жирный, курсив, подчеркивание, зачеркивание).

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

Быстрые ссылки

Вкладка «Ссылки» позволяет добавить кнопки прямой навигации в нижнюю часть приветственного экрана чата. Это идеально подходит для перенаправления пользователей на альтернативные каналы поддержки или важные страницы магазина.

Сетка: Сначала определите, как отображаются ссылки, выбрав количество «Столбцов сетки» (например, значение 3 отобразит их в горизонтальный ряд).

Добавление ссылок: Нажмите “+ Добавить ссылку”, чтобы создать новую кнопку. Укажите “Заголовок ссылки” (например, “WhatsApp” или “Почта”) и введите точный “URL ссылки” (используя стандартные форматы, такие как mailto: для электронной почты или прямые номера телефонов).

Иконки: Вы можете выбрать из встроенной библиотеки векторных иконок (например, конверт, телефон, глобус или календарь), чтобы визуально представить ссылку. Кроме того, вы можете использовать кнопку “Выбрать файл” в разделе “Пользовательское изображение”, чтобы загрузить свою иконку.

Готовы продавать больше на Shopify?

Установите Liliwi в вашем магазине Shopify и получите бесплатную настройку от нашей команды. 

Используйте полный сервис всего за $1.