Как на сайте сделать кнопку вызова


Делаем номер телефона на сайте кликабельным

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

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

Наверное, многие из вас сталкивались с такой ситуацией, когда, заказывая какой-либо товар в интернет-магазине, приходилось уточнять некоторые вопросы по телефону. И для этого приходилось записывать номер телефона магазина на листочек / телефон друга, потом снова набирать в свой телефон, и только после этих манипуляций удавалось позвонить. А если телефон поддержки вдруг оказывался недоступен, приходилось всё это проделывать заново.

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

Сделать номер телефона кликабельным можно с помощью обыкновенной ссылки, но со специальным адресом:

<a href="tel:+78142332211">+7(814)-233-22-11</a>

Или:

<a href="tel:+7 (8142) 33 22 11">Позвоните нам</a>

То есть в атрибуте href должно быть указано: tel: и номер телефона в формате, который вам нужен.

Выглядеть это будет так:

+7(814)-233-22-11

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

Кроме кликабельного номера телефона, есть возможность добавить кликабельную ссылку на ваш Skype:

<a href="skype:test123">Skype</a>

Или можно добавить ссылку для звонка со Skype на телефон:

<a href="callto:+78142332211">Позвонить нам с помощью Skype</a>
.

Как добавить кнопку для вызова в WordPress (шаг за шагом)

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

Зачем добавлять кнопку "Нажмите для вызова" в WordPress

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

Вот почему мы рекомендуем добавить контактную форму всем владельцам сайтов.

Однако, в зависимости от отрасли, некоторые пользователи могут сразу захотеть поговорить с человеком.

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

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

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

Видеоурок

Подписаться на WPBeginner

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

Метод 1. Добавление кнопки «Щелкните для вызова» в WordPress с помощью подключаемого модуля

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

Первое, что вам нужно сделать, это установить и активировать плагин WP Call Button на вашем сайте. Для получения дополнительной информации см. Наше пошаговое руководство по установке плагина WordPress.

После активации вам необходимо посетить страницу Настройки »WP Call Button , чтобы настроить параметры плагина.

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

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

Для начала вам нужно ввести номер своего рабочего телефона, по которому вы хотите, чтобы люди звонили. Плагин WP Call Button использует поле смартфона, что означает, что вы можете просто выбрать свою страну, и он автоматически добавит код страны в надлежащем формате.

Примечание: Если у вас нет служебного номера телефона, вы можете получить его в Nextiva. Это компания, которую мы используем для нашего бизнес-телефона VoIP.

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

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

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

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

Если вы хотите добавить статическую кнопку вызова на свою страницу контактов WordPress, страницу «О нас» или любой другой пост / страницу, у вас есть два варианта.

Если вы используете новый редактор блоков WordPress, просто создайте или отредактируйте существующую страницу. Затем вам нужно добавить блок WP Call Button, щелкнув значок «+».

Блок кнопок вызова

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

После того, как вы добавите кнопку, пользователи смогут нажимать и звонить на ваш номер телефона, который вы указали на странице настроек WP Call Button.

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

Просто зайдите в «Настройки » »Кнопка вызова WP и щелкните меню« Статическая кнопка вызова »вверху.

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

Плагин

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

Для этого вам нужно перейти в Внешний вид »Виджеты и перетащить виджет WP Call Button в область, готовую к работе с виджетами.

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

Прочитав это, вы, вероятно, поймете, почему кнопка WP Call на сегодняшний день является самым простым и полным плагином для кнопки вызова WordPress на рынке.

Самое приятное то, что он на 100% бесплатный и полностью интегрируется с Google Analytics.

Все, что вам нужно сделать, это использовать плагин MonsterInsights, и он будет автоматически отслеживать, сколько людей нажимают на вашу кнопку вызова и какие страницы привлекают к вам больше всего лидов, так что вы можете сосредоточиться на том, что работает для развития вашего бизнеса и быстрее!

Метод 2. Добавить кнопку «Щелкнуть для вызова» вручную в WordPress

Этот метод позволяет вручную добавлять кнопки и ссылки для вызова в любом месте вашего веб-сайта WordPress.

Самый простой способ добавить интерактивный номер телефона на свой веб-сайт - это добавить его следующим образом:

   +1 (555) 555-1212   Позвони мне  

