Как добавить кнопку «Звонок с сайта» в WordPress
Поскольку все больше людей посещают ваш сайт используя смартфоны, добавление кнопки звонка «Click-to-Call» позволяет связаться с вами буквально в один клик. В этой статье представлены два способа добавления такой кнопки.
Зачем добавлять кнопку Click-to-Call
Многие веб-сайты для малого бизнеса нацелены на предпродажное общение с клиентом. Именно поэтому необходимо добавить контактную форму всем владельцам веб-сайтов. Но это процесс общения, растянутый во времени. Поскольку мобильный веб-трафик растет по всему миру, пользователям удобно и просто обратиться за получением необходимой информации, сразу позвонив.
Если вы только начинаете бизнес, то рекомендуем обратиться к профессиональному телефонному сервису, чтобы вы могли переадресовывать звонки, делиться номерами с сотрудниками и отвечать на звонки, используя свои мобильные телефоны из любого места (вместо стационарных).
Рассмотрим два способа, как добавить кнопку click-to-call на сайт WordPress.
Способ 1. Добавление кнопки Click-to-Call через плагин
Этот метод проще, но недостатком является то, что он будет отображать кнопку для вызова только на мобильных устройствах. Чтобы добавить номер телефона для вызова со всех устройств, подойдет способ 2, рассмотренный ниже.
Сначала установите на сайт плагин Call Now Button и активируйте его. Затем перейдите на страницу Настройки » Call Now Button, чтобы настроить параметры плагина.
Установите птичку рядом со статусом кнопки, чтобы сделать ее активной. После этого введите номер телефона, на который будут дозваниваться посетители вашего сайта.
При желании вы можете ввести текст для отображения информации о звонке или скрыть значок. Если вы оставите его пустым, тогда плагин отобразит кнопку вызова с помощью значка телефона.
По ссылке «Дополнительные настройки», можно добавить отслеживание, позицию управления и ограничение внешнего вида.
На вкладке дополнительных настроек первая опция изменяет цвета кнопки.
Можно включить отслеживание Google Analytics, которое позволит увидеть, как пользователи реагируют на кнопку вызова в отчетах Google Analytics.
Также можно выборочно отображать или исключать кнопку из определенных записей и страниц WordPress.
После изменения настроек, сохраните их и перейдите на веб-сайт на мобильном устройстве, чтобы увидеть кнопку вызова в действии.
Смотрите также:
Какие плагины использовать для создания кастомных кнопок на WordPress.
Способ 2. Ручное добавление кнопки
Этот метод позволяет вручную добавлять кнопки вызова и ссылки в любом месте вашего сайта WordPress.
Самый простой способ добавить номер мобильного телефона на ваш сайт – это добавить их следующим образом:
<!--This link will work on Android and iPhone. It will be visible to desktop users but will result in an error when clicked --> <a href="tel:+15555551212">+1 (555) 555-1212</a> <a href="tel:15555551212">Call Me</a>
Эти ссылки откроют приложение на мобильных устройствах.
На настольных компьютерах пользователи Mac получат возможность открыть ссылку в Facetime, тогда как пользователи Windows 10 смогут открыть ее в Skype.
Вы также можете использовать HTML для добавления изображения или значка рядом со ссылкой на вызов.
Добавление значка или изображения
Перейдите на Медиафайлы » Добавить новый файлу и загрузите изображение, которое хотите использовать. После загрузки изображения нажмите Edit (Редактировать).
Здесь скопируйте URL-адрес файла. Это понадобится в следующем шаге.
Теперь можно редактировать запись, страницу или пользовательский HTML-виджет, где будет отображаться значок телефона «Click-to-Call». В редакторе добавьте изображение значка телефона, добавив скопированную ссылку:
<a href="tel:+15555551212"><img src="https://example.com/wp-content/uploads/2018/10/phoneicon2.png" alt="Call us"/></a>
Посетите свой веб-сайт, чтобы увидеть ссылку «Click-to-Call» с загруженным изображением.
Вы можете дополнительно настроить это окно вызова, добавив больше текста до или после ссылки и используя собственный CSS для его стилизации.
Добавление ссылки Click-to-Call в меню навигации
Также можно добавить кнопку звонка в меню навигации WordPress. Перейдите на страницу Внешний вид » Меню и нажмите вкладку пользовательских ссылок в правом столбце. Теперь вы можете добавить номер телефона в поле ссылки в следующем формате:
tel:+155555555.
После этого добавьте текст, который хотите отобразить, например Позвоните нам (Call Us), и нажмите кнопку «Добавить в меню».
Убедитесь, что на сайте отображается все правильно и по ссылке производится звонок.
Источник: wpbeginner.com
Смотрите также:
Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/
Кнопка виджета
Кнопка
Для декстопа есть два варианта кнопки обратного:
- стандартная кнопка
- кнопка-закладка
Стандартная кнопка
Десктоп
Расположение на экране
Вы можете выбрать расположение на экране из 4х позиций.
Радиус скругления
- пиктограмма квадрата — 0
- пиктограмма скругленного квадрата — 16
- пиктограмма круга — 32
С помощью радиуса скругления вы сможете сделать кнопку квадратной (значение 0).
Мобильные
Расположение на экране
Вы можете выбрать расположение на экране из 5 позиций. И также редактировать отступы от краев двигая ползунок или задав расстояние вручную.
Радиус скругления
- пиктограмма квадрата — 0
- пиктограмма скругленного квадрата — 16
- пиктограмма круга — 32
С помощью радиуса скругления вы сможете сделать кнопку квадратной (значение 0).
Цвет кнопки
Настраивается общий дизайн для кнопки — сплошная заливка или градиент:
Цвет можно выбрать из палитры или скопировать/вставить HEX кодировку.
Можно менять прозрачность фона внутри кнопки для использования в креативном дизайне.
Иконка
Появился отдельный блок, в котором можно выбрать разные иконки для кнопки, загрузить свою собственную или использовать текст.
Можно изменить размер иконки внутри кнопки, а так же отрегулировать эти настройки в зависимости от устройства:
Обратите внимание! Если вы хотите, что бы кнопка и иконка совсем не отображались на сайте, то необходимо:
1. В настройках отключить всплывающие диалог и таймер.
.
Анимация кнопки
Добавили возможность задавать отдельные стили анимации для декстопа и мобильных, а так же увеличили количество вариантов, доступных для выбора анимации:
Для выбранной анимации можно выбрать интервал, через который будет повторяться действие.
При значении 0 анимация становится непрерывной.
Всплывающий таймер
После уведомления о заказанном звонке (Ваша заявка принята), Вы можете показать пользователю всплывающий таймер (только в рабочее время, на десктопе). В таймере будет идти отсчет заранее настроенного Вами количества секунд, в течении которых Вы гарантируете клиенту, что ему на телефон поступит заказанный им обратный звонок. После включения таймера, он будет автоматически отображаться после заказа обратного звонка вместо «подтверждения» заявки.
Можно указать текст в заголовке, теле таймера и задать время, в течение которого таймер закроется.
Обратите внимание!
- Указание количества секунд в настройках таймера никак не влияет на длительность соединения оператора и клиента, и вообще никак не управляет соединением обратного звонка — это лишь расчетное теоретическое время, в течении которого Вы гарантируете клиенту, что ему на телефон поступит заказанный им обратный звонок.
- Таймер можно настроить только для одиночной кнопки. Если виджет добавлен в мультикнопку, то таймер отображаться не будет.
Всплывающий диалог
Всплывающий диалог — это инструмент дополнительной мотивации для заказа обратного звонка.
Например, показать диалог через 45 секунд после перехода посетителя на сайт. Если посетитель проигнорирует всплывающий диалог, он автоматически исчезнет через так же заранее настроенное количество секунд (по умолчанию 5 сек).
Обратите внимание!
- В рамках одной сессии посетителя на сайте, всплывающий диалог всплывет автоматически только 1 раз, если до этого он уже не был открыт вручную пользователем. Вручную же всплывающий диалог может быть неоднократно открыт посетителем в любое время — достаточно навести курсором на кнопку обратного звонка.
- Всплывающий диалог отображается только на десктоп устройствах. По умолчанию он включен для версии виджета в рабочее время. При клике на кнопку в диалоге «Оставьте телефон» (текст можно изменить, откроется основная форма виджета
- Диалог можно настроить только для одиночной кнопки. Если виджет добавлен в мультикнопку, то диалог отображаться не будет.
Заявка принята
Элемент подтверждения того, что заявка на обратный звонок принята.
Кнопка-закладка
Десктоп
Длина кнопки декстопа может быть уменьшена или увеличена, в зависимости от длины текста.
Радиус скругления
- пиктограмма квадрата — 0
- пиктограмма скругленного квадрата — 16
- пиктограмма круга — 32
С помощью радиуса скругления вы сможете сделать кнопку прямоугольной (значение 0).
Мобильные
Настройки кнопки-закладки для мобильных устройств остаются такими же, как для стандартной кнопки.
Цвет кнопки
Настраивается общий дизайн для кнопки — сплошная заливка или градиент:
Иконка и текст
Так же, как и у стандартной кнопки, доступна возможность выбора шаблона иконки, загрузка собственной и поле для текста.
Настройки анимации, всплывающего диалога, таймера и заявки аналогичны стандартной кнопке.
Как добавить кнопку вызова в WordPress (шаг за шагом)
Хотите добавить кнопку вызова в WordPress?
По мере того, как все больше людей посещают ваш веб-сайт со своих смартфонов, добавление кнопки звонка одним нажатием облегчает им связь с вами.
В этой статье мы покажем вам, как легко добавить кнопку вызова на веб-сайте WordPress.
Зачем добавлять кнопку Click-to-Call в WordPress
Многие веб-сайты малого бизнеса полагаются на то, что клиенты обращаются к ним за котировками, предпродажной информацией или поддержкой.
Именно поэтому мы рекомендуем добавить контактную форму всем владельцам сайтов.
Однако, в зависимости от отрасли, некоторые пользователи могут захотеть поговорить с человеком прямо сейчас.
По мере роста мобильного веб-трафика во всем мире пользователи часто считают более удобным звонить одним касанием и получать необходимую им информацию.
Если вы только начинаете свой бизнес, мы рекомендуем обратиться к профессиональной телефонной службе для бизнеса, чтобы вы могли выполнять переадресацию звонков, делиться номерами с сотрудниками и отвечать на звонки с помощью мобильного телефона из любого места (вместо стационарного).
При этом давайте посмотрим, как легко добавить кнопку вызова в WordPress.
Видеоруководство
Подписаться на WPBeginner