Интеграция коллтрекинга МАНГО ОФИС (режим Площадка)

Адрес:
https://www.mango-office.ru/

Доступные методы:
https://www.mango-office.ru/support/calltracking_vs_analytics/api_dinamicheskogo_kolltrekinga/js_api_use_cases/?PATH=%2Fcalltracking_vs_analytics%2Fapi_dinamicheskogo_kolltrekinga%2Fjs_api_use_cases 



Доска объявлений
  1.  Для настройки доски необходимо подключить эту услугу в кабинете. Для этого идем в кабинет, далее Коллтрекинг

    Далее “Настройки”, далее “Доски объявлений”


    Настраиваем услугу (включаем ее и настраиваем IVR, вот документация для его настройки
    https://www.mango-office.ru/support/virtualnaya_ats/bystryy_start/nastroyka_skhemy_priema_zvonkov/?utm_source=inst)
  2.  На своей странице внедряем в head перед body следующий скрипт
    <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: XXXXXX}});
    </script>
    

    Этот скрипт можно получить из кабинета

  3. Затем на странице внедряем обработчик события запроса подмены номера

      Код верстки для примера:
<div class="mango-number-block">
   <input type="hidden" class="as-userPhone" value="79876543210">
   <a href="#0" class="show-number">Показать</a> <a class="mgo-number"></a>
</div> 

ВАЖНО: если у вас на странице несколько номеров, они все должны отличаться классами, например “mgo-number-{id}”, также нужно сгенерировать хэш

Код jquery:
$(document).on('click', '.show-number', function (e) {
  e.preventDefault();
  var isSucces = false;
  var ph = $(this).closest('.mango-number-block').find('.as-userPhone').val();
  // Запрашиваем номер
  var hash = as.tools.smallGuidGenerator();
  mgo.getNumber({ redirectNumber: ph, hash:hash }, function(result) {
	console.log("xx",result);
  // Вставляем номер телефона во все теги с классом mgo-number
  document.querySelectorAll('.mgo-number').forEach(function(elem) {
	  $(elem).html(" "+result.number);
	  var attr = $(elem).attr('href');
	  if(typeof attr !== typeof undefined && attr !== false){
		$(elem).attr('href','tel:+'+result.number);
	  }
	  isSucces = true;
	  $('.show-number').hide();
	});
  });
  setTimeout(function(){
	  if(!isSucces){
		  console.log("Mango Неверный номер")
	  }
  },1000);
});
 

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Выгода от использования Falcon Space

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