Разработка интерфейса и дизайна ассистента Shopify

ОГЛАВЛЕНИЕ

Вспомогательная конфигурация дизайна

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

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

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

Расположение: Используйте выпадающее меню «Расположение на экране», чтобы выбрать место, где виджет будет размещен на витрине вашего магазина (обычно в правом нижнем углу).

Планировка и размеры

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

Отрегулируйте общую ширину чата (например, 400 пикселей) и максимальную высоту чата (например, 50 пикселей).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Готовы увеличить продажи на Shopify?

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

Воспользуйтесь полным спектром услуг всего за 1 доллар.