Как в тильде сделать кликабельным номер телефона
Перейти к содержимому

Как в тильде сделать кликабельным номер телефона

  • автор:

Как сделать кликабельные email и номер телефона

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

1. Ссылка, которую нужно задать тексту с номером телефона: tel:+71234567890 (все без пробела). Будет работать при просмотре сайта на мобильном телефоне, в случае открытия на компьютере откроет приложение, которое используется для звонков, если оно есть.

2. Пропишите в поле для ссылки ваш email, например, yourmail@mysite.com. При клике будет открываться приложение почты, которое установлено на устройстве посетителя.

Для кнопки укажите ваш email, начиная с mailto: , например, mailto:yourmail@mysite.com. При клике будет открываться приложение почты, которое установлено на устройстве посетителя.

Как сделать кликабельный номер телефона в конструкторе Tilda?

17.12.2020

Сложность: новичок

8 мин.

6 571

Как сделать кликабельный номер телефона в конструкторе Tilda

Сегодня мы расскажем и покажем, как сделать кликабельными телефоны, ссылки на Instagram*, Facebook* и другие соцсети в блочном конструкторе Тильда.

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

Ваши контакты на сайте – это очень важный элемент, чем больше возможностей с вами связаться, тем лучше. Потенциальный клиент, зашедший на сайт, должен иметь возможность связаться с вами удобным для него способом. Кому-то удобнее использовать для связи номер телефона, кто-то хочет воспользоваться мессенджером (Viber, WhatsApp, Telegram, Zalo, Wechat и т.д.), ну а кому-то удобнее использовать e-mail и написать в социальные сети, например, в Facebook*, Instagram*, VK и другие. На этапе проектирования сайте важная задача – сделать связь с менеджером максимально удобной для наших клиентов.

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

Как сделать кликабельный номер телефона в конструкторе Tilda

Рис. 1. Контакты в шапке, или хедере, сайта.

Как сделать кликабельный номер телефона в конструкторе Tilda

Рис. 2. Контакты в подвале, или футере, сайта.

Итак, начнем с номера телефона. Чтобы сделать номер кликабельным, необходимо перейти в поле «Контент», в выпадающем меню выбрать пункт «дополнительно» и нажав на кнопку, как указано на Рис. 3 ниже, добавить ссылку: tel:+номер телефона (без пробелов), после чего нажать «применить». После этого номер телефона должен стать красного цвета, это значит, что ссылка прикрепилась, далее жмем «сохранить и закрыть».

Как сделать кликабельный номер телефона в конструкторе Tilda

Рис. 3. Ссылка на номер телефона.

Далее делаем кликабельными социальные сети, тут все проще. В том же меню, где мы добавляли ссылку на номер телефона, выбираем пункт «ссылки на соц. сети», где заполняем поля интересующих нас социальных сетей прямыми ссылками на ваши страницы, например в поле « FACEBOOK PAGE LINK» вставляем ссылку на вашу страницу https://www.facebook.com/ ваш аккаунт. Если вы хотите добавить свой Telegram, тогда ссылку необходимо ставить следующим образом:

  • для мобильной версии: tg://resolve?domain=LOGIN,
  • для ПК (ссылка откроется в браузере): https://telegram.me/LOGIN .

LOGIN=это ваше имя в Telegrame, которое можно посмотреть в настройках.

Почтовый ящик (e-mail) становится кликабельным ровно по тому же принципу, что и номер телефон, путем прикрепления ссылки, смотрите инструкцию ниже, на рисунке 4. После совершения этого действия вам можно будет написать в один клик, что очень удобно для клиентов.

Как сделать кликабельный номер телефона в конструкторе Tilda

Рис. 4. Ссылка на e-mail.

Как на Тильде сделать кнопку «позвонить»?

Платежная система в Тильде как подключить?

Чтобы телефон был активным, то есть чтобы в мобильной версии при клике на него телефон предлагал позвонить на указанный номер, укажите ссылку для него в формате: tel:+77015502420 (пишем все это все без пробела)

Текст кнопки — название кнопки — пишем к примеру «ПОЗВОНИТЬ»

Ссылка для кнопки — здесь мы пишем номер, на который должен идти звонок через tel:

Сохранить и закрыть. Готово.

Вариант 2.

Если вы хотите добавить кликабельный телефон в тексте — надо всего лишь выделить нужное нам слово и вставить ссылку. К примеру, есть текст и при нажатии на слово «телефон» должен идти звонок.

Выделите слово и нажмите на кнопку «ссылка».

Укажите ссылку — здесь пишем номер телефона через tel:

Текст — это наше слово, в данном примере это слово «телефон» и он автоматически подтягивается, так как ранее мы это слово и выделили. Можно здесь выбрать цвет выделенного слова.

Как сделать кликабельный номер телефона на сайте + примеры оформления

Как сделать кликабельный номер телефона на сайте + примеры оформления

Если на мобильной версии вашего сайта номер телефона указан в виде обычного текста — вы теряете клиентов. В статье объясним, как отсутствие кликабельного номера влияет на конверсию, зачем вообще нужен кликабельный номер и как его установить на сайт.

Реклама: Erid 2VtzqwS17so

Реклама. Erid 2VtzqxFRNy7

Читайте также: ТОП-10 лучших конструкторов сайтов

Зачем нужен кликабельный номер на сайте

Объясняем, почему из-за текстового номера часть клиентов отваливается. Пользователь заходит с устройства на мобильную версию сайта и видит контакт для связи. В нашем случае — номер телефона. Чтобы позвонить ему нужно скопировать номер, свернуть браузер с сайтом, перейти в режим набора, вставить, нажать на кнопку вызова. Или переписать на листочек, а потом набрать номер в свободное время (но человек может передумать к тому времени). Или нужно запоминать номер, а потом вводить его вручную. Если забыли цифру — нужно возвращаться на сайт, опять запоминать, потом опять сворачивать браузер и так по кругу. В среднем получается около 5 действий и больше. Представьте, если человеку нужно совершить несколько таких звонков. С кликабельным номером пользователю нужно всего 3 действия — нажать на номер, выбрать способ звонка (через телефон или мессенджер), затем нажать кнопку вызова. Чем меньше действий, тем выше вероятность, что пользователь все-таки совершит звонок, а не отвалится на середине процесса. Это интересно: 50 способов увеличить объемы продаж

Как установить кликабельный номер телефона на сайт — инструкция

Как сделать так, чтобы вам могли позвонить в один клик:

Способ #1. Через html-код

  1. Если это просто номер:
  1. Если присвоен класс через CSS стили, то код может выглядеть так:
  1. Если к номеру телефона применялись стили оформления, например, цвет, шрифт, выравнивание, код, скорее всего, будет таким:

Чтобы сделать номер кликабельным в код нужно добавить следующие элементы:

  • тег (отвечает за возможность добавить гиперссылку в текст);
  • атрибут href=”” (отвечает за перенаправление по ссылке, ставится внутри предыдущего тега вместо трех точек);
  • параметр tel: (отвечает за вызов номера по клику, после двоеточия нужно указать номер телефона без пробелов);

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

Первый номер телефона — это ссылка, второй — как номер отображается на сайте. Вместо номера телефона на сайте может отображаться призыв сделать звонок, тогда код выглядит так:

Если в коде был прописан класс (пример #2), то конечный кликабельный код с добавлением элементов выглядит следующим образом:

Третий номер (с применением шрифта, цвета, выравнивания), соответственно, выглядит так:

P.S. Лучше, чтобы к номеру телефона были применены стили через CSS, потому что если просто сделать кликабельный текст (самый простой первый вариант), то он будет выделен синим цветом и с подчеркиванием, как обычная гиперссылка. Визуально выглядит непривлекательно.

Способ #2. Если сайт сделан на CMS или конструкторе

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

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

Вот у нас на странице блок с текстом, где указан номер телефона. Нужно выделить номер — появляется меню редактирования текста. В нем кликаем на инструмент добавления ссылок.

Как добавить кликабельный номер телефона на Тильда

В поле «Укажите ссылку» прописываем tel:+71111111111. Номер телефона должен быть указан без пробела, кавычек и точек.

Как добавить кликабельный номер телефона на Тильда

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

Как добавить кликабельный номер телефона на Тильда

Жмем «Применить» и получаем кликабельный номер телефона.

Если сайт на Wix, телефон настраивается похожим образом, с одним отличием. Когда выделяем текст и жмем на инструмент ссылки, появляется дополнительное меню, где можно выбрать, куда ведет ссылка.

Как добавить кликабельный номер телефона на Wix

В этом меню выбираем пункт «Номер телефона». Телефон указываем в формате +7(111)111-11-11.

Как добавить кликабельный номер телефона на Wix

Если сайт на WordPress, кроме изменения кода или добавления гиперссылки к тексту, можно использовать сторонние плагины. Например, бесплатный плагин Call Now Button. Он добавляет заметную цветную кнопку с иконкой телефона и призывом позвонить. Все, что нужно — установить плагин в Вордпресс, указать в настройках номер телефона, цвет кнопки и ее местоположение на сайте.

Плагин для кликабельного телефона на Вордресс

Способ #3. Через сервис коллтрекинга

Современные сервисы коллтрекинга используют функцию подмены номеров. И чаще всего номерам присваиваются атрибуты (классы). Например, у коллтрекинга Callibri это и >

В этом коллтрекинге, если настроена автоподмена номера, ссылка будет иметь вид:

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

Как сделать кликабельный номер WhatsApp, Viber, Skype и Телеграм

Кликабельный телефон для мессенджеров делается через html-код, как мы описывали в способе #1 данной статьи. Отличается только сама гиперссылка.

Для WhatsApp:

Номер телефона в самой ссылке (в кавычках) указываем без скобок, пробелов и дефисов.

Для Viber:

Для Skype:

skype_user — это логин в скайпе. Параметр call позволяет сразу начать вызов, если его не добавлять в ссылку, то просто откроется профиль.

Если хотите, чтобы при клике по номеру скайпа автоматически открывался диалог, то вместо параметра call добавляем chat, получается:

Для Телеграм:

Можно добавить в текст короткую гиперссылку вида:

Ссылку можно найти в настройках аккаунта Телеграм. При клике на ссылку откроется диалог с пользователям, там же можно позвонить.

Примеры оформления кликабельных номеров

Телефон на сайте сервиса коллтрекинга Callibri. Тут его еще и подчеркнули для наглядности.

Примеры оформления кликабельных номеров

Кликабельный номер на сайте Тинькофф Банка. Визуально номер телефона никак не выделен, но при клике по нему можно совершить звонок.

Примеры оформления кликабельных номеров

Книжный магазин «Читай-город» — номер указан на сайте отдельным пунктом меню, вообще визуально не отличается от остальных пунктов.

Примеры оформления кликабельных номеров

Заключение

Кликабельный номер телефона позволяет посетителям сайта позвонить в один клик. Без лишних движений. Эта экономит время и дает положительный опыт взаимодействия с сайтом. В итоге кликабельный номер способен повысить конверсию сайта. Мелочь, а работает.

Полезные ссылки:

  • SSL-сертификат для сайта
  • 10 курсов для веб-разработчиков
  • Как сделать лид-магнит
  • 27 способов удержать пользователя на сайте

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *