Настройка SIP телефонов Mango Talker - настройка API интеграции Настройка ВАТС / Часто ищут

Классическая версия кода виджета. У номера телефона нет идентификатора или класса

В случае, если показ по номеру телефона по каким-либо причинам не подходит, а у элементов с номером телефона нет каких-либо идентификаторов или классов, но при этом сам номер телефона — ссылка («кликабельный»), можно воспользоваться javascript-селектором по href-параметру ссылки.

Пример. На сайте имеется элемент-ссылка с номером телефона (или элементы):

image-20240530120244929

Сначала необходимо указать основной код виджета, содержащий только id виджета, без каких-либо поисков и показов номеров.

image-20240530120538979

Затем необходимо вызвать функцию (внутри обертки mgo) getNumber с передачей некоторого значения hash (хэш), после чего вызвать колбэк функцию для обработки номера телефона (форматирования, вывода на сайт и т. п.).

На деле это выглядит просто:

image-20240530120611196

В примере:

  • mgo.getNumber ({hash: 'mgo_hash'} — функция получения номера телефона с передачей хэша
  • function (result) {…} - колбэк функция, выполняемая после получения номера телефона
  • var n = result.number — в переменную n присваивается полученный номер из result.number (для простоты использования)
  • document.querySelectorAll () — javascript функция поиска всех элементов на сайте по определенному признаку
  • '[href="tel:+78 005 555 522"]' — передача признака для поиска в функцию поиска элементов. В данном случае используется поиск элементов, содержащих ссылку tel:+78 005 555 522. Формат ссылки важен.
  • forEach () — функция перебора всех элементов, в данном случае перебирает все элементы, найденные предыдущей функцией;
  • функция, в которую в качестве параметра (e) передается текущий элемент перебора:
function(e) {
 e.innerHTML = '8 ('+n.substr(1,3)+') '+n.substr(4,3)+'-'+n.substr(7,2)+'-'+n.substr(9,2);
10
 if (e.getAttribute('href')) {e.setAttribute('href', 'tel:+'+n);}});
} 
  • e.innerHTML = … — функция, заменяющая внутренность текущего перебираемого элемента
  • '8 ('+n.substr (1,3)+') '+n.substr (4,3)+'-'+n.substr (7,2)+'-'+n.substr (9,2) — строка, форматирующая полученный номер для вывода. Функция substr (pos, q) позволяет взять конкретные цифры из номера (начиная с pos взять q символов). Отсчет начинается с 0, поэтому первая цифра номера имеет порядковый номер 0, вторая — 1, и т. д. С помощью плюсов и кавычек, в которые заключен обычный текст, можно вывести номер в любом формате и с любыми дополнительными элементами. Данная комбинация выведет номер в формате «8 (495) 123-45-67».
  • e.setAttribute ('href', 'tel:+'+n) — функция заменит ссылку (параметр href) на полученный номер телефона (href="tel:+74 951 234 567″) для того, чтобы при клике на номер телефона звонок пошел на выданный номер.

Итоговый пример кода:

image-20240530121403682

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


Остались вопросы? Напишите нам:

Мессенджеры

Задавайте вопросы в мессенджерах:

Оставьте заявку

Оставьте заявку в личном кабинете.
Написать в отдел по работе с клиентами: mango@mango.ru
Написать в техническую поддержку: techsupport@mangotele.com

Позвоните нам

Свяжитесь с нами, мы работаем круглосуточно: 8 800 555-55-22