Как добавить социальные сети в Тильде через виджет

Виджет с мессенджерами в Тильде решает узкую задачу: посетитель страницы раскрывает кнопку и переходит по ссылке в ваш профиль. Добавление социальных сетей в Тильде этим маршрутом включает: поставить блок, заполнить контент, опубликовать и проверить переходы на компьютере и телефоне. Маршрут ограничен виджетами BF905 и BF905A. Редактирование иконок в других блоках, сторонние интеграции и отправку сообщений клиентам он не покрывает.

Добавьте виджет с мессенджерами

Собственные виджеты Тильды лежат в категориях «Форма» и «Кнопка» Добавление виджетов обратной связи^[1]. Виджет с мессенджерами — из второй категории. По клику на кнопку открывается окно со ссылками на социальные сети, по которым посетитель переходит Добавление виджетов обратной связи^[1].

Порядок на старте:

1. Откройте проект и нужную страницу.
2. Добавьте блок BF905 или BF905A через Библиотеку блоков > Кнопка Добавление виджетов обратной связи^[1].
3. Выберите вариант по дизайну: блоки отличаются оформлением, остальные настройки у них одинаковые Добавление виджетов обратной связи^[1].

Что проверить до заполнения ссылок. Внешний вид меняется в настройках блока: цвет фона, цвет иконки, анимация, типографика и отступы Добавление виджетов обратной связи^[1]. Расположение настраивается только для настольных экранов от 980px и шире; на мобильных виджет зафиксирован в правой нижней части экрана Добавление виджетов обратной связи^[1]. Свободное позиционирование на смартфоне этот виджет не даёт, и закладывать его в макет не стоит.

Формы приёма данных здесь не нужны: ссылки в мессенджеры ведут наружу, данные посетителя через виджет не собираются. Подключение сервисов приёма данных относится к формам обратной связи с полями телефона, email или сообщения Добавление виджетов обратной связи^[1]. Если на странице стоит такая форма рядом, её проверку ведите отдельно — по чек-листу приёмки формы.

Заполните ссылки в контенте

Перейдите в меню «Контент» у блока с виджетом. Там задаются заголовок, описание, текст рядом с виджетом и ссылки на нужные социальные сети Добавление виджетов обратной связи^[1]. Ссылки вводятся в разделе «Ссылки на соц.сети» — в поля для контактов мессенджеров и соцсетей Добавление виджетов обратной связи^[1].

Значки соцсетей отображаются автоматически после добавления ссылки Добавление виджетов обратной связи^[1]. Отдельно рисовать или загружать иконку не требуется. Отсюда практическое следствие: набор иконок в окне равен набору заполненных полей. Пустое поле — нет иконки; лишняя заполненная строка — лишняя иконка в окне, даже если профиль заброшен.

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

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

Опубликуйте и проверьте переходы

После заполнения сохраните изменения и опубликуйте страницу Добавление виджетов обратной связи^[1]. Проверяйте опубликованную страницу на компьютере и телефоне: настройки расположения зависят от ширины экрана.

Проверка на компьютере:

• откройте опубликованную страницу в окне шире 980px;
• нажмите на кнопку виджета — должно раскрыться окно со ссылками;
• сверьте набор иконок с планом: каждая заполненная ссылка на месте, лишних нет;
• нажмите каждую иконку и убедитесь, что открывается нужный профиль.

Проверка на телефоне:

• откройте ту же страницу в окне уже 980px или на смартфоне;
• убедитесь, что виджет стоит в правой нижней части экрана и не перекрывает важные кнопки Добавление виджетов обратной связи^[1];
• раскройте окно и пройдите по ссылкам так же, как на компьютере.

Что этот маршрут не делает. Он не настраивает иконки в других блоках страницы: правила автоматического появления значков описаны для виджета с мессенджерами, и переносить их на произвольный блок нет оснований. Сторонние сервисы обратной связи в Тильду добавляются отдельным блоком T123 «HTML-код» Добавление виджетов обратной связи^[1] — это другой маршрут со своими настройками. И виджет не отправляет сообщения клиентам: он открывает ссылку, дальше переписка идёт в самом мессенджере.

Если на странице есть форма с ветвлением или квиз, их логику проверяйте по отдельной инструкции ветвление в квизе.

Учебный пример виджета

Учебный пример

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

Входные условия:

Поля ссылок и что проверять:

Заполненный результат. В меню «Контент» заголовок, описание и текст рядом с виджетом заполнены по таблице условий. В разделе «Ссылки на соц.сети» два поля заполнены двумя учебными адресами. После сохранения и публикации на странице в окне виджета видны две иконки — ВКонтакте и Telegram, потому что значки появляются автоматически по числу добавленных ссылок. Третьей иконки нет: третье поле пустое.

Проверка по тем же полям и условиям:

1. На экране шире 980px откройте опубликованную страницу и раскройте виджет — видны ровно две иконки.
2. Нажмите иконку ВКонтакте — открывается https://vk.com/example.
3. Нажмите иконку Telegram — открывается https://t.me/example.
4. На экране уже 980px виджет стоит в правой нижней части экрана; окно раскрывается, обе ссылки работают.
5. Сверьте на странице заголовок «Связаться с редакцией», описание и текст рядом с виджетом «На связи» с таблицей условий.

Если на шаге 1 иконок больше двух, значит заполнено лишнее поле — очистите его. Если иконка есть, а переход ведёт не туда, проверьте адрес в поле: скорее всего, там опечатка или старый профиль.

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