> For the complete documentation index, see [llms.txt](https://docs.fstrk.io/knowledge_base/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.fstrk.io/knowledge_base/instructions/old/glavnaya-stranica-proekta/chat-na-saite.md).

# Чат на сайте

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

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

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

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

* Подключение виджета
* Настройки веб-чата
  * Программная настройка веб-чата на странице вашего сайта
* Сценарии вовлечения

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

<figure><img src="/files/CmXB0RsxqqMr9x6mHxBl" alt=""><figcaption></figcaption></figure>

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

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

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

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

<figure><img src="/files/NQsUm9ROg70tLvBHURgD" alt=""><figcaption></figcaption></figure>

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 }}
```

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

<figure><img src="/files/BYKiKuqaybBEtSQBVecx" alt=""><figcaption></figcaption></figure>

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