Разработка и интеграция чатов на платформе Tilda

Обзор встроенных возможностей Tilda и базовые настройки коммуникации

Добро пожаловать на курс «Разработка и интеграция чатов на платформе Tilda». Это первая статья нашего цикла, и мы начнем с фундамента. Прежде чем погружаться в сложные API, написание скриптов или интеграцию нейросетевых ботов, необходимо досконально изучить то, что платформа предлагает «из коробки».

Tilda Publishing — это не просто конструктор сайтов, а мощный маркетинговый инструмент. Разработчики платформы понимают, что конверсия сайта напрямую зависит от скорости коммуникации с клиентом. Именно поэтому в Tilda заложены различные механизмы для связи: от простых кнопок-ссылок до интеграции сторонних виджетов через настройки сайта без единой строчки кода.

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

Зачем сайту нужен чат?

Прежде чем переходить к технической части, давайте определим роль чата в экосистеме сайта. Современный пользователь привык к мгновенной реакции. Форма обратной связи, где ответ приходит на почту через 24 часа, работает, но теряет эффективность в нишах с быстрым принятием решений (доставка еды, срочный ремонт, консультации).

Чат или кнопка мессенджера решает три задачи:

Снижение психологического барьера. Написать «Привет, сколько стоит?» в WhatsApp проще, чем заполнять форму с именем и email.

Удержание внимания. Диалог происходит здесь и сейчас (или переносится в привычную среду пользователя).

История переписки. В случае с мессенджерами контакт сохраняется в телефоне клиента.

Уровни коммуникации в Tilda

В Tilda можно выделить три уровня реализации связи с клиентом. Мы будем двигаться от простого к сложному на протяжении всего курса.

!Схематичное изображение уровней сложности интеграции чатов в Tilda

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

1. Прямые ссылки на мессенджеры (Deep Links)

Самый простой, надежный и бесплатный способ организовать «чат» на Tilda — это использование специальных ссылок (Deep Links), которые открывают приложение мессенджера на устройстве пользователя.

Это не совсем чат на сайте, но это самый эффективный способ перевести пользователя в комфортную для него среду. Tilda позволяет привязывать такие ссылки к любым кнопкам: в Zero Block, в стандартных блоках или в меню.

WhatsApp

Для создания прямой ссылки на диалог в WhatsApp используется следующий формат:

https://wa.me/<номер>

Где <номер> — это номер телефона в международном формате без плюса, скобок и тире.

Пример: Если ваш номер +7 (999) 000-00-00, ссылка будет выглядеть так: https://wa.me/79990000000

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

Формат ссылки с текстом: https://wa.me/<номер>?text=<текст>

Текст должен быть закодирован (URL-encoded), то есть пробелы заменяются на %20.

Пример: Ссылка для отправки фразы «Хочу купить курс»: https://wa.me/79990000000?text=Хочу%20купить%20курс

Telegram

С Telegram ситуация похожая, но есть нюанс: можно давать ссылку на номер телефона или на имя пользователя (username).

Ссылка на имя пользователя (Рекомендуется):

https://t.me/<username> Пример: https://t.me/tildasupport

Ссылка на номер телефона:

https://t.me/+79990000000 Важно: Этот метод работает только если у пользователя в настройках конфиденциальности Telegram разрешено находить его по номеру телефона. Поэтому надежнее использовать username.

Viber

Для Viber используется протокол viber://:

* Для мобильных устройств: viber://add?number=<номер> * Для десктопа: viber://chat?number=<номер>

Так как мы не можем заранее знать устройство пользователя, часто используют универсальные сервисы-прокладки (мультиссылки), но о них мы поговорим в следующих уроках. В рамках базовой Tilda лучше ориентироваться на WhatsApp и Telegram.

2. Использование стандартных блоков «Контакты»

В библиотеке блоков Tilda есть категория «Контакты» (CN). Многие из этих блоков уже адаптированы под мессенджеры.

Рассмотрим наиболее полезные блоки для наших задач:

* CN101 (Контакты с картой и мессенджерами). Позволяет добавить иконки соцсетей и мессенджеров. Вам нужно просто вставить ссылки, сформированные по правилам выше, в настройках контента блока. * BF901 (Плавающие кнопки). Находится в категории «Форма и кнопка». Это блок, который фиксируется в углу экрана и раскрывается при клике, показывая список мессенджеров. Это отличная альтернатива платным виджетам.

Настройка блока BF901:

Добавьте блок BF901 на страницу (обычно в самый низ, в footer).

Зайдите в «Контент».

Заполните поля для необходимых мессенджеров (WhatsApp, Telegram, Messenger).

В «Настройках» блока отрегулируйте цвет иконок, положение (справа/слева) и анимацию появления.

> Использование нативных блоков Tilda (как BF901) предпочтительнее стороннего кода, так как они не замедляют загрузку сайта и гарантированно корректно отображаются на мобильных устройствах.

3. Встроенные виджеты в настройках сайта

Если вам нужен не просто переход в мессенджер, а полноценный онлайн-чат (Live Chat) прямо на странице сайта, Tilda предлагает интеграцию с популярными сервисами через настройки, без необходимости копировать сложные скрипты в head.

