Виджет чата на сайте позволяет посетителям сайта связаться с вами через чат в реальном времени или через другие каналы обмена сообщениями , которые вы подключили.
Подключение виджета чата на сайте
Посмотрите видео ниже, в котором приведено пошаговое руководство по подключению веб-чата к respond.io.
Шаг 1: Перейдите в Настройки > Каналы
Шаг 2: Нажмите Добавить канал > Чат на сайте > Подключиться
Шаг 3: Укажите веб-сайт(ы), на которые будет добавлен виджет.
Информацию о том, как можно внести веб-сайты в белый список, см. ниже.
Если пользователь добавит
https://app.respond.io, то в белый список будет добавлен толькоhttps://app.respond.io. Любой другой поддомен или корень работать не должен.Если пользователь добавит
https://*.respond.io, то все поддомены, включая корневой домен, будут добавлены в белый список.Если пользователь добавит
https://respond.io, то в белый список будет добавлен только корневой домен.
Шаг 4:Выберите цвет темы для виджета с помощью интерактивной палитры цветов.
Выберите цвет, соответствующий вашему бренду , цвету и веб-сайту.
Шаг 5:Выберите значок для виджета, который будет отображаться на веб-сайте. Если вы предпочитаете загрузить собственный значок, вы можете загрузить квадратный значок с рекомендуемым размером 256 x 256 пикселей.
После подключения виджеты можно дополнительно настраивать.
Шаг 6: НажмитеДалее> Добавьте скрипт на нужный вам веб-сайт. Вы также можете отправить инструкции по установке кому-либо другому по электронной почте.
Установка виджета чата
Вам может потребоваться помощь веб-мастера или технического администратора в установке виджета чата на веб-сайте. При необходимости обратитесь за помощью.
В зависимости от того, какую систему вы используете для создания и управления своим веб-сайтом, мы создали пошаговое руководство, которое поможет вам установить виджет чата на ваш веб-сайт.
Для других платформ или сервисов перейдите к исходному HTML-коду страницы. Вставьте скрипт перед тегом </body> .
<body>
...
...
...
<Paste Script Here>
</body>Если вам потребуется помощь, вы можете переслать скрипт вместе с инструкциями по установке администратору вашего сайта. Установите соответствующий флажок и введите адрес электронной почты человека, который может помочь вам установить плагин чата.
Виджет чата на сайте respond.io появится на вашем сайте после успешной установки скрипта.
Настройка виджета чата
Шаг 1:В вашем рабочем пространстве перейдите вНастройки>Канал
Шаг 2: Найдите канал чата на сайте > нажмите Настроить
Настройте виджет веб-сайта так, чтобы он соответствовал внешнему виду сайта, чтобы виджет выглядел безупречно. В правой части страницы находится предварительный просмотр виджета чата на сайте. Любые изменения, внесенные в виджет, отразятся на нем, что поможет вам лучше понять, что именно вы настраиваете.
Дисплей & Внешний вид
Вы можете настроить следующие параметры, чтобы изменить внешний вид виджета на веб-сайте.
Поле | Описание |
|---|---|
Цвет темы | Выбранный цвет будет использоваться в качестве основного цвета вашего виджета. |
Цвет текста | Выбранный цвет будет использоваться в качестве основного цвета текста вашего виджета. |
Значок чата на сайте | Выбранный значок используется внутри области виджета вместе с цветом темы. При необходимости вы можете загрузить собственный значок. |
Всплывающее сообщение | Всплывающее сообщение показывается посетителям сайта один раз в день через 5 секунд после загрузки страницы. Если не указано иное, посетителям сайта не будет показано всплывающее сообщение. |
Проверка значка чата на сайте:
Максимальный размер файла: 1 МБ
Максимальный размер файла: 256 x 256 пикселей
Форма: квадратная
Позиция
Поле | Описание |
|---|---|
Выровнять по | Пользователи могут указать местоположение виджета: слева или справа на платформе. |
Вертикальный интервал | Пользователи могут указать величину вертикального расстояния между виджетом чата на сайте и нижней частью экрана. |
Горизонтальный интервал | Пользователи могут указать величину горизонтального расстояния между виджетом чата на сайте и краем экрана. |
Размер виджета | Пользователи могут выбрать размер виджета: Маленький, Стандартный или Большой. |
Параметры отображения | Пользователи могут выбрать отображение этого виджета на рабочем столе, мобильных устройствах или на обоих устройствах. |
Элементы заголовка
Поле | Описание |
|---|---|
Заголовок | Заголовок будет отображаться в верхней части виджета чата. |
Слоган | Слоган будет отображаться под заголовком. |
Логотип веб-чата | Перетащите сюда изображение вашего логотипа, и оно будет отображаться в верхней части чата на сайте. Формат файла может быть PNG, SVG или JPG, а размер файла не должен превышать 4,0 МБ. |
Иконки каналов | Эта опция позволит контактам связываться с вами через предпочитаемый ими канал, если им предоставлены соответствующие возможности. Вы можете добавить до шести каналов, и они будут отображаться в верхней части виджета чата на сайте. |
Цвет значков каналов | Значки каналов могут отображаться в белом или цветном виде на виджете чата. Выберите «Белый» или «Цветной», чтобы соответствовать цвету темы вашего виджета чата. |
Проверка логотипа чата на сайте:
Максимальный размер файла: 4 МБ
Максимальный размер файла: 1024 x 1024 пикселей
Форма: квадратная
Иконки каналов
Если виджет чата на сайте никогда ранее не был настроен, подключенные каналы с достаточной информацией будут по умолчанию указаны в виде ссылок на каналы виджета.
Вы можете добавить виджет Ссылки каналов и указать необходимую информацию для выбранного канала.
Ниже приведен список полей ввода, необходимых для каждой из поддерживаемых ссылок каналов.
Ссылки на каналы | Поле ввода обязательно |
|---|---|
Номер телефона WhatsApp | |
Facebook Messenger. | Идентификатор страницы Facebook |
Telegram. | Имя бота Telegram |
Твиттер | Твиттер-идентификатор |
LINE. | ИД LINE. |
Вайбер | Имя публичного аккаунта Viber |
SMS | Номер телефона для СМС |
Электронная почта | Адрес электронной почты |
Телефонный звонок | Номер телефона |
Пользовательская ссылка | URL-адрес и значок |
Пользовательский QR-код | Изображение и значок QR |
Проверка значка канала:
Максимальный размер файла: 1 МБ
Максимальный размер файла: 256 x 256 пикселей
Форма: квадратная
Форма предварительного чата
Включение этой опции добавит предварительную чат-форму в чат на вашем сайте. Если эта функция включена, посетителям вашего сайта будет предложено заполнить форму перед началом чата.
Если эта опция включена, вы можете при необходимости включать дополнительные пользовательские поля. Кроме того, вы также можете настроить метки полей по умолчанию, чтобы они отображались в ваших контактах.
Метки полей можно настроить на другой язык, соответствующий языку веб-сайта.
Дополнительные настройки
Поле | Описание |
|---|---|
Текст панели ввода | Этот текст будет использоваться в качестве заполнителя в области ввода текста. |
Шрифт текста | Шрифт, который будет использоваться для отображения шрифта в виджете чата на сайте. |
Ограничить входящие вложения
Если эта опция отмечена, посетитель веб-сайта не имеет возможности прикрепить вложение в виджете чата веб-сайта.
Скрыть чат на сайте
При использовании этой опции виджет будет полностью скрыт. До тех пор, пока не будет нажата ссылка-якорь или пока чат не будет открыт через программное API.
#webchat_widget
Используя указанный выше якорь, вы можете создать кнопку на своей странице, которая будет открывать виджет при нажатии.
Скрыть брендинг Respond.io
Используя эту опцию, вы можете удалить брендинг respond.io из вашего виджета.
Конфигурация канала
Шаг 1: Нажмите Настройки > Каналы
Шаг 2: Найдите чат на сайте > нажмите Управление
Шаг 3: На странице конфигурации веб-чата вы увидите следующие конфигурации:
Ссылка на чат - URL-ссылка для вашего контакта, чтобы попасть на ваш канал.
Название канала - Название канала может быть изменено и используется внутри системы для его идентификации.
Домены веб-сайтов - Веб-сайт(ы), подключенные к вашему виджету.
Код чата веб-сайта - Код, который вы можете вставить в исходный HTML-код вашего веб-сайта, если вам необходимо получить сгенерированный фрагмент кода.
Если вы не включите свой сайт в этот список, ваш виджет не загрузится. Вы можете добавить несколько URL-адресов, если используете плагин на нескольких веб-сайтах.
Шаг 4: Нажмите Сохранить изменения , чтобы обновить страницу конфигурации чата на сайте.
Идентификация вошедших в систему пользователей
Пользователей, вошедших в систему вашего сайта, можно идентифицировать, добавив простой код JavaScript в код вашего сайта. Как только переданный идентификатор сопоставится с существующим контактом, текущий разговор будет возобновлен.
Термин «пользователь» используется в контексте вашего веб-сайта. На платформе respond.io мы продолжаем называть их «Контакты».
window.__respond_settings = {
идентификатор: "customer@example.com",
имя: "Джейн",
фамилия: "Доу",
телефон: "60123456789",
эл. почта: "customer@example.com",
профиль фото: "https://static.independent.co.uk/s3fs-public/thumbnails/image/2015/07/08/14/pic.jpg",
Код страны: "MY",
Язык: "en",
// Пользовательские поля
custom_fields: {
// Слаги пользовательских полей
Номер: 123,
Описание: "Какой-то текст",
},
};Руководство по использованию кода
Отредактируйте код (приведенный ниже), чтобы отправить response.io идентификатор текущего вошедшего в систему пользователя. Это может быть адрес электронной почты, идентификатор контакта или любое другое поле контакта. Обратите внимание, что идентификатор
является обязательным полем.Вставьте код прямо в тег заголовка
каждой страницы, на которой вы хотите разместить чат.Скрипт для идентификации вошедших в систему пользователей должен быть размещен над кодом чата на сайте, который можно найти в диалоговом окне настройки чата на сайте.
Вы также можете отправить в respond.io поля контактов, связанные с вашими контактами, чтобы мы сохранили поле «Контакт» во время процесса создания контакта. Имя поля (или слаг) можно найти в модуле «Поля контактов».
Обратите внимание, что если вы используете эту функцию, предварительная форма чата будет проигнорирована, что означает, что контактам не нужно заполнять свою информацию перед началом разговора.
В приведенном выше примере адрес электронной почты передается в качестве идентификатора, и в процессе создания контакта все переданные поля контакта будут сохранены.
Программное управление (API для пользователей)
Виджет чата на сайте можно открывать и закрывать с помощью кода JavaScript вашего сайта. Это позволяет вам создать на своем веб-сайте пользовательскую кнопку "Чат с нами" и открыть виджет чата на веб-сайте при нажатии на кнопку.
Действия
Открыть чат
Описание: Открывает виджет чата.
Синтаксис:
$respond.do("chat:open")
Закрыть чат
Описание: Закрывает виджет чата.
Синтаксис:
$respond.do("chat:close")
Прослушиватели событий
Чат был открыт
Описание: Обрабатывает событие открытия виджета чата (запускает функцию обратного вызова
).Синтаксис:
$respond.on("чат:открыт", обратный вызов)
Чат был закрыт
Описание: Обрабатывает событие закрытия виджета чата (запускает функцию обратного вызова
).Синтаксис:
$respond.on("чат: закрыт", обратный вызов)
Методы государственной проверки
Чат открыт?
Описание: Возвращает
trueесли виджет чата открыт, иначеfalse.Синтаксис:
$respond.is("чат:открыть")
Чат закрыт?
Описание: Возвращает
trueесли виджет чата закрыт, иначеfalse.Синтаксис:
$respond.is("чат:закрыт")
Часто задаваемые вопросы и устранение неполадок
Почему мои сообщения не доставляются в Контакты?
Причин, по которым сообщения не доставляются, может быть несколько:
Контакт покинул сайт.
Неактивность контакта может превышать период тайм-аута.
У клиента могут быть проблемы с интернет-соединением.
Почему мой виджет не отображается на моем сайте?
Убедитесь, что код установлен правильно. Справки по установке виджета чата на сайте можно найти здесь.
Обязательно добавьте в белый список сайт, на котором будет установлен виджет. Справки по внесению домена в белый список см. в Шаге 3 Подключения виджета чата на сайте.
