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

Несколько строк JS кода для звонка из браузера на мобильный телефон

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

Схема звонка

Прежде всего, потребуется SIP-аккаунт оператора VoIP телефонии. Оператор «приземляет» звонок, идущий по интернету (VoIP) и дозванивается до мобильного или городского телефона.

Наши задачи в этом случае следующие:

SIP аккаунт

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

SIP аккаунт состоит из шести следующих параметров:

Упрощенный SIP аккаунт

Часто бывает, что domain совпадает с outbound proxy и login совпадает с authentication name, и порт используется стандартный 5060. В этом случае SIP оператор может предоставить SIP аккаунт в упрощенном виде:

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

Тест с десктопным софтфоном

При использовании софтфона Bria 4, настройки подключения по SIP выглядят так:

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

Осталось позвонить с софтфона и убедиться в том, что SIP звонки действительно проходят на нормальные телефоны. Например, позвоним в Минкомсвязь по телефону +74957718000.

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

HTML страница для звонка

Браузерные звонки будут идти по технологии WebRTC через сервер Web Call Server 5, который с одной стороны работает с браузером по WebRTC, а с другой созванивается с SIP оператором по SIP.

Код HTML-страницы, с которой выполняются звонки довольно компактный и занимает 14 строк:

На странице размещена кнопка Call для звонка и кнопка Hangup для его сброса. Есть поле, в котором отображается статус.

Div — элементы localMedia и remoteMedia используются для внедрения в страницу объектов, отвечающих за получение и отправку звука.

Скрипт flashphoner.js доступен для скачивания в сборке Web SDK.

Скрипт click-to-call.js для звонка

Скрипт click-to-call.js содержит 97 строк. С помощью этого скрипта устанавливается коннект к серверу и делается звонок.

В данном скрипте можно отметить четыре основных функции:

Инициализация

Здесь мы просто вызываем функцию init() и тем самым инициализируем API.

Установка соединения с сервером

Здесь мы подключаемся к серверу по защищенному протоколу websockets и передаем данные SIP аккаунта, для того, чтобы сервер, в свою очередь смог подключиться к SIP оператору (провайдеру).

Звонок

Создаем звонок и вызываем метод call() для вызова. При создании звонка передается параметр callee — это номер абонента, которому звоним, например номер мобильного.

Сброс звонка

Для того, чтобы сбросить звонок, вызываем метод API hangup()

Источник

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

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

Также знаем, что в современном обществе каждый создаваемый вами сайт должен быть отзывчивым. Но что происходит с номерами телефонов, которые вы добавляете в своих постах и страницах WordPress?

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

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

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

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

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

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

Использование Skype звонков.

Но что, если вы хотите, чтобы ваши посетители могли выбирать между обычным и skype звонком? Тогда вам просто нужно изменить протокол в ссылке. Итак, вместо протокола TEL, используйте протокол CALLTO:

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

Использование СМС

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

Как добавить кнопку вызова с помощью бесплатного плагина.

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

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

Это плагин Call Now Button

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

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

Кода вы установите и активируете плагин Call Now Button, зайдите в его настройки. Перед вами откроются три вкладки. На первой вкладке введите свой номер телефона, а также текст, который будет показан на кнопке.

Далее перейдите на вкладку Presentation. Выберите здесь цвет кнопки, позицию кнопки, а также введите те ID постов, на которых вы хотите отобразить кнопку, или выберите опцию Exclude these posts and pages и введите те ID постов, на которых кнопка вызова не должна появлятся.

И на вкладке Advanced вы можете добавить дополнительные настройки, такие как отслеживание ваших звонков с помощью Google Analitics и других настройках.

И вот как будет выглядеть готовая кнопка вызова.

Как и во многом другом, в WordPress создание кликабельных номеров телефонов совсем не сложно. И это можно сделать буквально в несколько кликов.

А если у вас остались ещё вопросы, то задавайте их в разделе с комментариями, и я с радостью на них отвечу.

Источник

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

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

Звонок в один клик: проверяем ваш сайт

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

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

Использовать активный номер на сайте важно по нескольким причинам:

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

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

Существует несколько простых способов, как сделать номер телефона кликабельным, не потеряв при этом оформление и стили:

Способ 1. Код сайта

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

Либо вот так, если у него есть класс:

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

Получается, для примера № 1 код получится таким:

Для второго примера код выглядит так:

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

Сохраните код, и телефонный номер станет кликабельным.

Способ 2. Конструктор сайтов или CMS

В функционале любого конструктора или CMS-системы есть несколько особых инструментов, которые позволяют сделать номер кликабельным. Полную информацию вы найдете в разделе FAQ на соответствующей площадке (Tilda, Wix, LP и т.д.). Однако есть один способ, подходящий для любого конструктора.

Механизм «Гиперссылка» при форматировании текста доступен, как правило, везде. Цифры — это текст. Следовательно, вы можете ввести их в редактор. Чтобы номер был кликабельным, обозначьте текст номера, оформите его как гиперссылку, после чего в блоке «Адрес» пропишите следующее:

Гиперссылка включится автоматически.

Способ 3. Коллтрекинг

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

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

В ситуации, когда цифры на сайте не кликабельные, подменяться будет и простой номер в форме текста. Если же на ваш номер можно совершить звонок в один клик, то скрипт, используя класс, заменит и номер, прописанный в атрибуте «href=tel:XXX. Когда пользователь нажимает по подменному номеру, совершается звонок.

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

Источник

Как сделать «Заказать обратный звонок» для WordPress своими руками

Что же такого сложного в форме «обратного звонка для WordPress»? Собственно, ничего сложного нет, но этот функционал, по закону жанра, должен включать в себя следующие элементы (как это реализовано на большинстве продающих страниц):

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

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

Создаем фиксированную кнопку для обратного звонка

Первым делом, готовим картинку кнопки для обратного звонка. Можно нарисовать самому или поискать в поиске. Дальше, нам ее нужно зафиксировать (неподвижно) в самой горячей зоне экрана, чтобы она больше привлекала внимание и была всегда под рукой. На практике это выглядит так (зеленая кнопка «Заказать обратный звонок» прилипла к правому верхнему углу экрана):

Когда с картинкой определились, в header.php текущей темы после прописываем вызов кнопки:

А в style.css текущей темы пишем стиль для кнопки:

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

Создаем страницу с формой для заказа обратного звонка

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

Создаем шаблон для страницы обратного звонка

В этом ничего сложного нет:

Сделайте копию файла page.php из вашей текущей темы и назовите его page_contacts.php

Вверху файла после Создаем форму с полями для ввода

В нашем случае, создадим форму, по принципу обратной формы связи, с помощью всем нам известного плагина Contact Form 7 (Вы же можете создать форму с помощью своего любимого плагина). Здесь я не буду детально все расписывать, нам достаточно создать самую простую форму типа:

Форма с полями для ввода готова, нам выдали шорткод:

Теперь мы перенесем форму на саму страницу Заказа обратного звонка.

Создаем страницу для заказа обратного звонка

Постоянную ссылку для страницы прописываем contakts (помните, наша кнопочка ссылается на нее: rel=»http://ваш_сайт.ру/contakts»)

А в качестве содержимого страницы, в режиме редактора ТЕКСТ пишем что-то такое:

Открываем форму заказа обратного звонка в модальном окне

Там же (после него) добавляем js код:

Осталось лишь добавить в стили (в файл style.css):

Теперь все должно работать!

Вариант №2: Заказать телефонный звонок в модальном окне fancybox

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

1. В header.php текущей темы после прописываем вызов кнопки:

В style.css текущей темы пишем стиль для кнопки:

2. Создаем форму с нужными нам полями в плагине Contact Form7, где просим указать свой телефон и т.д..

3. Создаем модальное окно следующим кодом (добавляем код после вызова самой кнопки), в котором цепляем контактную форму:

Все! Этот способ не требует создания шаблонов страниц и самих страниц. Форма заявки на обратный звонок создается в модальном окне fancybox.

Вариант №3: Заказать телефонный звонок в модальном окне на CSS

В нужном месте страницы, где надо разместить кнопку вызова формы размещаем код:

Теперь осталось лишь добавить CSS стили в файл со стилями:

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

На этом, собственно, все! Побольше Вам клиентов и побольше телефонных звонков!

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

Наверняка у Вас есть вопросы, просьбы или пожелания. Не стесняйтесь спросить, я отвечаю всегда быстро.

Источник

Как сделать кнопку «Заказать обратный звонок»

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

Конечно, в большинстве случаев модальные окна делают с применением javascript, но сегодня мы попробуем обойтись только средствами css, и не будем нагружать наш landing page лишним скриптом.

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

О том, как настроить контактную форму можно почитать в этих статьях:

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

Будем реализовывать такой функционал: 🙂

Первое, что нужно сделать, это подключить таблицу стилей (less), представленную в исходнике. Я очень подробно описал его комментариями, посмотрите и внесите правки.

Html структура очень проста. Размещаем эту ссылку в нужное место на сайте. Туда, где вы планируете вывести кнопку «заказать обратный звонок»:

Теперь нужно создать контейнер модального окна:

Я добавил небольшую контактную форму, получилось так:

Не стал публиковать таблицу стилей, можете скачать исходник здесь:

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

60 комментариев

Добрый день
Когда, Нажимаю на скачать исходник появляется такая страница со знаками: gyazo.com/2aada13a1d4dbc076c78a28cb535774c
и не получается скачать..

А как можно в место кнопки «Заказать обр. звон.» сделать текст? и как вариант картинку!

Удалить текст между тегами «a», воспользоваться тегом img и прописать путь к картинке. Или удалить текст и написать свой

Дима, привет. Ты отлично все объясняешь, поэтому я решил спросить у тебя 🙂 Я сейчас делаю лэндинг, который отчасти и интернет-магазин сразу. И вот столкнулся с такой, проблемой, что мне нужны работающие формы заказа как описана в этой статье, потом полная, из трех строчек, да еще и во всплывающем окне, которые будет открываться в другом всплывающем окне (описании товара). Сразу я боюсь запутаться в коде, так как до ЖаваСкрипт и ПХП добрался совсем недавно и пока лишь учусь (а точнее, привыкаю и набиваю руку). Поэтому просто-напросто боюсь запутаться в стилях и незнакомом пока что коде скриптов. Суть вопроса вот в чем: если мне нужно две формы заказа хотя бы на сайте, я могу использовать просто два разных пхп-скрипта твоего же авторства, или для начала, чтобы не запутаться в структуре файлов и основного файла, лучше обойтись одной?

Привет, давай по порядку. У тебя есть уже кнопка заказать обратный звонок, при клике по ней всплывает модальное окно. Теперь ты хочешь поместить туда форму из статьи https://smartlanding.biz/sozdanie-formy-obratnoj-svyazi.html.

Если ты хочешь добавить несколько форм, то тебе достаточно менять id action и name формы, например:

Источник