---
title: "Чат-виджет для сайта: установка, настройка, AI-ассистент"
nav_title: "Чат-виджет для сайта"
url: https://docs.tuk-tuk.online/channels/chat-widget
markdown: https://docs.tuk-tuk.online/channels/chat-widget.md
section: "Каналы связи"
description: "Как поставить чат-виджет tuk-tuk.online на сайт за 3 минуты: код скрипта, внешний вид, кнопки быстрых ответов, popup, авто-действия, отслеживание посетителей. Доступен на бесплатном тарифе."
keywords: ["чат-виджет для сайта", "live chat бесплатно", "онлайн-консультант для сайта", "виджет чата", "установить чат на сайт", "popup чат", "чат поддержки на сайте", "альтернатива JivoSite", "онлайн чат для сайта бесплатно", "виджет обратной связи", "чат-бот для сайта"]
lang: ru
product: tuk-tuk.online
app: https://lk.tuk-tuk.online
api_base: https://back.tuk-tuk.online
---

> [!AI] Кратко
> Чат-виджет ставится на сайт одним тегом script и передаёт сообщения посетителей в раздел «Диалоги» tuk-tuk.online. Отвечает оператор или AI-ассистент; есть кнопки быстрых ответов, popup, авто-действия и данные о посетителях.
>
> - Тариф: доступен на бесплатном тарифе.
> - Путь в кабинете: Каналы связи → Подключить → Чат-виджет → название → Сохранить. Внешний вид, кнопки, popup и авто-действия: раздел «Настройки виджета».
> - Установка: тег <script src="https://lk.tuk-tuk.online/widget/chat-widget.js" data-channel-id="ID канала" defer> перед закрывающим </body>.
> - Посетитель отправляет текст и файлы; оператор: текст, изображения, документы, голосовые и интерактивные сообщения (кнопки, ссылки, карусели) через цепочки.
> - Виджет собирает город и страну по IP, текущую страницу, браузер и ОС, источник перехода и UTM-метки; данные в разделе «Посетители».
> - Список разрешённых доменов ограничивает, на каких сайтах работает виджет; по умолчанию ограничений нет.
>
> Связанные страницы: https://docs.tuk-tuk.online/channels, https://docs.tuk-tuk.online/dialogs, https://docs.tuk-tuk.online/ai/assistants, https://docs.tuk-tuk.online/chains, https://docs.tuk-tuk.online/chains/blocks/send-message

# Чат-виджет для сайта