Где найти настройки?

Перейдите в Настройки сайта.

Выберите раздел Ещё.

Прокрутите вниз до секции Виджеты для сайта (или найдите кнопку «Вставка виджета чата/мессенджера»).

!Интерфейс настроек Tilda для подключения виджетов

Поддерживаемые сервисы

Tilda имеет «родную» интеграцию со следующими сервисами:

* Jivo (JivoSite) — один из самых популярных чатов в СНГ. * Chatra — минималистичный и удобный чат. * Callbackhunter — виджет обратного звонка. * Envybox — мультифункциональный виджет. * Yandex.Dialogs — чат для поиска Яндекса.

Процесс подключения (на примере Jivo)

Вам не нужно искать HTML-код на сайте Jivo. Процесс выглядит так:

Зарегистрируйтесь на сайте Jivo.

В панели управления Jivo найдите Widget ID (идентификатор виджета). Обычно это набор символов после widget/ в коде скрипта или в настройках канала связи.

Вернитесь в Tilda: Настройки сайта Ещё Jivo.

Нажмите «Редактировать» и вставьте Widget ID.

Сохраните изменения и опубликуйте все страницы сайта.

Важно: Виджет появится на всех страницах сайта. Если вам нужно скрыть его на конкретной странице (например, на странице «Спасибо за заказ»), вам придется использовать CSS-код или настройки самого сервиса Jivo, так как Tilda включает виджет глобально.

4. Дизайн и UX: Кнопка или Виджет?

При разработке чата важно понимать разницу в пользовательском опыте (UX) между кнопкой-ссылкой и скриптовым виджетом.

| Характеристика | Кнопка-ссылка (WhatsApp/Telegram) | Виджет (Jivo/Chatra) | | :--- | :--- | :--- | | Скорость загрузки | Мгновенная (это просто HTML) | Замедляет сайт (загрузка внешних JS) | | Место общения | Приложение пользователя | Окно браузера | | Удержание | Клиент уходит с сайта в приложение | Клиент остается на сайте | | Стоимость | Бесплатно | Часто требует подписки для полного функционала | | Сценарий | «Напишу и отвечу, когда удобно» | «Мне нужен ответ прямо сейчас» |

Для малого бизнеса и лендингов чаще всего эффективнее использовать кнопки-ссылки. Пользователь забирает контакт с собой. Если он закроет сайт с виджетом Jivo, вы потеряете его (если он не оставил email). Если он перешел в WhatsApp — у вас остался его номер, и вы можете продолжить диалог.

5. Работа с Zero Block

Zero Block (нулевой блок) дает безграничные возможности для дизайна кнопок чата. Вы не ограничены стандартными круглыми иконками.

Как сделать кастомную кнопку чата в Zero Block:

Создайте элемент (Shape, Image или Text).

В правой панели настроек найдите поле Link (URL).

Вставьте туда вашу ссылку формата https://wa.me/....

В поле Target выберите _blank (New Window). Это критически важно! Если не открыть ссылку в новом окне, пользователь уйдет с вашего сайта, и страница перезагрузится.

Совет по дизайну: Используйте hover-эффекты (изменение цвета или прозрачности при наведении), чтобы пользователь понимал, что элемент кликабелен. В Zero Block это настраивается в самом низу панели настроек (раздел Hover).

6. Юридические аспекты

Добавляя любой способ коммуникации, вы начинаете взаимодействовать с персональными данными (даже если это просто номер телефона в WhatsApp).

Согласно законодательству (например, 152-ФЗ в РФ), на сайте должна быть размещена Политика конфиденциальности, а под формами или кнопками связи (если они собирают данные) должно быть согласие на обработку данных.

В случае с простыми ссылками wa.me вы технически не собираете данные на сайте (сбор происходит в мессенджере), что упрощает задачу. Однако, если вы используете виджеты типа Jivo, которые могут запрашивать имя и телефон до начала диалога, убедитесь, что в настройках виджета включена галочка согласия с офертой.

Заключение

Мы рассмотрели базовые возможности Tilda для организации общения с клиентами. Вы узнали, как формировать правильные ссылки для мессенджеров, как использовать стандартные блоки и как подключать внешние виджеты через ID.

Эти методы покрывают 90% потребностей малого бизнеса. Однако, если вам нужно создать сложную логику, например, сохранять историю переписки в свою CRM, отправлять данные в Google Таблицы или создать собственного чат-бота внутри интерфейса сайта, вам потребуются более глубокие знания.

В следующей статье мы перейдем к теме «Интеграция сторонних сервисов и CRM», где разберем, как автоматизировать обработку входящих заявок из чатов.

Интеграция популярных сторонних сервисов: Jivo, Chatra и аналоги

Приветствую вас на второй лекции курса «Разработка и интеграция чатов на платформе Tilda». В предыдущей статье мы разобрали фундамент: как работают прямые ссылки на мессенджеры и встроенные блоки Tilda. Мы выяснили, что кнопка WhatsApp — это надежно, но иногда бизнесу требуется больше контроля.

