Чат-виджет: окно чата на вашем сайте. Посетитель нажимает кнопку в углу экрана и пишет вопрос, сообщение приходит в раздел Диалоги tuk-tuk.online. Отвечает оператор или AI-ассистент.
Установка: один тег <script> на сайте. Канал доступен на бесплатном тарифе.
#Когда это нужно
- Общаться с посетителями сайта в реальном времени.
- Заменить форму обратной связи чем-то проще для посетителя.
- Поставить на сайт AI-чатбота, который отвечает круглосуточно.
#Как подключить
#Создать канал
- Откройте Каналы связи.
- Нажмите «Подключить» на карточке «Чат-виджет».
- Введите название (например, «Виджет основного сайта»).
- Нажмите «Сохранить»: канал появится в списке, в его карточке будет код для вставки.
#Вставить код на сайт
Скопируйте код и вставьте на сайт перед закрывающим тегом </body>:
<script
src="https://lk.tuk-tuk.online/widget/chat-widget.js"
data-channel-id="ВАШ_CHANNEL_ID"
defer
></script>#Проверить, что работает
- Откройте сайт: в углу экрана появится кнопка-пузырь.
- Нажмите на неё и отправьте сообщение.
- Откройте Диалоги: сообщение появится как новый диалог.
#Что умеет
#Внешний вид
- Вкладки настроек: Основные, Дизайн, Кнопки, Автодействия, Интерактивные, Всплывашки, Домены, Установка.
- Заголовок и подзаголовок окна чата.
- Приветственный текст, который видит посетитель.
- Кнопка «Сохранить»: изменения появятся на сайте после сохранения.
Настраивается в разделе Настройки виджета.
Основные настройки:
| Параметр | Что это |
|---|---|
| Цвет акцента | Главный цвет кнопки и заголовка виджета |
| Положение | Левый или правый нижний угол экрана |
| Отступы | Расстояние от края экрана в пикселях |
| Имя оператора | Как зовут оператора в окне чата |
| Аватар | Иконка оператора |
| Приветствие | Текст, который посетитель видит при открытии чата |
Кнопка-пузырь:
| Параметр | Что это |
|---|---|
| Стиль | Круглая кнопка, баннер с текстом или своя иконка |
| Размер | Маленькая, средняя или большая |
| Цвет | Цвет кнопки, может отличаться от цвета акцента |
| Текст баннера | Надпись на кнопке в стиле «баннер» |
Размеры окна:
| Параметр | Что это |
|---|---|
| Ширина | Ширина окна чата |
| Высота | Высота окна чата |
| Размер шрифта | Размер текста в сообщениях |
#Кнопки быстрых ответов
Кнопки показываются в чате. Посетитель нажимает кнопку, её текст уходит как сообщение. Примеры: «Узнать цены», «Заказать звонок», «Задать вопрос».
Кнопки располагаются горизонтально или вертикально. Есть режим, в котором они исчезают после первого сообщения.
#Popup-окно
Всплывающее окно, которое привлекает внимание посетителя и предлагает начать диалог.
| Параметр | Что это |
|---|---|
| Шаблон | 6 готовых дизайнов |
| Заголовок и текст | Сообщение, которое видит посетитель |
| Задержка | Через сколько секунд показать popup |
| Частота | Как часто показывать повторным посетителям |
#Авто-действия
Правила вида «условие: действие», которые срабатывают без участия оператора. Примеры:
- Посетитель на странице дольше 30 секунд: отправить приветствие.
- Посетитель на странице цен: показать popup с предложением.
- Нерабочее время: показать форму «Оставьте email, мы ответим».
- Определённая UTM-метка: отправить персональное сообщение.
Каждое авто-действие состоит из условий (когда срабатывает) и действия (что делает).
#Отслеживание посетителей
| Данные | Описание |
|---|---|
| Город и страна | Определяются по IP-адресу |
| Текущая страница | На какой странице находится посетитель |
| Браузер и ОС | Chrome, Firefox, Windows, macOS и другие |
| Источник | Прямой заход, поиск, реклама |
| UTM-метки | utm_source, utm_medium, utm_campaign |
Данные видны в разделе Посетители.
#Мобильная и десктопная версия
Виджет можно показывать или скрывать отдельно для мобильных и десктопных устройств. Например, на телефоне показывать только кнопку звонка, а на компьютере полноценный чат.
#Звуковые уведомления
При новом сообщении от посетителя звучит сигнал. Громкость настраивается.
#Типы сообщений
Посетитель отправляет:
- текст;
- файлы и документы.
Оператор отправляет:
- текст;
- изображения;
- документы;
- голосовые сообщения;
- интерактивные сообщения (кнопки, ссылки, карусели) через цепочки автоматизации.
#Домены
По умолчанию виджет работает на любом сайте. Для безопасности можно задать список разрешённых доменов: виджет будет работать только на них.
#Частые проблемы
| Проблема | Что делать |
|---|---|
| Виджет не появляется | Проверьте, что скрипт вставлен перед </body> |
| Виджет появляется с задержкой | Это норма: скрипт загружается после основной страницы |
| Нет уведомлений | Проверьте настройку звука в параметрах виджета |