Виджет позволяет встраивать чат:
- на сайт,
- на авторизованную зону сайта с передачей данных о пользователе,
- в мобильные приложения.
Виджет автоматически адаптируется к разрешению экрана. На мобильных устройствах виджет раскрывается в полноэкранном режиме, а на больших экранах виджет открывается в правой части экрана.
Возможности виджета
Основные возможности виджета:
- кнопка чата с отображением количества непрочитанных сообщений,
- работа с текстовыми сообщениями (с html форматированием со стороны чат-бота),
- работа с файлами и изображениями,
- передача геолокации пользователя,
- push-уведомления о новых сообщениях,
- использование кнопок в чате,
- отправка и получение emoji (смайлов),
- оценка диалога,
- режим кобраузинга,
- настройка цветовой схемы чата,
- кастомизация внешнего вида с помощью css,
- кастомизация надписей,
- поддержка русского, английского языка интерфейса,
- авторизация пользователя.
Встраивание виджета
Встраивание на сайтДля встраивания на сайт, необходимо на каждой странице, где должен быть доступен виджет, разместить код, предлагаемый в настройках канала виджета. Код должен быть размещен в блоке <script> непосредственно перед закрывающим тегом </body>.
Передача данных пользователяДля передачи данных пользователя в авторизованной зоне сайта, необходимо включить режим "Авотризация через Java Script" в настройках канала виджета, а также дополнительно к встраиванию виджета добавить на страницу сайта код передачи данных в JavaScript:
<script>
window.__WebchatUserCallback = function () {
var data={
uuid: '1234567890',
first_name: 'Michael',
last_name: 'Ivanov',
email: 'test@gmail.com',
phone: '9120000000',
contract: '1234567890',
birthday: '01.01.1990',
hash: '600ec2d061bf38ec47eced9b7a838500d4b89fa75286b67502a4e38a798e8c12'
};
return data;
}
</script>
Обязательным для заполнения является поле
uuid. Данные пользователя попадают в анкету пользователя, а также в системные слоты диалога. Таким образом, их можно разместить в анкете для оператора, а также они доступны для использования ботом.
Подпись данных пользователя
При необходимости гарантировать невозможность подмены данных пользователя самим пользователем, можно включить режим "Требовать криптографическую подпись клиента" в настройках канала виджета, а также указать соль.
В этом случае, серверная сторона сайта должна сформировать хеш передаваемых данных и передать его в поле "hash". Сервер CraftTalk при получении данных пользователя, также сформирует хеш полученных данных и сверит его с переданным хешом. При несоответствии хешей, сессия с клиентом не будет установлена.
Алгоритм формирования хеша:
- hash = sha256(salt + sha256(salt + source_string))
- Соль для хэширования (salt) – формируется случайная строка длиной 10-15 символов. Она должна быть известна серверу, генерирующему hash, и прописана в настройках соответствующего веб-чат канала в CraftTalk. Внимание! Соль никогда не должна передаваться на клиентскую сторону сайта (на клиентскую сторону передается только hash).
- Алгоритм вычисления source_string для hash: объединяются в указанном порядке значения полей, возвращённых WebchatUserCallback, при отсутствии поля берётся пустая строка:
function checkStringField(field) {
if (typeof field === "string" && field.length \> 0)
{ return field; }
else
{ return "" }
}
function getStringForHash(visitor) {
return
checkStringField(visitor["uuid"]) +
checkStringField(visitor["first_name"]) +
checkStringField(visitor["last_name"]) +
checkStringField(visitor["contract"]) +
checkStringField(visitor["phone"]) +
checkStringField(visitor["email"]) +
checkStringField(visitor["birthday"]);
}
- В настройках канала виджета можно дополнительно указать обязательные поля при авторизации через javascript (через запятую).
Встраивание в мобильные приложения Доступно несколько вариантов встраивания чата в мобильное приложение:
Подключение каналов вебчата с единой историей и синхронизацией сообщений
Часто бывает необходимо создать несколько каналов с единой историей и полной синхронизацией всех сообщений. Например, это актуально для чата в личном кабинете и мобильном приложении. При этом настройки виджетом в этих каналах могут различаться.
В этом случае необходимо сконфигурировать необходимое количество каналов виджетов, и в настройках второго канала включить режим "синхронизировать с чатом", где необходимо выбрать первый канал.
Дополнительная кастомизация виджетаВиджет вебчата предлагает очень большое количество стандартных настроек, включая изменение языка, цвета, надписей и многих других параметров отображения виджета. При необходимости осуществить дополнительные настройки, не поддерживаемые виджетом напрямую, имеется возможность указать в настройках виджета
Пользовательский CSS. Здесь можно внести минифицированный css код, который может менять отображение виджета. Внимание! При использовании данной функции возможна ситуация, когда при обновлении виджета со стороны CraftTalk некоторые дополнительные css настройки станут некорректными. Мы стараемся избегать данной ситуации, но не можем гарантировать этого в полной мере.