Как установить онлайн-чат на сайт на Tilda: пошагово

Tilda любят за то, что сайт можно собрать без программиста. Хорошая новость — онлайн-чат на Tilda тоже ставится без программиста: достаточно вставить одну строку кода в настройках сайта и переопубликовать страницы. В этой инструкции разберём установку по шагам, какой тариф для этого нужен, как проверить, что чат работает, и как показать его только на одной странице.

Что понадобится

• сайт на Tilda на платном тарифе Personal или Business — на бесплатном тарифе вставка собственного кода недоступна;
• доступ к настройкам сайта в Tilda;
• аккаунт в ChatDeck и публичный ключ виджета вида pk_…. Его можно скопировать в настройках ChatDeck вместе с готовым кодом установки.

Если аккаунта нет — зарегистрируйтесь, это бесплатно.

Как установить онлайн-чат на Tilda

Код виджета выглядит так:

<script src="https://chatdeck.ru/widget.js" data-chatdeck-key="pk_…" async></script>

Вместо pk_… должен стоять ваш ключ. Проще всего скопировать код целиком из настроек ChatDeck — ключ там уже подставлен.

1. Откройте Tilda и перейдите в нужный проект.
2. Нажмите «Настройки сайта».
3. Откройте раздел «Вставка кода».
4. В поле «HTML-код для вставки внутрь HEAD» вставьте код виджета и сохраните.
5. Вернитесь к списку страниц и нажмите «Опубликовать все страницы».
6. Откройте опубликованный сайт — в углу экрана появится кнопка чата.

Шаг 5 обязателен. Tilda добавляет код из настроек только в опубликованные заново страницы, поэтому без переопубликации чат появится не везде — или не появится вовсе.

Совет: если вы позже меняете ключ или удаляете код, тоже не забудьте опубликовать все страницы заново.

Как проверить, что чат работает

1. Откройте сайт в режиме инкогнито или в другом браузере — так вы увидите его как обычный посетитель.
2. Нажмите на кнопку чата и отправьте тестовое сообщение.
3. Откройте панель операторов ChatDeck: диалог должен появиться во входящих.
4. Ответьте из панели и убедитесь, что сообщение пришло в виджет на сайте.

Вместе с диалогом оператор видит, на какой странице сейчас посетитель, его браузер, систему, страну, город и местное время. Это помогает сразу понять контекст вопроса.

Если чат не появился

• проверьте, что страницы опубликованы после вставки кода;
• убедитесь, что код вставлен в поле для HEAD, а не в другое место, и скопирован полностью, с закрывающим тегом;
• проверьте, что тариф Tilda позволяет вставлять свой код;
• обновите страницу без кеша или откройте её в режиме инкогнито.

Как поставить чат только на одну страницу

Иногда чат нужен не на всём сайте, а, например, только на странице с тарифами или на лендинге рекламной кампании. В этом случае не добавляйте код в настройки сайта, а используйте блок T123 («HTML-код»):

1. Откройте нужную страницу в редакторе Tilda.
2. Добавьте блок T123 — он находится в категории «Другое».
3. Вставьте в него код виджета.
4. Опубликуйте эту страницу.

Чат появится только там, где стоит блок. Если позже захотите включить чат на всём сайте, удалите блок T123 и вставьте код в настройки сайта — иначе на странице окажется два подключения.

Не испортит ли чат дизайн сайта

На Tilda дизайн — главное, поэтому это частый вопрос. Виджет ChatDeck работает в Shadow DOM — изолированной части страницы. Стили сайта не влияют на чат, а стили чата не влияют на сайт. Внешний вид настраивается в панели ChatDeck:

• тема — светлая, тёмная, автоматическая по системе посетителя или собственные цвета;
• скругление углов;
• положение кнопки — справа или слева;
• размер кнопки запуска.

Язык виджета — русский или английский — определяется автоматически. Скрипт загружается асинхронно и не тормозит отрисовку страницы.

Что настроить после установки

• Приветствие и внешний вид — подберите цвета под фирменный стиль сайта.
• Рабочие часы — вне их посетители увидят, когда вернутся операторы.
• Уведомления — поставьте десктопное приложение для macOS или Windows и приложение для iOS, чтобы не пропускать сообщения.
• ИИ-ассистент — ответит на типовые вопросы сразу и передаст сложные человеку. Подробнее — в статье про ИИ-консультанта для сайта.

Посетители могут прикладывать файлы до 10 МБ — например, скриншот или фото товара. Если связь пропадёт, сообщения встанут в очередь и отправятся, когда соединение восстановится. После завершения диалога посетитель может поставить оценку от 1 до 5.

Советы для сайтов на Tilda

• Подберите цвет кнопки под сайт. Чат должен быть заметен, но не спорить с главным призывом к действию на странице.
• Проверьте мобильную версию. Большая часть посетителей лендингов приходит с телефона: убедитесь, что кнопка чата не перекрывает важные элементы, например кнопку заявки. При необходимости перенесите её на другую сторону экрана или уменьшите.
• Напишите понятное приветствие. Короткая фраза о том, с чем вы готовы помочь, работает лучше общего «Здравствуйте!».
• Не дублируйте каналы без нужды. Если на странице уже есть форма заявки, чат хорошо дополняет её для тех, кому нужно сначала задать вопрос.
• Назначьте ответственного. Даже если операторов несколько, договоритесь, кто первым берёт новые чаты в рабочее время.

Частые вопросы

Можно ли поставить чат на бесплатном тарифе Tilda?

Нет. Вставка собственного кода в Tilda доступна на платных тарифах Personal и Business. На бесплатном тарифе поле для кода недоступно.

Куда вставлять код — в HEAD или перед закрывающим body?

Виджет работает в обоих вариантах. В Tilda удобнее всего поле «HTML-код для вставки внутрь HEAD» в настройках сайта.

Почему чат появился не на всех страницах?

Скорее всего, не все страницы были переопубликованы после вставки кода. Нажмите «Опубликовать все страницы».

Сколько операторов можно подключить?

Сколько угодно. В ChatDeck нет платы за оператора и нет ограничения на их количество.

Установите чат за пару минут

Чат, панель операторов и приложения в ChatDeck бесплатны. Создайте аккаунт, скопируйте код и следуйте инструкции для Tilda — через пару минут посетители смогут написать вам прямо с сайта. Если у вас есть и другие сайты, загляните в список всех интеграций. А общий порядок установки со скриншотами — в уроке «Установка чата на сайт».