Эти ссылки откроют приложение "Телефон" на мобильных устройствах. На настольных компьютерах пользователи Mac увидят возможность открыть ссылку в Facetime, а пользователи Windows 10 увидят возможность открыть ее в Skype.

Вы также можете использовать HTML для добавления изображения или значка рядом с текстовой ссылкой для вызова по щелчку.

Давайте посмотрим, как это сделать.

Во-первых, вам нужно посетить страницу Media »Добавить новый и загрузить изображение, которое вы хотите использовать. После загрузки изображения вам необходимо щелкнуть ссылку «Изменить», чтобы продолжить.

Откроется экран редактирования мультимедиа, на котором необходимо скопировать URL-адрес файла. Он понадобится вам на следующем шаге.

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

  Позвоните нам  

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

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

Добавление ссылки для вызова в меню навигации WordPress

Вы также можете добавить ссылку для вызова в меню навигации WordPress.

Просто перейдите на страницу Внешний вид »Меню и щелкните вкладку настраиваемых ссылок в правом столбце. Теперь вы можете добавить номер телефона в поле ссылки в следующем формате:

тел .: +155555555

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

Затем посетите свой веб-сайт, чтобы увидеть в действии ссылку для вызова по нажатию.

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

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress.Вы также можете найти нас в Twitter и Facebook.

.

javascript - хочу создать кнопку вызова сейчас для моего веб-сайта

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии
.

17 лучших практик для безумно эффективных кнопок с призывом к действию

Что такое кнопка с призывом к действию?

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

  • В корзину кнопки
  • Кнопки регистрации бесплатной пробной версии
  • Кнопки загрузки

Кнопки CTA имеют очень конкретную цель: заставить вашего посетителя щелкнуть и совершить конверсию.

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

1. Используйте текст, упакованный в действие. Кнопки с призывом к действию должны содержать яркий, ориентированный на действия текст. Замените скучные слова, такие как «отправить» и «ввести», на более насыщенные действиями слова, такие как «получить», «зарезервировать» и «попробовать». Ваши слова действия должны сопровождаться конкретным текстом, относящимся к вашему предложению, например:

  • Попробуйте нашу бесплатную пробную версию
  • Забронируйте место
  • Загрузить технический документ

Текст на кнопке Udemy "Take This Course" - отличное действие, связанное с предложением.

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

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

# ThingsOnly90sKidsWillUnderstand

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

Зеленый и фиолетовый - контрастные цвета - плюс эти динозавры очаровательны

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

Посмотрите эту классную инфографику по психологии цвета от Kiss Metrics, когда у вас будет такая возможность.Это довольно интересное исследование того, как разные цвета вызывают разные эмоции!

3. Эффектные формы кнопок. Форма кнопки также может сыграть большую роль при попытке создать идеальную кнопку CTA. Вам нужно будет подумать, хотите ли вы использовать более округлую форму кнопки или кнопку с квадратными краями. Трудно сказать, что здесь работает лучше, поскольку оба стиля являются общими и оба могут хорошо работать в разных условиях. В конечном итоге вам придется протестировать формы и посмотреть, что лучше всего подходит для вашего бизнеса!

В тесте ContentVerve скругленная зеленая кнопка работает лучше, чем синий прямоугольник

4.Большой и разборчивый текст. Текст вашей кнопки должен быть достаточно большим, чтобы его можно было легко прочитать, но не настолько большим, чтобы он выглядел неприятно или пугающе. Вы хотите избежать ситуации «Дорогая, я взорвал ребенка».

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

5. Текст на кнопке не должен продолжаться и продолжаться. Ранее мы обсуждали, как хорошо использовать определенный текст кнопки, ориентированный на действие. Учитывая это, может возникнуть соблазн растянуть текст кнопки, но это будет плохой ход. В идеале вы хотите, чтобы текст этой кнопки состоял из двух или пяти слов.

Эта кнопка CTA, вероятно, в порядке, но приближается к красной зоне

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

6. Используйте речь от первого лица. Майкл Агард из Content Verve поделился исследованием, в котором он обнаружил, что изменение текста кнопки от второго лица («получите , ваш бесплатный шаблон ») на первое лицо («получите мой бесплатный шаблон ») привело к увеличению на 90%. в клики! Посмотрите, как изменение вашей кнопки CTA на кнопку от первого лица (ставя себя на место клиента) влияет на ваш CTR.

TL; DR: кнопки с призывом к действию (все сделано правильно) могут значительно повысить конверсию на вашем сайте.Получите наше бесплатное руководство, чтобы узнать, как написать потрясающий CTA для копии веб-сайта, электронной почты, баннерной рекламы и многого другого --->

7. Создавайте ощущение срочности. Создание ощущения срочности в кнопках призыва к действию может дать впечатляющие показатели CTR. Например, вы можете использовать текст кнопки, например:

  • Зарегистрируйтесь и получите скидку 50% только сегодня!
  • Загрузите электронный курс по сборке приложений за 30 долларов 10 долларов!

Даже простое добавление «сейчас» вызывает у пользователей тонкое ощущение срочности:

  • Зарегистрируйтесь для участия в вебинаре Ultimate PPC прямо сейчас!

Пример ниже отлично помогает создать ощущение срочности.Моя единственная проблема с этим - красные метки X - они служат для обозначения информационных точек, но мне кажется, что они распроданы или отменены. Это опасное неверное толкование!

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

9. Естественная иерархия. Иногда на вашей веб-странице есть другие кнопки, которые не являются основными кнопками конверсии с призывом к действию. Эти кнопки должны привлекать меньше внимания, чем ваша основная кнопка CTA. Для кнопок, не связанных с призывом к действию, попробуйте использовать кнопки с серой шкалой или монохромные цвета. Ваша главная кнопка призыва к действию всегда должна быть самой большой и яркой.

Starbucks неплохо проясняет свою основную кнопку CTA, сохраняя при этом цветовую схему

10.Используйте кнопку «Копировать» для ценностного предложения. Вы можете заметить, что многие кнопки содержат слово «бесплатно», например, «Получить мою бесплатную электронную книгу». «Бесплатно» - соблазнительное слово, и использование этого слова в тексте кнопки подчеркивает ценность вашего предложения. Обдумайте ценностное предложение своего предложения и то, как его лучше всего отобразить в кнопке с призывом к действию.

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

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

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

Пример из приборной панели

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

Кроме того, вы можете разместить эту дополнительную информацию под кнопкой или рядом с ней.Copyblogger называет эти элементы «триггерами кликов». Вот некоторые примеры триггеров кликов:

  • Отзывы
  • Информация, подавляющая тревогу (например, кредитная карта не требуется)
  • Ключевые преимущества
  • точек данных (например, пользователи видят увеличение доли на 40% при использовании X)

Пример из Social Sprout

13. Призыв к действию в тележке. сайтов электронной коммерции будут уделять больше времени A / B тестированию кнопок корзины / покупки.Даже небольшие изменения в кнопках корзины могут существенно повлиять на коэффициент конверсии. Не забудьте предложить кнопки для других способов оплаты, таких как PayPal.

Наличие кнопки PayPal может быть огромным стимулом - было МНОГО раз, когда я заказывал еду, когда я был слишком ленив, чтобы выудить кредитную карту, и продвигался вперед только по милости PayPal.

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

В одном исследовании, проведенном Марком Леппером из Колумбийского университета, участники, которых попросили выбрать один шоколад из шести коробок, были более довольны своим выбором, чем участники, которые выбрали один шоколад из 30 коробок. Держите своих пользователей довольными, давая им меньше кнопок выбирать из!

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

Buffer предлагает несколько вариантов входа, но выделяет один из остальных

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

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

16.Расширьте это белое пространство. У ваших кнопок CTA всегда должен быть здоровый кусок белого пространства вокруг них. Белое пространство помогает привлечь внимание пользователей к вашей кнопке и помогает ей выделиться.

Эта кнопка CTA от Mixbook имеет много белого пространства

17. Тестовые кнопки, как будто от них зависит ваша жизнь. Тестирование с помощью кнопок CTA абсолютно необходимо! Если вы раньше не проводили много A / B-тестирования (tsk tsk), кнопки с призывом к действию - отличное место для начала, поскольку даже небольшие, простые в внесении изменения могут иметь драматические последствия.Размещение теста, цвет, стиль, текст - если вы можете это придумать, вы должны проверить это!

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий