Как добавить кнопку WordPress Click To Call на свой сайт

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

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

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

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

Должны ли вы использовать плагин Click To Call или HTML?

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

Если вы хотите иметь возможность добавить кнопку «Нажмите для вызова» в любом месте на своем сайте или просто не хотите использовать другой плагин, добавить функцию «Нажмите для вызова» с помощью собственного HTML-кода почти так же просто, как вставить гиперссылку, так что это все еще довольно удобный подход. Тем не менее, вам, вероятно, потребуется добавить базовый пользовательский CSS, чтобы он выглядел хорошо, о чем следует помнить.

В этом руководстве мы покажем вам оба метода . Давайте начнем, начиная с маршрута плагина…

Подход 1: Используйте бесплатный плагин WordPress Click To Call Button

Существует несколько различных плагинов для WordPress, но мы собираемся показать вам пошаговые руководства только для трех из них:

• Really Simple Click To Call Bar — вместо того, чтобы добавлять отдельную кнопку, этот плагин добавляет целую панель в нижнюю часть экранов мобильных посетителей. Если вы хотите, чтобы людям было действительно легко звонить вам, это хороший вариант.
• Кнопка «Позвонить сейчас» — в дополнение к полной панели, такой как плагин выше, этот плагин также позволяет вам использовать кнопку вызова в стиле плавающей кнопки действия.
• Call Now Button Ultimate — этот плагин добавляет ту же самую нижнюю панель вызова сейчас. Но уникальность заключается в том, что он позволяет вам установить «часы работы», когда вы доступны по телефону. В нерабочее время кнопка будет предлагать посетителям писать по электронной почте, а не звонить.

Очень простое руководство по плагину Click To Call Bar

Этот плагин бесплатный и доступен на WordPress.org, поэтому вы можете установить его прямо из панели управления WordPress, выбрав « Плагины» → «Добавить новый ».

После того, как вы установили и активировали плагин, перейдите в « Настройки» → «Really Simple Click to Call », чтобы настроить плагин. Там можно:

• Включить функциональность кнопки «Нажми и позвони».
• Добавьте текстовый призыв к действию рядом с кнопкой вызова.
• Выберите номер телефона, на который будут звонить посетители
• Настройте цвета, используемые для кнопки «Нажми и позвони».

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

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

Руководство по плагину кнопки «Позвонить сейчас»

Как мы упоминали выше, плагин Call Now Button немного более гибкий, поскольку он также позволяет вам использовать плавающую кнопку вызова сейчас в дополнение к подходу с панелью вызова сейчас.

Как и другие, он указан на WordPress.org, а это значит, что вы можете установить его, выбрав « Плагины» → «Добавить новый ».

После того, как вы установили и активировали плагин, перейдите в « Настройки» → «Кнопка вызова» , чтобы настроить плагин.

Наверху вы можете:

• Включить кнопку
• Введите номер телефона, на который будут звонить посетители
• Выберите текст кнопки ( при желании )

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

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

Вот пример с нашего сайта подхода с плавающей кнопкой действия:

Кнопка «Позвонить сейчас» Ultimate Plugin Tutorial

Уникальность плагина Call Now Button Ultimate заключается в том, что вы можете выбрать, в какие часы вы хотите, чтобы посетители могли вам звонить. В нерабочее время, когда ваш номер телефона недоступен, вы можете вместо этого отобразить приглашение для посетителей отправить электронное письмо.

Как и другие, вы можете установить и активировать этот бесплатный плагин, выбрав « Плагины» → «Добавить новый » на панели инструментов WordPress.

После того, как вы это сделаете, перейдите в область Ultimate Button Call Now на панели инструментов WordPress, чтобы настроить ее.

Вверху вы можете включить плагин и ввести свой номер телефона и адрес электронной почты:

Затем, далее по странице, вы можете ввести часы работы и настроить текст и цвет кнопки:

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

Вот как это выглядит в часы работы:

А вот как это выглядит в нерабочее время:

Подход 2: WordPress Нажмите, чтобы вызвать HTML-кнопку

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

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

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

<a href="tel:+1-123-456-7890">Call HeroThemes!</a>

Вот и все!

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

Например, вы можете использовать этот HTML:

<a href="tel:+1-123-456-7890" class="call-button">Call HeroThemes!</a>

Затем вы можете добавить пользовательский CSS на свой сайт WordPress, чтобы превратить его в кнопку. Например:

.call-button {
color: #fff !important;
background: #0ba9d5;
padding: 20px;
border-radius: 5px;
display: inline-block;
border: none;
}

Вы можете безопасно добавить пользовательский CSS с помощью настройщика WordPress или бесплатного плагина, такого как Simple CSS.

Однако помните. По умолчанию ваша HTML-кнопка Click to Call будет видна всем посетителям, в том числе на настольных компьютерах.

Если вы хотите изменить это, вы можете использовать медиа-запросы CSS, чтобы кнопка отображалась только на мобильных устройствах. Например, этот фрагмент скроет кнопку на экранах шириной более 600 пикселей:

@media only screen and (min-width: 600px) {
.call-button {
display: none;
}
}

Начните использовать кнопку WordPress Click To Call уже сегодня!

Независимо от того, используете ли вы плагин или собственный HTML-код, создать кнопку вызова в WordPress очень просто.

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

Просто помните — телефонные звонки тяжелы для человеческих ресурсов.

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

Узнайте, как начать работу с нашим плагином базы знаний Heroic, темой KnowAll или плагином Heroic FAQs.