Как сделать кнопку позвонить в вордпресс

Добавил пользователь Alex
Обновлено: 04.10.2024

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

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

Более 2000 рекламных агентств и фрилансеров уже работают с сервисом.
Подключиться можно самому за 1 день.
Зарабатывайте с первого потраченного рубля, без начальных ограничений, без входного барьера.
Выплаты на WebMoney, на карту физическому лицу, реинвестирование в рекламу.
У вас остаются прямые доступы в рекламные кабинеты, рай для бухгалтерии по документообороту и оплатам.

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

Объясняем, почему из-за текстового номера часть клиентов отваливается.

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

С кликабельным номером пользователю нужно всего 3 действия — нажать на номер, выбрать способ звонка (через телефон или мессенджер), затем нажать кнопку вызова. Чем меньше действий, тем выше вероятность, что пользователь все-таки совершит звонок, а не отвалится на середине процесса.

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

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

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

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

Если присвоен класс через CSS стили, то код может выглядеть так:

Если к номеру телефона применялись стили оформления, например, цвет, шрифт, выравнивание, код, скорее всего, будет таким:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для WhatsApp:

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

Для Viber:

Для Skype:

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

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

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

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

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

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

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

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

Заключение

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

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

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

Например: +1 (555) 555-1212

Однако, большинство смартфонов распознаю и такие вариации:

+15555551212
+1.555.555.1212
555-555-1212
555 555 1212

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

Проблема со ссылке выше в том, что она будет видна для пользователей на всех устройствах. Если кто-то на ПК кликнет по ней, то в Google Chrome ничего не произойдет, а в Firefox отобразится ошибка.

В этом примере мы применили протокол callto:. Этот протокол используется Skype наряду с skype:. Такой способ имеет преимущество в том, что пользователи со смартфонов смогут позвонить по номер, используя телефонию, в то время как пользователи на десктопах и других устройствах смогут совершить звонок с помощью Skype.

Пример выше связывает изображение с номером, используя протокол Skype callto: Проблема в таком синтаксисе в том, что смартфон может распознать протокол Skype, но может не справится с телефонным номером. Более того, мобильная ОС может и вовсе не предложить выбор для совершения звонка.

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

Мы надеемся, что эта статья помогла вам добавить кликабельные номера телефонов для смартфонов в WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

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

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

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

Вам также будет интересно

Готовая форма с отправкой информации через ajax в Telegram

Готовая форма с отправкой файла drag & drop. Поле для передачи файла с помощью перетаскивания его в область

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

Плагины обратной связи для WordPress

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

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

Обзор плагинов обратной связи

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

Contact form 7

С его помощью можно настроить удобную систему пользования многочисленными контактными формами. Это наиболее востребованный бесплатный модуль с более чем пятью миллионами установок. Код плагина состоит всего из одной строки, что позволяет устанавливать кнопку в любом удобном месте на веб-ресурсе посредством HTML.

Fast Secure Contact From

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

FormCraft

Изначально данный плагин всплывающей формы обратной связи WordPress был платным, но впоследствии его сделали общедоступным. Главное преимущество плагина — наличие встроенного редактора.

Visual Form Builder

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

Стоит отметить, что Visual Form Builder может использоваться только на небольших ресурсах. Это связано с тем, что плагин сохраняет все данные формы на сервере движка. Это создает перегруз и, как следствие, работоспособность веб-ресурса может существенно снизиться.

Contact Form by Contact ME

Этот плагин также находится на официальном сайте, однако для применения необходимо пройти регистрацию на сайте ContactMe. Главное преимущество заключается в наличии надстройки отправки уведомлений на адрес электронной почты или смартфон. Помимо этого, форма плагина может корректироваться и видоизменяться посредством добавления произвольного кода. Единственное, что пользователи отмечают как недостаток — необходимость регистрации на стороннем ресурсе.

nForms

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

Gravity Forms

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

Ninja Forms

Это удобный и простой плагин, обладающий интуитивно понятным редактором и функцией drag-and-drop. Оперирование элементами происходит при помощи манипулятора компьютерной мыши — пользователю необходимо лишь перетаскивать нужные блоки и применять настройки. Помимо этого, Ninja Forms предлагает готовые шаблоны полей и блоков. В процессе редактирования можно переключаться в режим предварительного просмотра. Из-за наличия большого количества функций и надстроек Ninja Forms не рекомендуют использовать новичкам.

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

Обзор лучших плагинов формы обратного звонка для WordPress

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

. Это один из лидеров рынка виджетов обратных звонков в России. Его установили более трехсот тысяч раз. Благодаря плагину Pozvonim посетители веб-ресурса могут воспользоваться виджетом в несколько кликов. Помимо функции быстрой связи, сервис удержания клиентов способен увеличить конверсию и уровень продаж. Чтобы воспользоваться им, необходимо пройти регистрацию на официальном сайте с указанием адреса электронной почты, на который впоследствии будет выслан скрипт. Сам плагин скачивается с сайта WordPress. . Это простой плагин обратного звонка в WordPress. Отображение кнопки можно настроить на любой части страницы. Для отправления заявки пользователю предлагается заполнить короткую форму с указанием адреса электронной почты и номера телефона. Администратор веб-ресурса будет получать уведомления на свою почту или в мессенджер Telegram. . Подходит для сайтов малого и среднего бизнеса и дает возможность увеличить количество заявок на звонок. Это возможно благодаря анализу поведения посетителей. CallPage собирает и анализирует данные по девяти моделям поведения и выявляет заинтересованных пользователей, отображая на экране монитора виджет. В настройках доступны восемь бесплатных шаблонов.

Как установить плагины WordPress на русском

Чтобы расширить функционал движка, а именно — создать инструмент связи для посетителей веб-ресурса посредством добавления плагина, необходимо:

На сайте компании SEMANTICA вы можете заказать продвижение франшизы. Оставьте заявку, и мы вам перезвоним в ближайшее время.

Читайте также: