Tilda. Как создать виджеты обратной связи в zero block. WhatsApp и Telegram
Zero Block — это удобный и простой инструмент для создания уникальных блоков в Tilda Publishing, благодаря которому пользователи могут создавать страницы, не имея специальных знаний в веб-разработке. Создание виджетов обратной связи для популярных мессенджеров, таких как WhatsApp и 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».
- Нажмите на кнопку «Контент».
- Скопируйте и вставьте в него следующий код:
В коде, вместо «#rec00000000’» пропишите ID зеро блока с виджетами обратной связи. Сохраните изменения и опубликуйте страницу.
Заключение
В целом, использование виджетов обратной связи в zero block является эффективным способом улучшения коммуникации между сайтом и его посетителями. Благодаря настройке соответствующих форм и инструментов, вы можете получать ценную обратную связь от своих пользователей, а также обеспечивать более удобную и простую взаимодействие между ними и вашим сайтом.
С помощью виджетов обратной связи вы можете собирать данные, отзывы и предложения от пользователей, узнавать, что им нравится на вашем сайте, а что нуждается в улучшении. Это позволяет вам быстро реагировать на обратную связь и улучшать свой сайт, делая его более удобным и привлекательным для посетителей.
Делаем кликабельным номер телефона, Whatsapp, Telegram и E-mail
Скорость и простота коммуникации — то, к чему современные потребители уже привыкли. В эру высокоскоростного мобильного интернета люди хотят решать свои задачи через смартфон, делая минимум лишних движений. Клик сюда, клик туда и готово!
Поэтому важно сделать так, чтобы взаимодействие с сайтом было максимально простым. Например, чтобы позвонить в компанию достаточно было кликнуть по телефону в шапке.
Разберемся, как проработать такую маленькую, но очень важную деталь сайта, как кликабельные кнопки связи (телефон, почта, мессенджеры).
Номер телефона
Чтобы при клике на номер телефона начинался звонок нужно сделать следующие шаги.
HTML-код сайта
Некликабельный номер телефона (просто текст) может выглядеть в коде по-разному, например, так:
Чтобы сделать обычный текст кликабельным нужно сделать из него гиперссылку и указать действие, которое будет совершено по клику (в нашем случае набор номера).
Для создания любых ссылок используется тег <a>…</a>. Между тегами располагается текст ссылки или картинка (например, иконка трубки). Атрибут href=“” указывает адрес ссылки или действие. Для набора номера используется параметр: tel:+7XXXXXXXXXX, где +7XXXXXXXXXX — нужный номер телефона.
Если доработать предыдущие примеры, то получится следующий код:
Теперь при нажатии на номер телефона будет совершаться набор указанного в ссылке номера. Именно тот, который указан в ссылке, а не в тексте, поэтому будьте внимательны! Проверяйте получившийся код в работе.
Зная, как устроен HTML-код вы легко сможете реализовать на любом движке или конструкторе.
В WordPress
Метод создания кликабельной ссылки на движке WordPress аналогичен пункту «HTML-код сайта» данной статьи. Главная задача в том, чтобы найти нужный фрагмент кода в админ-панели.
Шапка сайта
- Если телефон находится в шапке сайта, то заходим в административной панели: «Внешний вид» -> «Редактор».
- Справа, в Файлах темы находим «header.php», нажимаем на него.
- В коде находим телефон. Для быстрого поиска кликнете левой кнопкой мыши на поле с кодом и нажмите комбинацию на клавиатуре: “Ctrl” + “F”. Затем введите несколько цифр телефона и нажмите “Enter”. Нужный фрагменты станут выделены желтым цветом.
- Теперь остается обернуть простой текст в гиперссылку. Как это сделать смотрите в предыдущем пункте статьи.В данному случае получается по итогу так:
- Нажимаем “Обновить файл” и изменения сохраняются. Проверяем работоспособность на сайте. Готово!
Записи/страница
- Если телефон находится в записи, то переходим в редактор записи/страницы.
- Переходим в редактор кода, нажав на вкладку “Текст”:
- Выделяем номер и нажимаем кнопку “link”. В поле “URL” добавляем гиперссылку для номера:
- Получается так:
- Нажимаем “Обновить” и страница сохраняется. Готово!
В Tilda
Zero-блок
- Переходим к редактированию блока, нажав на кнопку “Редактировать блок” в конструкторе нужной страницы:
- Выделяем телефон и нажимаем кнопку “Setting”:
- В поле Link в настройках вводим ссылку: “tel:+ номер телефона с +7”
- Сохраняем изменения в блоке и публикуем страницу.
Стандартный блок
- Нажимаем “Контент”:
- Находим нужный блок, выделяем телефон и нажимаем иконку “Ссылка”:
- Выбираем пункт: “Вставить ссылку”:
- В поле “URL” вводим “tel:+ номер телефона с +7” и нажимаем кнопку “Вставить”:
- Сохраняем изменения в блоке и публикуем страницу.
Активная ссылка на WhatsApp
Принцип точно такой же, как и с телефоном (смотрите предыдущий пункт данной статьи), отличие только в самой ссылке. Она будет выглядеть следующим образом:
Для размещения кликабельного текста на сайте подойдут все инструкции, как для телефонного номера.
Кликабельная иконка для сайта
Но обычно кликабельным делается не номер телефона, а специальная иконка WhatsApp. Для этого:
- Находим иконку, которую будем использовать. Для этого подойдет, например, сервис Flaticon.com.
- Выбираем подходящее по стилистике изображение. Кликаем на него, выбираем формат SVG.
- Дальше будет показан алгоритм действия, если сайт на Тильде. Если сайт на другой CMS, то нужно будет загрузить файл на хостинг и добавить небольшой HTML и CSS-коды на сайт, чтобы разместить иконку, например, в шапке. Для этого понадобятся минимальные знания верстки, либо помощь верстальщика.
- На Тильде переходим в редактирование Zero блока.
- Выбираем пункт добавить изображение и загружаем иконку.
- Масштабируем ее и размещаем в нужном месте блока.
- Добавляем в поле Link ссылку https://wa.me/номертелефона
- Сохраняем изменения в блоке и публикуем страниц сайта. Готово! Кнопка Whatsapp теперь кликабельная и сразу перенаправляет пользователя на диалог в мессенджере.
Ссылка на Telegram
С Телеграм тот же алгоритм действий, что и Whatsapp (смотрите предыдущий пункт данной статьи), но основное отличие в том, что в РФ, например стандартные ссылки в формате https://t.me/seoforge не работают. Поэтому необходимо использовать редирект через такие сервисы, как tele.gg, telegram.im и другие. Сервисы полностью бесплатны и существует большой список таких сервисов без сторонней рекламы, используйте именно их.
Ссылка будет выглядеть следующим образом.
На канал @seoforge в Телеграм: telegram.im/seoforge
На пользователя @webengineer в Телеграм:
Кликабельная почта E-mail
При клике на e-mail открывался почтовый клиент:
Кликабельный Skype
При клике на кнопку открывался чат в Skype с указанным пользователем пользователем:
Создание и вставка ссылка на WhatsApp на Tilda
Скорость и максимальная простота коммуникации является основной целью, к которой стремятся достичь современные пользователи. Поэтому часто клиенты Ватсап хотят решать персональные задачи, имея под рукой только мобильное устройство. Соблюдая определенную инструкцию, можно с легкостью сделать ссылку на Ватсап на Тильде. Для этого дополнительно рекомендуется ознакомиться с определенными особенностями.
Создание ссылки на WhatsApp
Пользователи, которые еще не могут понять, как в Тильде добавить ссылку на Whatsapp, могут использовать любую последовательность действий. Специалисты рекомендуют воспользоваться следующим алгоритмом:
- Изначально возникает необходимость создать кликабельную информацию, что автоматически подразумевает формирование соответствующей гиперссылки. Именно она станет источником последующего перехода при нажатии. Для этого применяется специально разработанный тег.
- На следующем этапе между тегами возникает необходимость расположить интересующую ссылку, причем с обязательным отображением действия системы.
- В результате будет в атематическом режиме сформирован соответствующий код.
Обратите внимание, в большинстве случаев речь идет не о формировании кликабельного номера мобильного телефона, а графического изображения приложения Ватсап в tilde. Для этого достаточно выполнить поиск подходящей иконки.
Последовательность действий включает в себя следующий алгоритм:
- Выбирается специализированный сервис в интернете Flaticon.com.
- На следующем этапе требуется подобрать пользователей наиболее подходящее графическое изображение.
- После нажатия на выбранную иконку выбирается интересующий формат. В данном случае им выступает SVG.
- Если портал расположен на Тильде, будет указано о дальнейшей последовательности действий, которые обязательны к применению.
Обратите внимание, если интересующий ресурс расположен на другой CMS, возникает необходимость загрузить специально разработанный файл на хостинг, после чего прописать небольшой html, чтобы в конечном итоге разместить интересующее графическое изображение в шапке. По этой причине пользователю крайне важно обладать базовые знания в сфере верстки либо иметь опыт работы верстальщиком. На следующем этапе требуется на Тильде выполнить переход в форму внесения изменений Zero блока. Дальнейший порядок действий подразумевает под собой:
- Выбор функции добавления графических картинок с последующей автоматической загрузкой.
- Инициирование процесса масштабирования и одновременно размещения в интересующем блоке.
- Добавление в специально разработанное поле Link ссылку https://wa.me/исопользуемоого номера мобильного телефона.
- Внесение изменений в специально разработанном блоке с последующей публикацией страниц портала.
В результате интересующая клавиша Ватсап обладает функцией кликабельности, поэтому в автоматическом режиме перенаправляет пользователя на форму диалога в мессенджере.
Как вставить ссылку на Ватсап на сайт Тильда
Процедура не влечет за собой каких-либо сложностей, однако достаточно придерживаться определенной последовательности действий. Чтобы избежать ошибок, достаточно знать особенности.
Zero-блок
Необходимо выделить мобильный телефон с последующим нажатием на клавишу настроек. Далее указывается специально разработанная ссылка с телефоном. В завершении сохраняются результаты.
Как добавить кнопку WhatsApp на сайт, на тильде за 3 минуты?
Тильда
В статье покажу и расскажу, как добавить кнопку WhatsApp на сайт, который на тильде
Если не хотите читать, то посмотрите видео)
Добавьте WhatsApp на сайт по шагам
1. Заходите в аккаунт на тильде, нажимаете на сайт, заходите на страницу
Захожу на сайт
Захожу на страницу
2. Пролистываете вниз страницы, нажимаете на кнопку все блоки или на +
Добавляю кнопку
3. Слева появляется меню, там выбираете пункт форма и кнопка, блок Кнопка для мобильной версии (её номер BF103)
Выбираю пункт и блок
4. После этого создается кнопка, наводите на неё и нажимаете на пункт контент
Нажимаю на контент
5. Задаете текст кнопки Написать в WhatsApp, Задаете ссылку, пример ссылки https://wa.me/79088101672 номер без пробелов, без +, без скобочек, начинается с 7. Далее нажимаете сохранить и закрыть
Задаю название кнопки и ссылку
6. Наводите мышкой на кнопку и нажимаете на пункт настройки
Нажимаю на настройки
7. Задаете цвет фона: #22c15e далее нажимаете на пункт анимация и выбираете любую анимацию, я выбрал flash(быструю). Далее нажимаете на кнопку сохранить и закрыть
Задаю цвет
Задаю анимацию
8. Нажимаете на кнопу опубликовать
Опубликовываю страницу
9. Открываете сайт с телефона и проверяете появилась ли кнопка, нажимаете на неё и проверяете работает ли
Проверяю наличие кнопки
Проверяю работу кнопки
10. Все готово! Кнопка работает)
Если у вас будут какие-то вопросы, пишите мне ватсап, помогу, кнопка на сайте есть)