Чат на сайте

Чат на сайте представляет собой внешний канал для взаимодействия ваших клиентов и чат-бота на вашем веб-сайте или в мобильном приложении.

Примечание: Обратите внимание! В данной документации могут встречаться другие названия этого функционального блока: web chat widget, «виджет веб чата», «веб чат» и др. Это всё будет относиться именно к данному разделу.

Внутри такого виджета может быть абсолютно такой же функционал чат-бота, как и в остальных мессенджерах, а не просто классический для веб-сайтов «чат на сайте с оператором» (наподобие Jivosite, LiveTex и других). Вы можете настроить его так, как необходимо вам, чтобы решить поставленную бизнес задачу.

Быстрая навигация:

• Подключение виджета

• Настройки веб-чата

  • Программная настройка веб-чата на странице вашего сайта

• Сценарии вовлечения

Подключение виджета

После того как вы перешли в раздел настройки веб чата, платформа Fasttrack сгенерировала уникальный код для вставки виджета чата на ваш веб-сайт. Код будет иметь следующий вид:

<script src="https://dashboard.fstrk.io/widget-asset/00000000-0000-0000-0000-000000000000.js"></script>

Его необходимо установить перед закрывающем тегом </body> на страницах вашего веб-сайта.

Настройки веб-чата

1. Разрешенные типы файлов для загрузки — расширения файлов, которые будут доступны для загрузки от пользователей;

2. Максимальный размер загружаемых файлов — максимальный размер загружаемых файлов от пользователя (в Мб);

3. Имя отправителя — имя бота, которое будет отображаться в веб чате при каждом сообщении;

4. Основной цвет — лидирующий цвет веб чата (используется в «шапке» виджета);

5. Второстепенный цвет — побочный цвет элементов веб чата;

6. Цвет фона кнопки открытия виджета;

7. Цвет фона;

8. Цвет текста;

9. Цвет ошибок;

10. Заголовок — текст, который будет показан в «шапке» веб чата при открытии;

11. Подзаголовок — текст, который будет показан ниже заголовка (более мелким шрифтом);

12. Приглашение 1 — текст, который будет отображен сразу после полной загрузки веб-сайта;

13. Приглашение 2 — текст, который будет отображен спустя некоторое время, если не было никакого пользовательского взаимодействия с виджетом веб чата (он не был открыт);

14. Платформы — список мессенджеров, в которые можно перейти с титульной страницы веб виджета чата;

15. Текст стартовой кнопки;

16. Рекламная кампания по стартовой кнопке;

17. Текст кнопки №1 — название кнопки, которая будет отображена первая в списке при открытии веб виджета;

18. Рекламная кампания по кнопке №1 — указание рекламной компании (диплинка) для кнопки;

19. Текст кнопки №2 — название кнопки, которая будет отображена вторая в списке при открытии веб виджета;

20. Рекламная кампания по кнопке №2 — указание рекламной компании (диплинка) для кнопки;

21. Текст кнопки №3 — название кнопки, которая будет отображена третья в списке при открытии веб виджета;

22. Рекламная кампания по кнопке №3 — указание рекламной компании (диплинка) для кнопки;

23. Отображать 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 }}

Сценарии вовлечения

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