Сегодня мы переходим на следующий уровень сложности и функциональности. Мы поговорим о полноценных Live Chat системах (онлайн-консультантах). Это те самые виджеты, которые «висят» в углу экрана, приглашают к диалогу и позволяют операторам отвечать клиентам в режиме реального времени, видя, на какой странице находится пользователь.

Мы детально разберем интеграцию двух лидеров рынка — Jivo (ранее JivoSite) и Chatra, а также рассмотрим альтернативные решения и универсальный способ подключения любого скрипта через код.

Зачем нужны сторонние сервисы, если есть WhatsApp?

Прежде чем мы начнем настраивать интеграцию, важно понять бизнес-логику. Почему компании платят за Jivo или Chatra, если ссылку на Telegram можно поставить бесплатно?

Вот ключевые отличия профессиональных чат-платформ:

Омниканальность. Оператор сидит в одной программе, а сообщения приходят из виджета на сайте, Telegram, WhatsApp, VK и Viber. Ему не нужно переключаться между вкладками.

Активные приглашения. Вы можете настроить сценарий: «Если клиент смотрит страницу 'Цены' дольше 30 секунд, написать: 'Помочь с расчетом стоимости?'».

Аналитика и CRM. Вы видите, откуда пришел клиент (UTM-метки), его город и историю посещений.

Наблюдение в реальном времени. Оператор может видеть, как посетитель печатает текст, еще до отправки сообщения (функция «подглядывания»), что позволяет подготовить ответ быстрее.

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

Jivo (JivoSite): Лидер рынка в СНГ

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

Этап 1: Регистрация и получение ID

Чтобы подключить Jivo, вам не нужно копировать длинный JavaScript-код (хотя такой метод тоже есть, и мы его обсудим позже). Нам нужен только уникальный идентификатор — Widget ID.

Зарегистрируйтесь на официальном сайте Jivo.

В панели управления создайте новый канал связи «Чат для сайта».

Перейдите в Настройки Установка.

Обычно там предлагается скопировать код. Внимательно посмотрите на этот код. Найдите строку, похожую на src="//code.jivosite.com/widget/AbCdEfGhIj".

Набор символов после слэша (AbCdEfGhIj) — это и есть ваш Widget ID.

Этап 2: Интеграция в Tilda

Теперь переходим в интерфейс Tilda:

Откройте Настройки сайта.

Перейдите во вкладку Ещё.

Проскролльте вниз до раздела Виджеты для сайта.

Выберите Jivo.

Вставьте полученный ID в поле JivoSite Widget ID.

Сохраните изменения.

Обязательно опубликуйте все страницы сайта. Без перепубликации скрипт не появится в коде страниц.

Настройка внешнего вида и поведения

Важный нюанс: Tilda только выводит виджет. Все настройки цвета, текстов приветствия и логики работы производятся в личном кабинете Jivo.

Если вы хотите изменить цвет кнопки чата с зеленого на фирменный красный:

Идите в панель Jivo.

Раздел «Дизайн».

Меняете цвет.

Сохраняете.

На сайте Tilda изменения подтянутся автоматически (иногда нужно очистить кэш браузера), перепубликация страниц для смены цвета уже не нужна.

Chatra: Эстетика и удобство

Если Jivo — это мощный комбайн, то Chatra — это элегантный спорткар. Многие дизайнеры выбирают Chatra за более современный и легкий интерфейс, который по умолчанию выглядит приятно и не перегружено.

Принцип работы Chatra — Messenger Mode. Даже если оператор оффлайн, чат выглядит как мессенджер, а не как форма «Оставьте заявку». Это психологически комфортнее для пользователя.

Подключение Chatra

Процесс идентичен подключению Jivo:

Регистрируемся в Chatra.

В разделе «Установка» ищем ID виджета. Часто он находится в блоке «Код виджета» и выглядит как набор букв и цифр (например, 5K7d9...).

В Tilda: Настройки сайта Ещё Chatra.

Вставляем ID, сохраняем, публикуем.

Универсальный метод: Блок T123 (HTML)

Что делать, если клиент хочет использовать сервис, которого нет в списке стандартных интеграций Tilda? Например, Re:plain (популярный чат, работающий через Telegram), Intercom или Talk-Me?

Для этого существует универсальный инструмент разработчика на Tilda — блок T123 «HTML-код» из категории «Другое».

Алгоритм действий:

Получите код. В личном кабинете стороннего сервиса (например, Re:plain) скопируйте полный код установки. Обычно он начинается с тега <script> и заканчивается </script>.

Добавьте блок T123. Лучше всего добавлять этот блок в Header (шапку) или Footer (подвал) сайта. Почему? Потому что шапка и подвал — это сквозные блоки. Добавив код один раз в хедер, чат появится на всех страницах сайта сразу.

Вставьте код. Нажмите «Контент» в блоке T123 и вставьте скопированный скрипт.

Опубликуйте страницу.

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

!Иллюстрация процесса вставки стороннего JS-кода через блок T123.

Влияние на конверсию и скорость загрузки

Интеграция чата — это всегда компромисс между маркетингом и технической производительностью.

