Всем привет. В серии уроков, где мы разбирались в создании сайта на стандартных блоках мы подключали форму обратной связи. Получать заявки мы собирались в панель тильда, но это не единственный вариант.
Сегодня я покажу, как интегрировать телеграм в тильду. Получать все заявки мы будем прямо в мессенджер, что в разы удобнее, чем получать их на сайте. Поехали!)
Переходим к настройкам сайта
Открываем настройки сайта и ищем раздел «Формы». Переходим туда.
В данном разделе мы можем интегрировать автоматическую рассылку форм на разные каналы, а так же подключить стороннюю CRM систему. Нам же нужен пункт Telegram — отправка данных форм в телеграм.
Переходим в бота.
Нажимаем «Начать» и бот присылает нам все нужные данные. АПИ ключ и секретный ключ. Копируем их и вставляем в соответствующие поля в самой тильде.
Вставляем данные и нажимаем «Сохранить». Бот тильды пришлёт нам сообщение о том, что бот подключен.
Подключить сервис ко всем формам на сайте?
Спросит нас тильда. Нажимаем добавить, нам нужны все формы. Готово! Идём тестировать. Я заполню форму на том самом сайте ресторана, который мы делали вместе с вами.
Как сделать чтобы заявки с сайта Tilda приходили в Telegram (в личку либо группу)
Готово! Тильда прислала нам данные с формы прямо в телеграм. На этом всё. Вот такой простой урок.
Всем успехов и до скорых встреч!)
Источник: teletype.in
Как установить чат на Tilda сайт
В данной инструкции мы разберем, как установить чат с поддержкой Telegram для Tilda страницы. Примерное время установки — 7 минут.
1. Регистрация
Перейдите на сайт https://telegram-feedback.com/ и зарегистрируйтестесь, если еще не сделали это. Регистрация займет не более 1 минуты.
2. Настройка чата
Нажмите «добавить чат». После чего введите название сайта (или укажите домен вашего сайта) и выберите дизайн виджета. Обратите внимание, что позже вы сможете поменять дизайн на любой, который вы захотите.
Далее следуйте инструкции по установке на сайте.
3. Установка скрипта на сайт
Скопируйте ссылку для чата (которая появится после настройки):
Откройте необходимую страницу на Tilda и добавьте блок T123 (HTML код):
Вставьте код из окна выше в этот блок:
Источник: telegram-feedback.com
Tilda. Как создать виджеты обратной связи в zero block. WhatsApp и Telegram
Zero Block — это удобный и простой инструмент для создания уникальных блоков в , благодаря которому пользователи могут создавать страницы, не имея специальных знаний в веб-разработке. Создание виджетов обратной связи для популярных мессенджеров, таких как WhatsApp и Telegram, может значительно улучшить опыт пользователей и помочь им быстро связаться с владельцами сайта.
Подключаем TELEGRAM к Тильде (получать заявки и лиды с форм в мессенджеры)
Как добавить иконки виджетов обратной связи в zero block
Создание и добавление иконок виджетов обратной связи WhatsApp и Telegram в Zero Block не займет много времени и будет полезным для сайтов, где обратная связь имеет большое значение. Чтобы создать иконки виджетов, нужно выполнить следующие шаги:
- Создайте иконки (в графическом редакторе Figma) или скачайте их с любых бесплатных сервисов (Flaticon) в SVG формате.
- Создайте zero block и зайдите в редактор.
- Удалите стандартный контент в блоке.
- Нажмите на кнопку «+» и выберите «Add Image».
- Загрузите иконку WhatsApp.
- Точно так же загрузите иконку Telegram.
Как настроить виджеты обратной связи в zero block. Позиционирование иконок и ссылки
После того, как вы добавили иконки для виджетов обратной связи в zero block, их необходимо разместить следующим образом:
- Задайте зеро блоку высоту в 80 пикселей в поле «grid container height».
- Измените размеры иконок так, чтобы они не выходили за пределы видимой области блока.
- Нажмите на иконку WhatsApp левой кнопкой мыши.
- Нажмите на «+container» и выберите «window container».
- В поле «AXIS X» укажите «Right», а в «AXIS Y» укажите «Bottom».
- Одну из иконок вручную переместите чуть левее, чтобы между ними образовался отступ.
- Эти же действия выполните и для иконки Telegram.
- Перейдите по этой ссылке и сгенерируйте ссылку на WhatsApp.
- Нажмите левой кнопкой мыши на иконку WhatsApp.
- В пункт «LINK», в поле «URL» скопируйте и вставьте сгенерированную ссылку.
- Перейдите по этой ссылке и сгенерируйте ссылку на Telegram.
- Нажмите левой кнопкой мыши на иконку Telegram.
- В пункт «LINK», в поле «URL» скопируйте и вставьте сгенерированную ссылку.
- Удалите фоновую заливку зеро блока в пункте «BG COLOR».
- Сохраните изменения и выйдите из зеро блока.
Как зафиксировать блок с виджетами при скроллинге страницы
В предыдущих главах мы загрузили иконки для виджетов в нулевой блок Тильды, настроили их позиционирование и ссылки. Теперь необходимо зафиксировать zero block с виджетами так, чтоб при прокручивании страницы вашего сайта, виджеты всегда оставались в той области экрана, где вы их расположили. В нашем случае – справа и снизу.
- После всех блоков вашей страницы нажмите на кнопку «+», найдите вкладку «Другое» и добавьте блок «Т123».
- Нажмите на кнопку «Контент».
- Скопируйте и вставьте в него следующий код:
style> .floating width: 100%; position: fixed; bottom: 0; z-index: 9999; > style> script> $(document).
ready(function () var blockMenuID = ‘#rec00000000’; $(blockMenuID).addClass(‘floating’); >); script>
В коде, вместо «#rec00000000’» пропишите ID зеро блока с виджетами обратной связи. Сохраните изменения и опубликуйте страницу.
Заключение
В целом, использование виджетов обратной связи в zero block является эффективным способом улучшения коммуникации между сайтом и его посетителями. Благодаря настройке соответствующих форм и инструментов, вы можете получать ценную обратную связь от своих пользователей, а также обеспечивать более удобную и простую взаимодействие между ними и вашим сайтом.
С помощью виджетов обратной связи вы можете собирать данные, отзывы и предложения от пользователей, узнавать, что им нравится на вашем сайте, а что нуждается в улучшении. Это позволяет вам быстро реагировать на обратную связь и улучшать свой сайт, делая его более удобным и привлекательным для посетителей.
Посмотрите 8 замечательных вариантов анимации текста в нашей статье.
- ← Анимация в Tilda различных элементов с использованием HTML, CSS и JS кода
- Figma или Sketch: что лучше для веб-дизайна →
Источник: lifehackov.ru