Чат на сайте
Чат на сайте представляет собой внешний канал для взаимодействия ваших клиентов и чат-бота на вашем веб-сайте или в мобильном приложении.
Примечание: Обратите внимание! В данной документации могут встречаться другие названия этого функционального блока: web chat widget, «виджет веб чата», «веб чат» и др. Это всё будет относиться именно к данному разделу.
Внутри такого виджета может быть абсолютно такой же функционал чат-бота, как и в остальных мессенджерах, а не просто классический для веб-сайтов «чат на сайте с оператором» (наподобие Jivosite, LiveTex и других). Вы можете настроить его так, как необходимо вам, чтобы решить поставленную бизнес задачу.
Быстрая навигация:
Подключение виджета
Настройки веб-чата
Программная настройка веб-чата на странице вашего сайта
Сценарии вовлечения
Подключение виджета
Здесь картинка: attachments/2697953286/2701394008.jpg
После того как вы перешли в раздел настройки веб чата, платформа Fasttrack сгенерировала уникальный код для вставки виджета чата на ваш веб-сайт. Код будет иметь следующий вид:
<script src="https://dashboard.fstrk.io/widget-asset/00000000-0000-0000-0000-000000000000.js"></script>Его необходимо установить перед закрывающем тегом </body> на страницах вашего веб-сайта.
Настройки веб-чата
Здесь картинка: attachments/2697953286/2701426758.jpg
Разрешенные типы файлов для загрузки — расширения файлов, которые будут доступны для загрузки от пользователей;
Максимальный размер загружаемых файлов — максимальный размер загружаемых файлов от пользователя (в Мб);
Имя отправителя — имя бота, которое будет отображаться в веб чате при каждом сообщении;
Основной цвет — лидирующий цвет веб чата (используется в «шапке» виджета);
Второстепенный цвет — побочный цвет элементов веб чата;
Цвет фона кнопки открытия виджета;
Цвет фона;
Цвет текста;
Цвет ошибок;
Заголовок — текст, который будет показан в «шапке» веб чата при открытии;
Подзаголовок — текст, который будет показан ниже заголовка (более мелким шрифтом);
Приглашение 1 — текст, который будет отображен сразу после полной загрузки веб-сайта;
Приглашение 2 — текст, который будет отображен спустя некоторое время, если не было никакого пользовательского взаимодействия с виджетом веб чата (он не был открыт);
Платформы — список мессенджеров, в которые можно перейти с титульной страницы веб виджета чата;
Текст стартовой кнопки;
Рекламная кампания по стартовой кнопке;
Текст кнопки №1 — название кнопки, которая будет отображена первая в списке при открытии веб виджета;
Рекламная кампания по кнопке №1 — указание рекламной компании (диплинка) для кнопки;
Текст кнопки №2 — название кнопки, которая будет отображена вторая в списке при открытии веб виджета;
Рекламная кампания по кнопке №2 — указание рекламной компании (диплинка) для кнопки;
Текст кнопки №3 — название кнопки, которая будет отображена третья в списке при открытии веб виджета;
Рекламная кампания по кнопке №3 — указание рекламной компании (диплинка) для кнопки;
Отображать copyright — чекбокс для переключения отображения копирайта с указанием ссылки на платформу Fasttrack;
Программная настройка веб-чата на странице вашего сайта
Веб-чат может динамически (на программном уровне) изменять свои настройки и/или собирать контекст с последующей передачей его на платформу Fasttrack.
Примечание: Обратите внимание! Все настройки, переданные из скрипта — будут являться для платформы приоритетными. Следовательно, настройки веб-чата на самой платформе (в веб интерфейсе) будут переопределены.
Расположите дополнительный скрипт (JavaScript) с настройками и контекстом, который вы хотите передать на платформу после старта веб-чата, строго после вызова основного скрипта:
// Основной сприпт вызова веб-чата:
<script src="https://dashboard.fstrk.io/widget-asset/00000000-0000-0000-0000-000000000000.js"></script>
// Дополнительный скрипт с настройками веб-чата:
<script>
window.fasttrack = {
// Настройки веб-чата:
settings: {
// Аватарка бота:
botAvatar: "http://image.com/avatar.png",
// Текст в обложке:
cover: {
description: "Вы можете пообщаться с оператором или найти ответы на частые вопросы",
title: "Добро пожаловать!"
},
// Направление выпадения иконок, по оси Y или X
direction: "Y",
// Цвета веб-чата:
styles: {
// Основной цвет (фон, шапка):
mainColor: "red",
// Цвет активных элементов (сообщения, круглая кнопка, кнопка Открыть чат и пр.):
secondaryColor: "blue"
},
// Показывать виджет слева (left) или справа (right):
side: "right",
// Отступ левого/правого края браузера:
offsetX: 0,
// Отступ от нижнего края браузера:
offsetY: 0,
// Включить/выключить виджет на странице:
widgetEnable: true
},
// Основные данные о клиенте:
user: {
// Имя клиента:
firstName: "Иван",
// Фамилия клиента:
lastName: 'Иванов',
// Имя + Фамилия клиента:
username: 'Пользователь сайта'
},
// Контекст клиента, доп. данные (в свободном формате):
context: {
one: 1,
two: 2
}
};
</script>Это может быть полезно, например, когда нужно передать со страницы сайта город клиента, чтобы открыть чат-сессию с верной командой операторов Чат-центра Fasttrack.
В этом случае вам нужно будет лишь передать название города в словаре context:
<script>
window.fasttrack = {
// ...
context: {
// ...
city: "Санкт-Петербург"
}
};
</script>В стартовом сценарии (узле) веб-чата эта переменная будет доступна в таком виде:
{{ get_params.context.city }}Сценарии вовлечения
Здесь картинка: attachments/2697953286/2701394016.jpg
При необходимости, чтобы привлечь внимание посетителей вашего веб-сайта к виджету чата, вы можете настроить интерактивное поведение. Например, автоматическое открытие виджета через указанный промежуток времени после загрузки веб-сайта.
Last updated