Скорость загрузки (Performance)

Любой внешний виджет — это дополнительный JavaScript-код, который браузер пользователя должен загрузить и выполнить.

* Jivo достаточно «тяжелый». Он может незначительно замедлить отрисовку страницы (LCP/FCP). * Chatra и Re:plain считаются более легкими.

Если для вас критична каждая миллисекунда (например, для SEO-продвижения в высококонкурентной нише), рассмотрите вариант загрузки чата по клику. Это сложная настройка, требующая написания своего скрипта, который подгружает код чата только после того, как пользователь нажмет на кнопку «Задать вопрос».

Конверсия (Conversion Rate)

Чтобы понять эффективность чата, мы используем метрику конверсии. Давайте вспомним формулу:

Где: * (Conversion Rate) — коэффициент конверсии. * (Actions) — количество целевых действий (начатых диалогов). * (Visitors) — общее количество посетителей сайта.

Если после установки Jivo ваш вырос с 1% до 1.5% — инструмент работает. Если упал (потому что всплывающее окно раздражает пользователей) — нужно менять настройки активных приглашений.

Типичные ошибки при интеграции

В своей практике я часто встречаю одни и те же ошибки, которые совершают новички при добавлении чатов на Tilda:

Перекрытие контента на мобильных.

Кнопка чата часто закрывает кнопку «Купить» или «В корзину» на смартфоне. Решение: В настройках Jivo/Chatra настройте отступы (margin) для мобильной версии или скройте виджет на мобильных, оставив только ссылку на WhatsApp (как мы делали в прошлом уроке).

Два чата одновременно.

Иногда владелец сайта включает Jivo через настройки сайта, а потом добавляет Re:plain через блок T123. В итоге у пользователя на экране «война виджетов». Решение: Всегда проверяйте список подключенных виджетов в настройках и блоки T123 в хедере/футере.

Агрессивные приглашения.

Окно чата, которое открывается со звуком через 2 секунды после входа на сайт, вызывает желание закрыть вкладку, а не купить. Решение: Ставьте задержку минимум 20-30 секунд или настраивайте срабатывание на попытку ухода с сайта (exit intent).

Заключение

Мы разобрали два способа интеграции сторонних сервисов: нативный (через ID в настройках) и универсальный (через HTML-код).

* Используйте нативную интеграцию (Jivo, Chatra) для быстрого старта и надежности. * Используйте блок T123, если вам нужен специфический сервис (Re:plain, Talk-Me).

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

В следующей статье мы разберем тему «Автоматизация и CRM». Вы узнаете, как сделать так, чтобы контакты из чата автоматически попадали в вашу базу клиентов, а не терялись в истории переписки.

Создание уникального дизайна кнопки чата в Zero Block

Приветствую вас на третьем уроке курса «Разработка и интеграция чатов на платформе Tilda». В предыдущих статьях мы научились подключать готовые решения: от простых ссылок на WhatsApp до мощных комбайнов вроде Jivo и Chatra.

Однако у стандартных виджетов есть существенный недостаток — они выглядят одинаково на тысячах сайтов. Стандартный зеленый кружок WhatsApp или синяя «молния» Messenger могут не вписываться в вашу эстетику, перекрывать важные элементы интерфейса или просто надоесть пользователям своей навязчивостью.

Сегодня мы переходим к творческой части. Мы научимся создавать кастомные кнопки чата с помощью Zero Block. Это позволит вам полностью контролировать внешний вид, анимацию и расположение элемента связи, превращая скучную иконку в часть бренд-дизайна.

Почему Zero Block?

Zero Block (Нулевой блок) — это профессиональный редактор внутри Tilda, который позволяет создавать элементы с пиксельной точностью (Pixel Perfect).

Для задач коммуникации Zero Block дает нам три суперсилы:

Свобода формы. Кнопка может быть круглой, квадратной, текстовой, в виде фотографии менеджера или абстрактной фигуры.

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

Гибкая логика. Мы можем сделать так, чтобы кнопка открывала не просто ссылку, а собственное попап-меню с выбором мессенджера.

Этап 1: Подготовка холста

Обычный Zero Block находится в потоке страницы (скроллится вместе с контентом). Кнопка чата должна быть зафиксирована (Fixed) поверх контента, чтобы она всегда была под рукой у пользователя, как и стандартные виджеты.

Создание плавающего блока

Добавьте на страницу новый Zero Block (в самом низу библиотеки блоков или через меню быстрого добавления).

Нажмите Edit Block.

Удалите все лишние элементы, которые там есть по умолчанию.

В правой панели настроек (Settings) найдите раздел Container.

Измените значение с Grid Container на Window Container.

Это критически важный шаг. Window Container означает, что координаты элементов будут рассчитываться относительно окна браузера, а не сетки сайта.

!Настройка контейнера окна и фиксированной позиции в Zero Block

Фиксация позиции

Теперь настроим поведение при скролле:

В том же разделе настроек найдите параметр Position.

Выберите Fixed.

Ниже появятся настройки выравнивания (X axis, Y axis). Обычно кнопку чата размещают в правом нижнем углу. Выберите:

