Видео-инструкция на нашем канале Youtube
Пожалуйста, не ограничивайтесь просмотром ролика - прочитайте все рекомендации на этой странице.
Во первых нужно понимать, что далеко не все посетители Вашего сайта хотят звонить со своего телефона, даже если это бесплатно. Многие небезосновательно полагают, что их номер будет немедленно занесен в базу данных и назойливые менеджеры будут перезванивать и предлагать что-то купить.
Как сделать звонок с сайта удобным и безопасным во всех смыслах?
Чтобы посетители Вашего сайта могли Вам позвонить, установите на сайт код кнопки для звонка Fast2Call. Технология WebRTC позволит посетителям сайта без трудностей, в один клик позвонить Вам прямо со страницы сайта. Это реально удобно, не требует от потенциального клиента разглашать свои персональные данные и совершенно не трудно применить.
Вы получите возможность:
принимать звонки бесплатно — если вместо Вашего номера телефона, в настройках кнопки указывается SIP ID;
звонить прямо из браузера без установки дополнительного ПО на компьютер клиента;
неограниченное количество кнопок на сайте;
возможность задать индивидуальный дизайн каждой кнопке.
Создание кнопки в разделе Fast2Call вашего кабинета.
Можно создавать кнопки и менять их параметры через API что открывает неограниченные возможности автоматизации сайта.
Код каждой вашей кнопки звонка имеет одинаковую структуру.
Незначительные отличия кода возникают в зависимости от параметров и настроек, указанных при создании или редактировании кнопки в личном кабинете.
В качестве примера, приведём код кнопки, по нажатию на которую вы можете совершить калибровочный звонок.
Данный пример можно разместить на странице вашего сайта для тестирования и ознакомления с технологией.
<!-- BEGIN SIPNET CODE {literal} -->
<script type="text/javascript">
(function(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = "https://www.sipnet.ru/bundles/artsoftemain/js/frontend/modules/webrtc_client.min.js";
var ss = document.getElementsByTagName("script")[0]; ss.parentNode.insertBefore(s, ss);
})();
</script>
<link rel="stylesheet" href="https://www.sipnet.ru/bundles/artsoftemain/css/webrtc_client.css" />
<div class="fw-container__step__form__design-btn__body">
<label for="design-btn-3" class="fw-container__step__form__design-btn__label js-start_client_call fw-container__step__form__design-btn__label--3" style="background-color: #0060C4" data-token="8R5W51S28848ZFYWZVD74UW7YJF42J95" data-dtmf="on" data-lang="ru">
<span class="js-text_call" style="color: #FFFFFF;">Позвонить</span>
<span class="fw-container__step__form__design-btn__label__icon2"></span>
</label>
<div class="fw-container__step__form__design-btn__button js-dtmf_button" style="background-color: #0060C4;"></div>
</div>
<!-- {/literal} END SIPNET CODE -->Код включает в себя три основные, обязательные составляющие. Поясним на нашем примере назначение каждой из этих составляющих.
1. Инициализация скрипта, и задание параметров необходимых для корректной работы функционала Fast2Call
<script type="text/javascript">
(function(){
var s = document.createElement("script");
s.type = "text/javascript";
s.async = true;
s.src = "https://www.sipnet.ru/bundles/artsoftemain/js/frontend/modules/webrtc_client.min.js";
var ss = document.getElementsByTagName("script")[0]; ss.parentNode.insertBefore(s, ss);
})();
</script>2. Подключение CSS-файла, отвечающего за визуальную составляющую (стилевое оформление) Fast2Call
<link rel="stylesheet" href="https://www.sipnet.ru/bundles/artsoftemain/css/webrtc_client.css" />3. HTML-код, отвечающий за вывод HTML-элементов необходимых для отображения и корректной работы Fast2Call в код web-страницы
<div class="fw-container__step__form__design-btn__body">
<label for="design-btn-3" class="fw-container__step__form__design-btn__label js-start_client_call fw-container__step__form__design-btn__label--3" style="background-color: #0060C4" data-token="8R5W51S28848ZFYWZVD74UW7YJF42J95" data-dtmf="on" data-lang="ru">
<span class="js-text_call" style="color: #FFFFFF;">Позвонить</span>
<span class="fw-container__step__form__design-btn__label__icon2"></span>
</label>
<div class="fw-container__step__form__design-btn__button js-dtmf_button" style="background-color: #0060C4;"></div>
</div>Поясним основные атрибуты HTML-элементов
* style="background-color: #0060C4;" — цвет фона кнопки, обязательный параметр, регулируется в настройках;
* style="color: #FFFFFF;" — цвет текста на кнопке, обязательный параметр, регулируется в настройках;
* data-lang="ru" — выбранный язык, обязательный параметр, обязательный параметр, регулируется в настройках;
* data-dtmf="on" — поддержка DTMF (донабора внутреннего номера), обязательный параметр;
* data-token="8R5W51S28848ZFYWZVD74UW7YJF42J95" — самая важная часть кода. именно этот идентификатор связывает код кнопки на сайте и ее настройки в личном кабинете SIPNET.При наличии базовых знаний технологий HTML и CSS вы можете управлять внешним видом Fast2Call так, как сочтете нужным. Часть 1 и 2 кода должны вставляться в код страницы один раз. Их действие распространяется на всю страницу. Часть 3 кода может вставляться в различных частях HTML кода страницы сайта и именно она задает внешний вид и расположение кнопки. В части 3 так-же указан data-token, который определяет на какой номер телефона (или на какой SIP-ID) будет звонить кнопка.
Для того чтобы изменить внешний вид вашей кнопки звонка, вносить изменения в полученный код не требуется, достаточно сохранить на своем сайте файл со стилями webrtc_client.css, отредактировать его и изменить ссылку во второй части кода на ваш индивидуальный файл стилей.
Все просто. Открываем текстовым редактором файл webrtc_client.css и вносим в него изменения. Базовые знания технологий HTML и CSS Вам помогут.
Изменение семейства шрифтов, которые используются для вывода текста, расположенного на кнопке
<style>
.js-text_call { font-family: Georgia, Arial; }
</style>
Изменение размера шрифта, который используется для вывода текста, расположенного на кнопке
<style>
.js-text_call { font-size: 10px; }
</style>Для нормальной работы Fast2Call достаточно разместить полученный в личном кабинете код кнопки звонка в шаблоне страниц вашего сайта.
Обычно это делается через интерфейс управления сайтом и Вашу CMS.
Обращаем ваше внимание, что размещать код кнопки звонка рекомендуется без использования визуальных редакторов, используемых для работы с контентом.
В большинстве популярных CMS (1C-Битрикс, Wordpress, MODX, Joomla!) для работы с контентом страниц сайта, как правило, используются различные WYSIWYG-редакторы (например, FCKEditor или TinyMCE).
Данные редакторы при сохранении изменений, могут искажать HTML-код, добавлять лишние HTML-теги, преобразовывать HTML-теги в текстовые символы, «вырезать» части кода.
Поэтому, размещать код кнопки рекомендуется либо непосредственно в шаблонах страниц сайта, либо без использования WYSIWYG-редактора.
Наиболее часто возникающие проблемы при размещении кода Fast2Call и рекомендации по их решению.
1.Описание: кнопка звонка не работает, звонок не совершается.
Рекомендации по устранению: Проверить наличие ошибок в JavaScript-коде вашего сайта, при необходимости исправить ошибки.
2.Описание: после размещения кода кнопки на сайте появились ошибки в JavaScript-коде.
Рекомендации по устранению: Проверить корректность вставки кода кнопки на предмет наличия лишних HTML-тегов, отсутствующих элементов кода кнопки. При обнаружении искажений в коде кнопки звонка разместить код повторно, при размещении учесть специфику CMS вашего сайта.