Повысьте бесперебойность SIP телефонии с новым сервисом Autoprovision.

JavaScript API: Основные случаи использования

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

Рассмотрим наиболее типичные случаи использования JS API:

1. В шапке сайта реализована возможность выбирать город

Вы хотите при смене города пользователю показывать новый подменный номер из выбранного региона.

Решение: Используйте метод getNumberRegion() с указанием выбранного города.
а) Добавьте на сайт код виджета:
<script>
    (function(w, d, u, i, o, s, p) {
        if (d.getElementById(i)) { return; } w['MangoObject'] = o;
        w[o] = w[o] || function() { (w[o].q = w[o].q || []).push(arguments) }; w[o].u = u; w[o].t = 1 * new Date();
        s = d.createElement('script'); s.async = 1; s.id = i; s.src = u;
        p = d.getElementsByTagName('script')[0]; p.parentNode.insertBefore(s, p);
    }(window, document, '//widgets.mango-office.ru/widgets/mango.js', 'mango-js', 'mgo'));
    mgo({calltracking: {id: 00000}});
</script>
Не забудьте заменить 00000 на номер вашего виджета.
б) Вставьте тег в код страницы, где должен размещаться номер телефона:
<span class="mgo-number"></span>
в) Для получения номера телефона в нужном регионе, разместите следующий скрипт после кода виджета:
<script>
    mgo(function(mgo) {
        // Запрашиваем номер для региона Санкт-Петербург
        mgo.getNumberByRegion('SPE', '', function(result) {
            // Вставляем номер во все теги с классом mgo-number
            document.querySelectorAll('.mgo-number').forEach(function(elem) {
                 elem.innerText = result.number;
            });
        });
    });
</script>
Здесь SPE означает ISO код региона РФ. Замените его на код региона, который вам нужен. Полный список кодов регионов можно получить здесь (использовать без префикса RU).

2. В шапке сайта указано два контактных номера телефона для разных городов

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

Решение этой задачи зависит от схемы обработки звонков на стороне владельца сайта.

Решение 1: Если звонки на оба номера обрабатывают одни и те же сотрудники по одной схеме распределения звонков.
а) Добавьте на сайт код виджета:
<script>
    (function(w, d, u, i, o, s, p) {
        if (d.getElementById(i)) { return; } w['MangoObject'] = o;
        w[o] = w[o] || function() { (w[o].q = w[o].q || []).push(arguments) }; w[o].u = u; w[o].t = 1 * new Date();
        s = d.createElement('script'); s.async = 1; s.id = i; s.src = u;
        p = d.getElementsByTagName('script')[0]; p.parentNode.insertBefore(s, p);
    }(window, document, '//widgets.mango-office.ru/widgets/mango.js', 'mango-js', 'mgo'));
    mgo({calltracking: {id: 00000}});
</script>
Не забудьте заменить 00000 на номер вашего виджета.
б) Вставьте теги в код страницы, где должны размещаться номера телефонов. Первый тег для одного региона, второй для другого:
<span class="mgo-number-1"></span>
<span class="mgo-number-2"></span>
в) Для получения номеров телефонов в нужных регионах, разместите следующий скрипт после кода виджета:
<script>
    mgo(function(mgo) {
        // Запрашиваем номер для региона Москва
        mgo.getNumberByRegion('MOW', '', function(result) {
            document.querySelectorAll('.mgo-number-1').forEach(function(elem) {
                 elem.innerText = result.number;
            });
        });
        // Запрашиваем номер для региона Санкт-Петербург
        mgo.getNumberByRegion('SPE', '', function(result) {
            document.querySelectorAll('.mgo-number-2').forEach(function(elem) {
                 elem.innerText = result.number;
            });
        });
    });
</script>
Здесь MOW и SPE означают ISO коды регионов РФ. Замените их на коды регионов, которые вам нужны. Полный список кодов регионов можно получить здесь (использовать без префикса RU).

Решение 2: Если звонки на номера обрабатывают разные группы сотрудников и распределение звонков происходит по схемам распределения регионов, настроенных в коллтрекинге в разделе "Настроить прием звонков для регионов", то выполните пункты а) - в) из Решения 1. Никаких дополнительных настроек делать не нужно.

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

Используйте метод ВАТС API Уведомление о вызове. В тот момент, когда вызов поступает в вашу ВАТС, на стороне коллтрекинга система получает ваш URL с параметрами и отправляет запрос в вашу систему. Одним из параметров этого запроса является секция dkt number - это секция коллтрекинга. Поле number – это подменный номер коллтрекинга, на который поступил звонок. Необходимо обработать полученное уведомление о вызове, определить и запомнить, к какому филиалу относится данный подменный номер и затем, выполнив команду route API ВАТС (маршрутизация звонка), перевести звонок на нужный филиал.

3. Подмена номеров в динамически подгружаемых блоках сайта

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

Решение: Используйте метод getNumber(), результат которого можно вставить в любое место на сайте.
а) Добавьте на сайт код виджета:
<script>
    (function(w, d, u, i, o, s, p) {
        if (d.getElementById(i)) { return; } w['MangoObject'] = o;
        w[o] = w[o] || function() { (w[o].q = w[o].q || []).push(arguments) }; w[o].u = u; w[o].t = 1 * new Date();
        s = d.createElement('script'); s.async = 1; s.id = i; s.src = u;
        p = d.getElementsByTagName('script')[0]; p.parentNode.insertBefore(s, p);
    }(window, document, '//widgets.mango-office.ru/widgets/mango.js', 'mango-js', 'mgo'));
    mgo({calltracking: {id: 00000}});
</script>
Не забудьте заменить 00000 на номер вашего виджета.
б) Вставьте следующий тег там, где требуется разместить номер телефона:
<span class="mgo-number"></span>
в) Для получения номера телефона, выполните следующий код после того, как сгенерятся динамические блоки на сайте:
<script>
    mgo(function(mgo) {
        // Запрашиваем номер
        mgo.getNumber('', function(result) {
            // Вставляем номер телефона во все теги с классом mgo-number
            document.querySelectorAll('.mgo-number').forEach(function(elem) {
                 elem.innerText = result.number;
            });
        });
    });
</script>

4. Сайт - доска объявлений

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

Решение: Когда пользователь нажимает на кнопку "Показать номер", необходимо сделать запрос к API на выделение нового номера в нужном регионе, вызвав функцию getNumberByRegion(). При каждом клике пользователя будет выделен уникальный номер. Полученную связку: номер - объявление нужно запомнить в вашей базе данных или в любом другом хранилище. Когда клиент позвонит на выделенный номер, используйте параметр custom_params и подменный номер коллтрекинга в ВАТС API и переадресуйте звонок на автора объявления. Увеличьте счетчик количества звонков по данному объявлению в вашей системе аналитики, таким образом вы соберете нужную статистику по звонкам

Заказать звонок

Выберите интересующий вас вопрос:

или

Позвонить прямо с сайта

Позвонить

Хотите себе такой же виджет? Узнайте, как подключить!

Отправляя заявку, вы даете согласие с Политикой обработки персональных данных