* X axis: Right * Y axis: Bottom

Задайте отступы (Offsets). Не прижимайте кнопку вплотную к краю. Рекомендуемые значения: X: 20px, Y: 20px.

Важно про Z-Index: Чтобы ваша кнопка всегда была поверх других блоков (фотографий, текстов), найдите параметр Z-Index в настройках блока (не элемента, а самого Zero Block, это делается в настройках блока снаружи редактора или в самом низу панели Settings). Установите значение 9999.

Этап 2: Дизайн кнопки

Теперь, когда у нас есть «невидимый слой» поверх сайта, нарисуем саму кнопку.

Вариант А: Минимализм (Иконка)

Добавьте элемент Image.

Загрузите SVG-иконку мессенджера (WhatsApp, Telegram). SVG предпочтительнее PNG, так как он не теряет качества при масштабировании.

Установите размер, например, 60px на 60px.

Вариант Б: Композиция (Шейп + Иконка)

Чтобы кнопка была заметнее, часто делают цветную подложку.

Добавьте элемент Shape (Фигура).

Сделайте его круглым (параметр Border Radius установите на 100px или просто большое число).

Задайте цвет бренда (например, ярко-зеленый для WhatsApp).

Поверх шейпа добавьте элемент Image или Text (иконку).

Выделите оба элемента (Шейп и Иконку) и нажмите Group (Сгруппировать) в панели слоев или через контекстное меню. Это важно для того, чтобы ссылка и анимация работали на всю кнопку целиком.

Вариант В: Персонализация (Фото менеджера)

Психология работает безотказно: люди охотнее пишут людям, а не логотипам.

Добавьте Shape (Круг).

В качестве фона шейпа (Upload BG) загрузите качественное фото лица менеджера.

Добавьте небольшую иконку мессенджера поверх фото в углу, чтобы было понятно, куда ведет клик.

Этап 3: Добавление ссылки

Самый ответственный момент. Кнопка должна работать.

Выделите ваш элемент (или группу элементов).

В правой панели найдите поле Link (URL).

Вставьте ссылку, которую мы научились формировать в первом уроке:

* WhatsApp: https://wa.me/79990000000 * Telegram: https://t.me/username

Критически важно: В поле Target выберите _blank. Это откроет мессенджер в новой вкладке, и пользователь не потеряет ваш сайт.

Этап 4: Оживление (Анимация)

Статичная кнопка может остаться незамеченной («баннерная слепота»). Добавим немного динамики с помощью Step-by-Step Animation.

Эффект «Пульсация»

Сделаем так, чтобы кнопка плавно увеличивалась и уменьшалась, привлекая внимание.

Выделите группу кнопки.

Внизу панели настроек найдите раздел Step-by-step Animation.

Нажмите Add.

Event (Событие): Выберите Element on Screen (или Block on Screen, так как блок фиксированный).

Loop (Зацикливание): Выберите Loop (Бесконечно).

Добавьте шаги (Steps):

* Step 1: Scale (Масштаб) 110%, Duration (Длительность) 0.5s. * Step 2: Scale 100%, Duration 0.5s.

Теперь ваша кнопка будет «дышать».

Эффект «Появление»

Можно настроить кнопку так, чтобы она появлялась не сразу, а когда пользователь проскроллит первый экран. Это вежливо и не раздражает.

В настройках анимации Event выберите On Scroll.

Start Trigger: Window Bottom.

Trigger Offset: 500px (появится после 500 пикселей скролла).

Настройте Opacity (Прозрачность) от 0 до 100%.

Этап 5: Создание мульти-меню (Свой аналог Linktree)

Что если вы хотите дать выбор: WhatsApp, Telegram или звонок? Делать три плавающие кнопки — плохая идея, это засоряет экран.

Решение: Кнопка открывает Popup (всплывающее окно), а уже в нем лежат ссылки.

Шаг 1: Создание попапа

Создайте еще один Zero Block.

В настройках блока (снаружи редактора) найдите поле ID или используйте стандартный блок BF503 (Popup: Zero Block), если хотите использовать Zero как попап.

Но проще всего использовать стандартный функционал Zero Block для попапов: создайте дизайн меню (несколько кнопок в столбик) внутри Zero Block.

Настройте этот Zero Block как попап (через код или используя блок T1093 «Popup: Zero Block» из категории «Другое»).

Альтернативный простой путь: Используйте стандартный блок BF502N (Popup с кнопками) и привяжите его открытие к нашей кнопке в Zero Block.

Шаг 2: Связка кнопки и попапа

Допустим, у вашего блока с попапом ссылка для открытия #mypopup.

Вернитесь в наш фиксированный Zero Block с кнопкой чата.

В поле Link вставьте #mypopup.

Теперь при клике на красивую кнопку будет открываться аккуратное меню с выбором мессенджеров.

Этап 6: Мобильная адаптация

Zero Block не адаптируется автоматически. Вам нужно настроить отображение для каждого экрана (Mobile, Tablet).

В редакторе Zero Block сверху переключитесь на иконку мобильного телефона (320px).

