Скрипт. Идентификаторы для номера телефона

Необходимо установить модуль подмены в коде сайта и прописать в кабинете Колибри идентификатор и формат замены номера.

 

Идентификатор - это значение class или id в теге с номером телефона, который нужно подменять. Он нужен для того, чтобы наш скрипт нашел номер на странице сайта. 

Чтобы посмотреть значение в теге (class или id), нужно зайти на сайт и открыть код. В разных браузерах это делается по-разному, но основной способ - выделить номер телефона, кликнуть на него правой кнопкой и выбрать в меню "Просмотреть код элемента", "Инспектировать элемент" и тд. Откроется html-код сайта. У найденного номера увидите теги, в которых будет прописан либо class, либо id.

То значение, которое указано в кавычках, вы прописываете в поле Идентификатор, в нашем примере это можете быть и .callibri_phone и #phone.

Если значение class, то прописывать нужно в формате: .значение

Если значение id, то прописывать нужно в формате: #значение

Если вы добавляете отдельно class в код сайта, то не ставьте точку перед значением - это некорректно. 

 

Само значение class="callibri_phone" воспринимается нашей системой автоматически, даже если оно не добавлено в настройках сайта.

В поле Формат прописывается формат отображения номера. Если на вашем сайте номер телефона заключен в теги со стилем, то их нужно вписать в наш шаблон. Дополнительный текст (например, слова "телефон" или "тел.") тоже нужно вписать в строку формат.

Если вам нужен на сайте кликабельный номер (звонок напрямую с сайта), необходимо прописать его следующим образом: <a class="callibri_phone" href="tel:+78002002650">8 800 200 26 50</a>. В поле Идентификатор указывается .callibri_phone, а в поле Формат 8 (#{XXXX}) #{XX}-#{XX}-#{XX}. Ссылка tel должна быть в одном теге с class или id, чтобы в результате замена происходила и в ссылке.   

Можно добавить несколько Идентификаторов. Идентификатор добавляется только в том случае, если оба поля заполнены.

На всех страницах сайта в код сайта перед закрывающим тегом </body> нужно обязательно добавить строчку:

 

<script src="//cdn.callibri.ru/callibri.js" type="text/javascript" charset="utf-8"></script> 

 

Без неё подмена производиться не будет.

 

Обратите внимание
Значения class, в отличие от значений id, могут повторяться в коде сайта, поэтому необходимо проверить их уникальность.
Пример: возьмем значение class="content" (в коде сайта может выглядеть так <span class="content"> номер телефона </span>). Если это значение не уникальное, то есть на сайте есть ещё теги с этим значением class, то все содержимое этих тегов будут подменяться на номер, хотя там может быть совсем другая информация. Поэтому в случае совпадений значений class, необходимо добавить через пробел еще одно, которое станет уникальным. Например, <span class="content callibri_phone"> номер телефона </span>.

Бывают случаи, что формат номеров может быть разным. Например, в шапке сайта он выглядит так: +7 (111) 111-11-11, а в подвале так: 111-11-11. Тогда мы используем разные значения class, чтобы показать скрипту, в каком виде следует отображать конкретный номер. 
Необходимо добавить значения в код сайта: <span class="callibri_phone">+7 (111) 111-11-11</span> и <span class="callibri_phone123">111-11-11</span>. 
В настройках личного кабинета пропишем следующим образом: 
идентификатор                          формат 
.callibri_phone                  +7 (#{XXX}) #{XXX}-#{XX}-#{XX} 
.callibri_phone123       <span style="display: none">+7 (#{XXX})</span>#{XXX}-#{XX}-#{XX}