Чат-виджет: окно чата на вашем сайте. Посетитель нажимает кнопку в углу экрана и пишет вопрос, сообщение приходит в раздел [Диалоги](https://lk.tuk-tuk.online/dialogs) tuk-tuk.online. Отвечает оператор или AI-ассистент.

Установка: один тег `<script>` на сайте. Канал доступен на бесплатном тарифе.

![Виджет чата на сайт: кнопка на сайте, переписка в кабинете](https://lk.tuk-tuk.online/help/widget-setup.webm "Виджет чата на сайт: кнопка на сайте, переписка в кабинете")

## Когда это нужно

- Общаться с посетителями сайта в реальном времени.
- Заменить форму обратной связи чем-то проще для посетителя.
- Поставить на сайт AI-чатбота, который отвечает круглосуточно.

## Как подключить

### Создать канал

1. Откройте [Каналы связи](https://lk.tuk-tuk.online/channels).
2. Нажмите «Подключить» на карточке «Чат-виджет».
3. Введите название (например, «Виджет основного сайта»).
4. Нажмите «Сохранить»: канал появится в списке, в его карточке будет код для вставки.

### Вставить код на сайт


![Вкладка «Установка»: код для вставки на сайт](https://docs.tuk-tuk.online/assets/screens/channels/widget-install.webp "Вкладка «Установка»: скопируйте скрипт и вставьте перед закрывающим тегом body.")

Скопируйте код и вставьте на сайт перед закрывающим тегом `</body>`:

```html
<script
  src="https://lk.tuk-tuk.online/widget/chat-widget.js"
  data-channel-id="ВАШ_CHANNEL_ID"
  defer
></script>
```

> [!TIP] Не знаете, куда вставить код: передайте его разработчику или веб-мастеру сайта. Обычно это занимает минуту.

## Проверить, что работает

1. Откройте сайт: в углу экрана появится кнопка-пузырь.
2. Нажмите на неё и отправьте сообщение.
3. Откройте [Диалоги](https://lk.tuk-tuk.online/dialogs): сообщение появится как новый диалог.

## Что умеет

### Внешний вид


![Настройки чат-виджета: вкладка «Основные»](https://docs.tuk-tuk.online/assets/screens/channels/widget-settings.webp)

1. Вкладки настроек: Основные, Дизайн, Кнопки, Автодействия, Интерактивные, Всплывашки, Домены, Установка.
2. Заголовок и подзаголовок окна чата.
3. Приветственный текст, который видит посетитель.
4. Кнопка «Сохранить»: изменения появятся на сайте после сохранения.


![Вкладка «Дизайн»: цвета и размеры окна](https://docs.tuk-tuk.online/assets/screens/channels/widget-design.webp "Вкладка «Дизайн»: основной цвет, цвет сообщений клиента и кнопок, размеры окна, позиция.")

Настраивается в разделе [Настройки виджета](https://lk.tuk-tuk.online/chat-widget).

Основные настройки:

| Параметр | Что это |
|---|---|
| Цвет акцента | Главный цвет кнопки и заголовка виджета |
| Положение | Левый или правый нижний угол экрана |
| Отступы | Расстояние от края экрана в пикселях |
| Имя оператора | Как зовут оператора в окне чата |
| Аватар | Иконка оператора |
| Приветствие | Текст, который посетитель видит при открытии чата |

Кнопка-пузырь:

| Параметр | Что это |
|---|---|
| Стиль | Круглая кнопка, баннер с текстом или своя иконка |
| Размер | Маленькая, средняя или большая |
| Цвет | Цвет кнопки, может отличаться от цвета акцента |
| Текст баннера | Надпись на кнопке в стиле «баннер» |

Размеры окна:

| Параметр | Что это |
|---|---|
| Ширина | Ширина окна чата |
| Высота | Высота окна чата |
| Размер шрифта | Размер текста в сообщениях |

### Кнопки быстрых ответов


![Вкладка «Кнопки»: быстрые ответы в виджете](https://docs.tuk-tuk.online/assets/screens/channels/widget-buttons.webp "Кнопки показываются под приветствием и подставляют готовый текст за клиента.")

Кнопки показываются в чате. Посетитель нажимает кнопку, её текст уходит как сообщение. Примеры: «Узнать цены», «Заказать звонок», «Задать вопрос».

Кнопки располагаются горизонтально или вертикально. Есть режим, в котором они исчезают после первого сообщения.

### Popup-окно


![Вкладка «Всплывашки»](https://docs.tuk-tuk.online/assets/screens/channels/widget-popups.webp "Всплывающее окно показывается по времени, скроллу или уходу со страницы.")

Всплывающее окно, которое привлекает внимание посетителя и предлагает начать диалог.

| Параметр | Что это |
|---|---|
| Шаблон | 6 готовых дизайнов |
| Заголовок и текст | Сообщение, которое видит посетитель |
| Задержка | Через сколько секунд показать popup |
| Частота | Как часто показывать повторным посетителям |

### Авто-действия


![Вкладка «Автодействия»](https://docs.tuk-tuk.online/assets/screens/channels/widget-auto.webp "Автодействия отправляют сообщение сами: через N секунд, при возврате, по странице.")

Правила вида «условие: действие», которые срабатывают без участия оператора. Примеры:

- Посетитель на странице дольше 30 секунд: отправить приветствие.
- Посетитель на странице цен: показать popup с предложением.
- Нерабочее время: показать форму «Оставьте email, мы ответим».
- Определённая UTM-метка: отправить персональное сообщение.

Каждое авто-действие состоит из условий (когда срабатывает) и действия (что делает).

### Отслеживание посетителей


![Страница «Посетители»: кто сейчас на сайте](https://docs.tuk-tuk.online/assets/screens/channels/widget-visitors.webp "Посетители обновляются каждые 5 секунд: город, страница, время на сайте, просмотры, UTM.")

| Данные | Описание |
|---|---|
| Город и страна | Определяются по IP-адресу |
| Текущая страница | На какой странице находится посетитель |
| Браузер и ОС | Chrome, Firefox, Windows, macOS и другие |
| Источник | Прямой заход, поиск, реклама |
| UTM-метки | utm_source, utm_medium, utm_campaign |

Данные видны в разделе [Посетители](https://lk.tuk-tuk.online/visitors).

### Мобильная и десктопная версия

Виджет можно показывать или скрывать отдельно для мобильных и десктопных устройств. Например, на телефоне показывать только кнопку звонка, а на компьютере полноценный чат.

### Звуковые уведомления

При новом сообщении от посетителя звучит сигнал. Громкость настраивается.

### Типы сообщений

Посетитель отправляет:

- текст;
- файлы и документы.

Оператор отправляет:

- текст;
- изображения;
- документы;
- голосовые сообщения;
- интерактивные сообщения (кнопки, ссылки, карусели) через [цепочки автоматизации](https://docs.tuk-tuk.online/chains).

### Домены


![Вкладка «Домены»](https://docs.tuk-tuk.online/assets/screens/channels/widget-domains.webp "Ограничьте домены, на которых работает виджет.")

По умолчанию виджет работает на любом сайте. Для безопасности можно задать список разрешённых доменов: виджет будет работать только на них.

## Частые проблемы

| Проблема | Что делать |
|---|---|
| Виджет не появляется | Проверьте, что скрипт вставлен перед `</body>` |
| Виджет появляется с задержкой | Это норма: скрипт загружается после основной страницы |
| Нет уведомлений | Проверьте настройку звука в параметрах виджета |