Виджет чата на сайте позволяет посетителям сайта связываться с вами через чат или через другие каналы обмена сообщениями , к которым вы подключены.
Пошаговое руководство по подключению к чату веб-сайта respond.io.
Шаг 1: Перейдите к Настройки > Каналы
Шаг 2: Щелкните Добавить канал > Веб чат > Подключиться
Шаг 3: Заполните сайт(ы) где виджет будет добавлен.
Обратитесь к следующему вопросу о том, как веб-сайты могут быть в белом виде.
Если пользователь добавитhttps://app.respond.io, то в белый список будет добавлено толькоhttps://app.respond.io. Любые другие поддомены или root не должны работать.
Если пользователь добавитhttps://*.respond.io, то все поддомены, включая корневой домен, будут добавлены в белый список.
Если пользователь добавитhttps://respond.io, то в белый список будет добавлен только корневой домен.
Шаг 4:Выберите цвет темы для виджета с помощью интерактивного выбора цветов.
Выберите цвет, соответствующий вашему бренду , цвету и веб-сайту.
Шаг 5:Выберите значок для виджета для отображения на сайте. Если вы предпочитаете загружать пользовательский значок, вы можете загрузить квадратный значок с рекомендуемым размером 256px x 256px.
Виджеты могут быть дополнительно настроены после подключения.
Step 6: НажмитеДалее> Добавить скрипт на ваш предпочтительный веб-сайт. Кроме того, вы можете отправить инструкции по установке кому-то еще по электронной почте.
Вам может потребоваться веб-мастер-администратор или технический администратор для установки виджета чата на сайт. Пожалуйста, при необходимости обращайтесь за помощью.
В зависимости от того, какая система вы используете для создания и управления вашим сайтом, мы создали пошаговое руководство, чтобы прочитать вас через установку виджета чата на ваш сайт.
Для других платформ или услуг, перейдите к источнику HTML страницы. Вставьте скрипт перед тегом </body>.
<body>
...
...
...
<Paste Script Here>
</body>Если вам нужна помощь, вы можете переслать скрипт вместе с инструкциями по установке администратору. Выберите соответствующий флажок и введите адрес электронной почты тех, кто может помочь вам установить плагин чата.
После успешной установки скрипта ответ.io чат будет отображаться на вашем сайте.
Шаг 1:в вашей рабочей области, перейдите вНастройки>канал
Шаг 2: Найдите канал чата веб-сайта > нажмите Настроить
Настройте виджет веб-сайта так, чтобы он соответствовал внешнему виду веб-сайта', чтобы виджет выглядел безупречно. На правой стороне страницы есть предварительный просмотр виджета чата сайта. Любая модификация виджета будет отражать виджет, чтобы помочь вам лучше понять, что вы настраиваете.
Вы можете настроить следующие параметры, чтобы изменить внешний вид виджета на сайте.
Поле | Описание |
|---|---|
Цвет темы | Выбранный цвет будет использоваться в качестве основного цвета вашего виджета. |
Цвет текста | Выбранный цвет будет использоваться в качестве основного текста вашего виджета. |
Иконка чата сайта | Выбранный значок используется внутри пузыря виджета вместе с цветом темы. При необходимости вы можете загрузить пользовательскую иконку. |
Всплывающее сообщение | Всплывающее сообщение отображается посетителям сайта раз в 5 секунд после загрузки страницы. Если не определено, то посетителям сайта не будет выводиться всплывающее сообщение. |
Иконка для чата на веб-сайте:
Максимальный размер файла: 1 МБ
Максимальный размер файла: 256 x 256 px
Форма: Квадрат
Поле | Описание |
|---|---|
Выровнять по | Пользователи могут указать положение, показывать ли виджет слева или справа от платформы. |
Вертикальное расстояние | Пользователи могут указать количество вертикальных интервалов между виджет чата сайта и нижней части экрана. |
Расстояние по горизонтали | Пользователи могут указать количество горизонтальных интервалов между виджет чата сайта и стороной экрана. |
Размер виджета | Пользователи могут выбрать размер виджета из Меньшего, Стандартного или Большого. |
Параметры отображения | Пользователи могут выбрать отображение этого виджета на рабочем столе, мобильных устройствах или обоих устройствах. |
Поле | Описание |
|---|---|
Заголовок | Заголовок будет отображаться в верхней части виджета чата. |
Tagline | Ярлык будет отображаться под заголовком. |
Логотип чата сайта | Перетащите здесь изображение вашего логотипа, чтобы оно отображалось в верхней части чата веб-сайта. Формат может быть в PNG, SVG или JPG и размер файла не превышает 4.0 MB. |
Иконки канала | Эта опция позволит Контактам связаться с вами через предпочтительный канал, предоставляя соответствующие параметры. Вы можете добавить до шести каналов и он будет показан в верхней части виджета чата сайта. |
Цвет иконок канала | Значки каналов могут быть отображены в белой или цветной форме в виджете чата. Выберите Белый или Цвет, чтобы перейти с темой цвета виджета чата. |
Проверка логотипа чата веб-сайта:
Максимальный размер файла: 4МБ
Максимальный размер файла: 1024 x 1024 px
Форма: Квадрат
Если виджет чата веб-сайта никогда не был настроен раньше, подключенные каналы с адекватной информацией будут перечислены по умолчанию как ссылки канала виджета.
Вы можете добавить виджет канала ссылки и указать необходимую информацию для выбранного канала.
Вот список полей ввода, требуемых для каждого из каналов ссылок.
Ссылки канала | Требуется поле ввода |
|---|---|
Номер телефона WhatsApp | |
Facebook Messenger | Идентификатор страницы Facebook |
Телеграмма | Имя робота Telegram |
Twitter ID | |
LINE | ID линии |
Viber | Название публичного счета Viber |
СМС | SMS-номер телефона |
Почта | Email Address |
Звонок | Номер телефона |
Пользовательская ссылка | URL-адрес и значок |
Custom QR | Изображение и значок QR |
Проверка для значка канала:
Максимальный размер файла: 1 МБ
Максимальный размер файла: 256 x 256 px
Форма: Квадрат
Включение этой опции добавит форму предварительного чата на ваш чат веб-сайта. Если эта опция включена, посетителям сайта будет предоставлена форма для заполнения перед началом чата.
При включенной опции вы можете включить дополнительные настраиваемые поля, когда это необходимо. Кроме того, вы можете настроить метку для полей по умолчанию о том, как они появляются в ваших контактах.
Метки полей могут быть настроены на другой язык для соответствия языку сайта'с.
Поле | Описание |
|---|---|
Input Bar Text | Этот текст будет функционировать как плейсхолдер в области печатания. |
Text Font | Шрифт, который будет использоваться для отображения шрифта в виджете чата сайта. |
Когда эта опция отмечена, посетитель сайта не имеет возможности прикрепить вложение в виджете чата сайта.
При использовании этой опции виджет будет полностью скрыт. До нажатия якорной ссылки или открытия чата через программный API.
#webchat_виджет
Используя вышеуказанный якорь вы можете создать кнопку на своей странице, чтобы открыть виджет один клик.
С помощью этой опции вы можете удалить брендинг respond.io с вашего виджета.
Шаг 1: Нажмите Параметры > Каналы
Шаг 2: Locate the Website Chat > click Manage
Шаг 3: На странице Конфигурации чата на сайте вы увидите следующие конфигурации:
Чат Связь - Ссылка на URL вашего контакта для доступа к каналу.
Название канала - Название канала можно изменить, оно используется внутри для идентификации канала.
Website Domains - Сайт(ы), которые подключены к вашему виджету.
Чат сайта - Код, который вы можете вставить в HTML-код вашего сайта, если вам нужно получить сгенерированный фрагмент кода.
Если вы don't включить ваш сайт в этот список, ваш виджет выиграл't загрузки. Вы можете добавить несколько URL, если вы'повторно используете плагин на нескольких веб-сайтах.
Шаг 4: Нажмите Сохранить изменения для обновления страницы настройки чата веб-сайта
Пользователи вашего сайта могут быть идентифицированы путем добавления простого кода JavaScript в код вашего сайта. Как только пройденный идентификатор будет совпадать с существующим контактом, текущий разговор будет возобновлен.
Термин «пользователь» используется в контексте вашего сайта. На платформе respond.io мы по-прежнему называем их «Контакты».
window.__respond_settings = {
identifier: "customer@example. om",
Имя: "Янв",
lastName: "Doe",
Телефон: "60123456789",
E-mail: "customer@example. om",
profilePic: "https://static.independent.co. k/s3fs-public/thumbnails/image/2015/07/08/14/pic. pg",
код страны: "MY",
язык: "ru", "ru",
// Пользовательские поля
custom_fields: {
// slugs of custom fields
number: 123,
описание: "некоторый текст",
},
};Руководство по использованию кода
Отредактируйте код (указанный ниже) для отправки respond.io идентификатора текущего пользователя. Это может быть адрес электронной почты или ID контакта или основываться на любом другом поле контакта. Пожалуйста, обратите внимание, что идентификатор является обязательным полем.
Вставьте код прямо в тег заголовка каждой страницы, где вы хотите, чтобы отображался чат.
Скрипт идентификации зарегистрированных пользователей должен быть размещен над кодом чата сайта, который можно найти в диалоге настройки чата сайта.
Вы также можете отправить поля контактов respond.io Контакты, связанные с Вашими Контактами, чтобы мы сохранили поле Контакта во время процесса создания контакта. Имя поля (или слаг) может быть найдено в модуле Контакты.
Обратите внимание, что если вы используете эту функцию, форма предварительного чата будет игнорироваться, что означает, что контактам не нужно заполнять их информацию перед началом разговора.
Примером выше является передача адреса электронной почты как идентификатора и в процессе создания контактов, все передаваемые поля будут сохранены.
Виджет чата сайта может быть открыт и закрыт с помощью кода сайта JavaScript. Это позволяет создать пользовательскую "Чат с нами" кнопка на вашем сайте, и запустите виджет чата Сайта, чтобы открыть, когда посетитель нажимает на кнопку.
Открыть чат
Описание: Открывает виджет чата.
Синтаксис: $respond.do("чат:open")
Закрыть чат
Описание: Закрывает виджет чата.
Синтаксис: $respond.do("чат:закрыть")
Чат открыт
Описание: Обрабатывает открытое событие в чате (вызывает функцию callback).
Синтаксис:$respond.on("чат:opened", callback)
Чат был закрыт
Описание: обрабатывает событие закрытия виджета чата (запускает функцию обратного вызова ).
Синтаксис:$respond.on("чат:closed", callback)
Открыт ли чат чат?
Описание: Возвращает true при открытии чата, иначе false.
Синтаксис: $respond.is("чат:open")
Чат закрыт?
Описание: Возвращает true в случае закрытия виджета чата, иначе false.
Синтаксис: $respond.is("чат:closed")
Возможно, есть несколько причин, по которым сообщения не доставляются:
Контакт покинул сайт.
Контакты'с бездействием может превысить период ожидания таймаута.
Связаться с клиентом'могут возникнуть проблемы с подключением к интернету.
Убедитесь, что код установлен правильно. Обратитесь к инструкциямздесьо том, как установить виджет чата веб-сайта.
Обязательно укажите сайт, на котором будет установлен виджет в белом виде. Обратитесь к шагу 3 изПодключение виджета чата сайтао том, как включить в белый список ваш домен.
Соответствующие статьи 👩💻