Как настроить внешний вид Shoply AI Chat

Shoply AI Chat и AI Search предоставляют более 40 вариантов настройки внешнего вида приложения.

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

Готовы начать? Откройте страницу Customize AI Chat в административной консоли приложения, чтобы приступить к настройке чата. После включения Shoply AI Chat в Shopify’s Theme Editor значок чата появится в правом нижнем углу веб-страницы вашего магазина.

Выбор значка чата

Select an icon

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

Цвет и размер значка чата

Primary Color

Это основной цвет темы, который также используется для выделения текста в окне чата.

Если на вашем сайте используется светлая тема, выберите цвет темы, отличный от белого, — это гарантирует, что выделенный текст останется читаемым на светлом фоне. Если на вашем сайте используется тёмная тема, выберите цвет темы, отличный от чёрного.

Complementary Color

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

Icon’s Line Color

Это цвет контура значка чата.

Whether to remove the background color of the chat icon.

Эта настройка часто полезна, если вы загружаете изображение в качестве значка чата и хотите удалить цвет фона (основной цвет) значка чата.

Whether to remove the shadow of the chat icon.

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

Floating Icon Size for desktop and mobile.

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

Расположение значка чата

Chat icon positioning’s on desktop and on mobile.

Z-index of Chat Icon:

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

Auto-hide chat icon on mobile

Скрывайте значок чата через заданное количество секунд на мобильных устройствах.

Эта настройка доступна только для мобильных устройств. Она помогает не допустить, чтобы значок чата закрывал обзор экрана покупателя.

Настройка окна чата

При нажатии на значок Shoply AI окно чата откроется. Покупатели могут взаимодействовать с Shoply AI через это окно чата.

В этом разделе мы расскажем о различных доступных вариантах настройки окна чата.

Color Theme (dark mode or light mode) of the chat window

Если выбрать тёмную тему, фон окна чата будет чёрным, а цвет шрифта — белым. Мы рекомендуем использовать тёмную тему, если тема вашего магазина также тёмная.

Width of the chat window on desktop

Эта настройка применяется только на компьютерах. На мобильных устройствах окно чата всегда занимает весь экран.

Select the branding image and background image

Вы можете загрузить собственное брендированное изображение и фоновое изображение для окна чата или просто позволить Shoply AI сгенерировать эти изображения.

Если вы решите использовать изображение, созданное AI, Shoply AI сгенерирует брендированные и фоновые изображения на основе описания вашего магазина.

Adjust the transparency and aspect ratios of the background image for the chat window.

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

Whether to remove Shoply AI’s Logo in Input Bar

Эта настройка позволяет удалить логотип Shoply AI из строки ввода чата для более чистого интерфейса, соответствующего вашему бренду. Она особенно полезна, если вы хотите сохранить единый стиль бренда во всём магазине без логотипов сторонних компаний или предпочитаете более минималистичный дизайн интерфейса чата.

Эта настройка доступна только на платных тарифах.

Предварительно заданные сообщения для AI Chat

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

Popup Welcome message (shows above chat icon if not empty)

Если оставить приветственное сообщение пустым, мы не будем показывать его над значком чата.

Pre-defined messages in chat window

В окне чата можно настроить до 3 типов предварительно заданных сообщений:

1. First message in the chat window — это первоначальное приветственное сообщение, которое автоматически появляется, когда покупатели впервые открывают окно чата. Используйте его, чтобы поприветствовать покупателей и задать тон разговору.

2. Up to 4 starting questions — это кликабельные варианты вопросов, отображаемые в начале чата. Они помогают направить покупателей, предлагая распространённые вопросы, которые можно выбрать, чтобы начать разговор.

3. Input placeholder message — это текст-подсказка, отображаемый в поле ввода чата до того, как покупатели начнут печатать. Он подсказывает, о чём можно спросить, например: «Спросите меня о чём угодно 🤗» или «Чем я могу помочь вам сегодня?»

Посмотрите пример каждого типа предварительно заданных сообщений: