Видео-инструкция на нашем канале 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 и рекомендации по их решению.
Рекомендации по устранению: Проверить наличие ошибок в JavaScript-коде вашего сайта, при необходимости исправить ошибки.
Рекомендации по устранению: Проверить корректность вставки кода кнопки на предмет наличия лишних HTML-тегов, отсутствующих элементов кода кнопки. При обнаружении искажений в коде кнопки звонка разместить код повторно, при размещении учесть специфику CMS вашего сайта.