Скорее всего, ваша кнопка «уехала» или стала слишком большой/маленькой.

Поправьте её размер и положение.

Важно: Учитывайте «безопасные зоны» на смартфонах. Не ставьте кнопку слишком низко (там системная полоска iOS) или слишком высоко. Оптимальный отступ снизу для мобильных: 80-100px.

> Совет: На мобильных устройствах лучше убрать сложные hover-эффекты (эффекты при наведении), так как там нет курсора мыши. Оставьте только анимацию пульсации или сделайте кнопку статичной.

Типичные ошибки при дизайне в Zero Block

Забытый Target _blank. Пользователь нажимает на WhatsApp, уходит с сайта, а потом не может вернуться, потому что история браузера в приложении мессенджера работает иначе.

Слишком маленький размер. Палец человека — не курсор мыши. Минимальная кликабельная область должна быть 44x44 пикселя. Лучше — 60x60.

Перекрытие контента. Убедитесь, что ваша кнопка не закрывает кнопку «Купить» в корзине или важные юридические ссылки в подвале. Иногда имеет смысл настроить Range видимости блока, чтобы он исчезал в футере.

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

Заключение

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

Мы научились: * Фиксировать элементы Zero Block на экране. * Использовать SVG и шейпы для дизайна. * Настраивать анимацию для привлечения внимания. * Адаптировать решение под мобильные устройства.

В следующей статье мы отойдем от визуала и займемся «мозгами» нашей системы. Мы поговорим про «Автоматизацию и CRM»: как сделать так, чтобы заявки не терялись, а данные клиентов автоматически попадали в таблицы и базы данных.

Программная реализация: связка Zero Block с виджетом через HTML и JS

Добро пожаловать на четвертый урок курса «Разработка и интеграция чатов на платформе Tilda».

В предыдущих статьях мы прошли интересный путь: изучили базовые возможности Tilda, подключили мощные системы вроде Jivo и Chatra, и даже нарисовали свой уникальный дизайн кнопки в Zero Block. Но сейчас перед нами стоит проблема: у нас есть красивая кнопка в Zero Block и работающий виджет чата, но они живут отдельной жизнью.

Если вы опубликуете сайт сейчас, вы увидите две кнопки: вашу дизайнерскую и стандартную «плавашку» от сервиса чата. Наша задача — объединить их. Мы хотим, чтобы при клике на вашу уникальную кнопку открывался функциональный чат, а стандартная иконка сервиса была скрыта.

В этом уроке мы займемся «магией» JavaScript. Не пугайтесь слова «программирование». Мы разберем готовые шаблоны кода, которые нужно просто скопировать и слегка адаптировать.

Логика взаимодействия

Прежде чем писать код, давайте представим схему работы. Браузер — это среда, где происходят события. Клик мыши — это событие.

Нам нужно реализовать следующий сценарий:

Скрыть стандартную кнопку виджета (чтобы она не портила дизайн).

Найти нашу кнопку из Zero Block в коде страницы.

Отследить клик по этой кнопке.

Вызвать команду открытия чата через API (программный интерфейс) виджета.

!Схема работы скрипта: клик по кнопке активирует код, который открывает окно чата

Шаг 1: Подготовка кнопки в Zero Block

Самая частая ошибка новичков — пытаться привязаться к ID элемента (например, tn-elem-123456). В Tilda эти ID могут меняться при копировании блоков или страниц. Надежнее использовать CSS-классы.

Откройте редактор Zero Block, где нарисована ваша кнопка.

Выделите элемент кнопки (или группу элементов, если вы сгруппировали иконку и фон).

Нажмите правой кнопкой мыши и выберите Group, если элементов несколько. Ссылка и класс должны висеть на группе.

В правой панели настроек (Settings) проскролльте в самый низ.

Найдите поле CSS Class Name.

Придумайте и впишите имя класса, например: js-open-chat.

> Мы используем префикс js-, чтобы в будущем помнить: этот класс нужен для работы скрипта, а не для стилей.

Теперь Tilda добавит этот класс к вашему элементу в HTML-коде, и мы сможем легко найти его через JavaScript.

Шаг 2: Скрытие стандартного виджета

У большинства сервисов (Jivo, Chatra) в настройках личного кабинета есть галочка «Скрыть кнопку чата». Это самый простой путь. Но если такой настройки нет, или она работает некорректно, мы используем CSS.

Добавьте на страницу блок T123 (HTML-код) и вставьте туда следующие стили внутри тега <style>.

Для Jivo (JivoSite)

Для Chatra

У Chatra есть официальный метод в настройках, но через CSS это делается так:

Важно: Свойство !important заставляет браузер игнорировать стандартные настройки виджета и применить наши.

Шаг 3: Написание скрипта (JavaScript)

Теперь самое интересное. Мы напишем скрипт, который «слушает» клики. Этот код также нужно вставить в блок T123, желательно в Footer (подвал) сайта, чтобы он загружался после того, как загрузятся все элементы страницы.

Универсальный шаблон скрипта

Теперь заменим строку // 4. ЗДЕСЬ БУДЕТ... на реальные методы API.

