# Чат на сайте

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

> **Примечание:** Обратите внимание! В данной документации могут встречаться другие названия этого функционального блока: 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>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.fstrk.io/knowledge_base/instructions/old/glavnaya-stranica-proekta/chat-na-saite.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.