Интеграция с Jivo

API Jivo предоставляет метод jivo_api.open(). Вставим его в наш шаблон.

Интеграция с Chatra

У Chatra метод выглядит так: Chatra('openChat', true).

Полный готовый код для Jivo (пример)

Скопируйте этот код в блок T123, если вы используете Jivo и назвали класс кнопки .js-open-chat.

Нюансы и решение проблем

При программной интеграции часто возникают мелкие проблемы. Разберем основные из них.

1. Z-Index (Слои)

Иногда бывает так: вы нажимаете на кнопку, чат открывается, но он оказывается под вашей кнопкой из Zero Block. Это происходит потому, что мы задали Zero Block очень высокий z-index (например, 9999) в прошлом уроке.

Решение: Вам нужно уменьшить z-index вашего Zero Block до разумных пределов (например, 500), или программно скрывать кнопку при открытии чата.

2. Мобильные устройства

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

Рекомендую для мобильной версии в Zero Block делать обычную ссылку (Link URL) на WhatsApp (https://wa.me/...), а скрипт вешать только на десктопную версию.

Как это сделать?

Создайте в Zero Block два элемента: один для Desktop, другой для Mobile.

Класс js-open-chat присвойте только десктопному элементу.

Мобильному элементу просто пропишите ссылку.

3. Блокировщики рекламы (AdBlock)

Некоторые блокировщики рекламы могут скрывать виджеты Jivo или Chatra. В этом случае ваш скрипт не сработает, и пользователь будет кликать по кнопке без результата.

Решение: Всегда добавляйте резервную ссылку в настройках кнопки в Zero Block. Даже если мы используем e.preventDefault() в скрипте, наличие ссылки href="#contact" или на WhatsApp полезно для SEO и как запасной вариант, если JS сломается.

Заключение

Поздравляю! Вы перешли черту от дизайнера к верстальщику. Теперь ваш сайт работает как единый механизм: уникальный дизайн Zero Block управляет сложной логикой внешних сервисов.

Мы научились: * Присваивать классы элементам в Zero Block. * Скрывать стандартные элементы через CSS. * Использовать JavaScript для управления API виджетов.

Теперь у вас есть красивый и функциональный чат. Но что происходит после того, как клиент написал «Привет»? Кто ему ответит? Как не потерять заявку?

В следующей, заключительной статье цикла, мы поговорим про «Автоматизацию и CRM». Мы разберем, как передавать данные из чатов в Google Таблицы, Telegram или CRM-системы, чтобы ни один лид не был потерян.

Продвинутые сценарии: отправка данных в Telegram и работа с Webhooks

Добро пожаловать на финальную статью курса «Разработка и интеграция чатов на платформе Tilda». Мы проделали большой путь: изучили встроенные возможности, подключили профессиональные виджеты (Jivo, Chatra), создали уникальный дизайн кнопки в Zero Block и даже оживили её с помощью JavaScript.

Но остался один критически важный аспект. Чат — это не только «поговорить здесь и сейчас». Это еще и инструмент лидогенерации. Что происходит, если менеджер не в сети? Или если клиент хочет заказать обратный звонок через ваше красивое меню?

Данные не должны теряться. В этом уроке мы разберем, как мгновенно передавать заявки из ваших кастомных форм и чат-виджетов прямо в мессенджер владельца сайта (Telegram) и как использовать технологию Webhooks для интеграции с любой внешней системой.

Зачем нам это нужно?

Представьте сценарий, который мы начали реализовывать в прошлом уроке:

Пользователь нажимает на вашу кастомную кнопку чата.

Открывается попап с выбором: «WhatsApp», «Telegram» и «Перезвоните мне».

Если пользователь выбирает «Перезвоните мне», он вводит номер телефона.

Куда уходит этот номер? Если он просто упадет в админку Tilda, вы увидите его через 3 часа. За это время клиент уйдет к конкурентам. Нам нужно мгновенное уведомление.

Часть 1. Нативная интеграция Tilda и Telegram

Tilda имеет встроенный шлюз для отправки данных в Telegram. Это самый простой и надежный способ получать уведомления о заявках.

Шаг 1: Создание бота

Чтобы Tilda могла писать вам в Telegram, нужен посредник — бот. Не пугайтесь, программировать не придется.

Откройте Telegram и найдите отца всех ботов — BotFather (ищите галочку верификации).

Напишите ему команду /newbot.

Придумайте имя (например, MyShopChatBot) и юзернейм (должен заканчиваться на bot, например myshop_chat_notification_bot).

BotFather выдаст вам API Token. Это длинная строка символов. Скопируйте её.

Шаг 2: Подключение к Tilda

Перейдите в Настройки сайта -> Формы.

Найдите иконку Telegram.

Вставьте скопированный API Token.

Tilda попросит вас перейти по ссылке в вашего нового бота и нажать Start. Это нужно, чтобы бот получил право писать вам.

После этого ваш аккаунт Telegram добавится в список приемщиков данных.

Шаг 3: Привязка к форме

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

Если вы используете стандартный блок с формой (например, внутри попапа для заказа звонка):

Зайдите в Контент блока.

Отметьте галочкой «Telegram» в списке приемщиков.

Опубликуйте страницу.

Теперь, как только клиент оставит номер в форме «Перезвоните мне», ваш телефон завибрирует через секунду.

Часть 2. Что такое Webhooks и зачем они нужны?

Иногда возможностей Telegram недостаточно. Например, вы хотите: * Отправлять данные сразу в CRM (AmoCRM, Bitrix24). * Записывать лиды в Google Таблицу со сложной логикой. * Отправлять SMS клиенту с подтверждением.

Для этого используется технология Webhook (Вебхук).

!Схема работы Webhook: Tilda отправляет данные на указанный URL, а дальше они распределяются по нужным сервисам.

Аналогия с рестораном

Представьте, что вы — повар (CRM), а Tilda — это официант.

* Без вебхука (Polling): Вы каждые 5 минут выбегаете в зал и спрашиваете официанта: «Есть новые заказы?». Это неудобно и тратит ресурсы. * С вебхуком: Вы спокойно работаете на кухне. Как только появляется заказ, официант сам заходит и кричит: «Новый заказ: пицца!».

Webhook — это механизм, который позволяет Tilda «дернуть» сторонний сервис по ссылке (URL) и передать ему данные в момент совершения действия (отправки формы).

Настройка Webhook в Tilda

Зайдите в Настройки сайта -> Формы.

Выберите Webhook.

В поле Webhook URL вы должны вставить адрес, куда Tilda отправит данные.

Где взять этот адрес? Обычно его выдает сервис-приемник. Самые популярные сервисы-прослойки (No-Code интеграторы): * Albato * Make (бывший Integromat) * Zapier

Например, в Albato вы создаете связку «Tilda -> Bitrix24». Albato выдаст вам уникальную ссылку. Вы вставляете её в Tilda. Теперь данные летят по маршруту: Сайт -> Albato -> CRM.

Часть 3. Связка кастомного дизайна и отправки данных

В прошлом уроке мы создали кнопку в Zero Block. Давайте разберем кейс, как сделать так, чтобы эта кнопка открывала форму, данные из которой летят в Telegram.

Мы не будем рисовать поля ввода (input) вручную в Zero Block и писать сложный JS для отправки данных (хотя это возможно). Мы пойдем путем «Хитрого Zero».

Алгоритм «Zero + Popup»

Создайте стандартный попап.

Используйте блок из категории «Форма и кнопка», например, BF502N (Попап с формой). Настройте в нем поля (Имя, Телефон) и подключите Telegram в настройках контента.

Получите ссылку на попап.

В настройках блока BF502N найдите поле «Ссылка для открытия попапа». Обычно это что-то вроде #popup:myform.

Свяжите с кнопкой Zero Block.

Вернитесь в ваш Zero Block, где нарисована красивая кнопка чата. Выделите кнопку и в поле Link вставьте ссылку на попап (#popup:myform).

Результат: Пользователь видит уникальную дизайнерскую кнопку. Кликает. Открывается стандартная, надежная форма Tilda. Он вводит данные. Вы получаете уведомление в Telegram.

Это идеальный баланс между красотой (Frontend) и надежностью (Backend).

Часть 4. Передача UTM-меток

Когда вы получаете сообщение в Telegram «Новая заявка: Иван, +7999...», вам важно знать, откуда пришел этот Иван. С рекламы в Яндексе? Из ВКонтакте? Или это прямой заход?

Для этого в Tilda существуют скрытые поля.

В настройках полей формы (в блоке с формой) нажмите «Поля формы».

Добавьте новое поле типа Hidden field (Скрытое поле).

В имени переменной напишите utm_source.

Повторите для utm_medium, utm_campaign.

Теперь, если пользователь перешел на сайт по рекламной ссылке site.ru/?utm_source=yandex, Tilda автоматически «поймает» эту метку, положит в скрытое поле и отправит вам в Telegram вместе с телефоном. Вы будете точно знать, какой рекламный канал работает.

Часть 5. Безопасность и спам

Подключая формы и чаты, вы открываете ворота для спамеров. Чтобы ваш Telegram не завалило мусором:

Используйте Google reCAPTCHA. Подключается в настройках сайта (раздел Формы -> Captcha). Она невидима для обычных людей, но отсекает ботов.

Маски ввода. В настройках поля «Телефон» всегда выбирайте тип «Phone» и ставьте маску (например, +7 (999) 999-99-99). Это не даст ввести случайный набор букв.

Заключение курса

Поздравляю! Вы прошли полный курс по разработке и интеграции чатов на Tilda.

Давайте вспомним, чему мы научились:

Использовать базовые ссылки (wa.me) для быстрого старта.

Подключать профессиональные виджеты (Jivo, Chatra) через ID.

Рисовать уникальный интерфейс в Zero Block, не ограничиваясь шаблонами.

Писать JavaScript-код для управления поведением виджетов.

Настраивать сбор данных в Telegram и CRM через Webhooks.

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

Ваш сайт больше не молчит. Он готов к диалогу. Удачи в проектах!