Ссылка на телефон и мессенджеры на сайте

Ссылка на телефон на сайте важна и принципиальна: кто-то пишет в обратную связь, кто-то заказывает обратный звонок, но многие предпочитают сразу набрать на телефон и выяснить все детали у оператора. Именно поэтому для большинства проектов – коммерческих и не только – приходится продумывать систему формирования и размещения контактной информации. И в первую очередь – телефонов.

Впрочем, сейчас “конкуренцию” телефонам составляют мессенджеры. Они гораздо более функциональны, да и стоимость звонка практически отсутствует, откуда бы вы не звонили. Поэтому в нашей публикации мы рассмотрим и вопросы размещения ссылок на мессенджеры.

Как сформировать контактную информацию для сайта

Когда-то очень давно я считал, что с телефонами и другой контактной информацией можно особо не мудрствовать и указывать их в HTML-коде “как есть”. Однако уже после первой ситуации с изменением телефонов и адресов пришлось переходить на схему централизованного указания того, что англоязычная аудитория называет credentials.

В системе Cotonti Siena существует удобная и отработанная система размещения ресурсов, точнее – ресурсных строк. Фактически, это элементы массива $R, который доступен глобально. Для удобства я всегда размещаю контактную информацию в отдельном php-файле темы, который подключаю к основному. Принцип следующий:

…
omnis.php
omnis.rc.contacts.php
…

Конечно, нейминг каждый выбирает исходя из личных предпочтений. Подключение простое:

require_once cot_rc($cfg['themes_dir'].'/omnis/omnis.rc.contacts.php');

Итак, в файле omnis.rc.contacts.php мы размещаем ресурсных записи с контактной информацией:

…
$R[‘Phone’] = ‘+375 (29) 123-45-67’;
$R[‘Address’] = 'пр. Независимости, 220000, Минск, Беларусь’;
…

Теперь в TPL-шаблонах их можно использовать примерно так:

<p>
    Звоните нам по телефону {PHP.R.Phone} или приезжайте по адресу {PHP.R.Address}
</p>

Соответственно, при изменении контактов в ресурсном файле они изменятся во всех шаблонах и на всех страницах сайта. С адресом проблем обычно не возникает, поэтому дальше будем рассматривать только телефоны.

Как формируется ссылка на телефон на сайте

Конечно, простой номер телефона на сайте уже никого не устроит: нужна кликабельная ссылка вида:

<a href=”tel:+375291234567”>+375 (29) 123-45-67</a>

С учетом размещения номера в массиве ресурсов получим примерно следующий HTML-код в шаблоне:

<a href=”tel:{PHP.R.Phone}”>{PHP.R.Phone}</a>

Но в атрибуте href номер не должен иметь ни скобок ни дефисов. Так что напишем небольшую функцию:

if (!function_exists('sedby_clearphone')) {
    function sedby_clearphone($phone) {
        return preg_replace('/[^0-9]/', '', $phone);
    }
}

Применим ее в шаблоне:

<a href=”tel:+{PHP.R.Phone|sedby_clearphone()}”>{PHP.R.Phone}</a>

Уже хорошо, но для особо ленивых можно предложить вывод готового кода. Добавляем еще одну функцию:

if (!function_exists(‘sedby_makephonelink')) {
    function sedby_makephonelink($phone, $params = '') {
        $href = 'tel:+' . sedby_clearphone($phone);
        return cot_rc_link($href, $phone, $params);
    }
}

Теперь можем просто указать в TPL-шаблоне:

{PHP.R.Phone|sedby_makephonelink()}

и получить готовую кликабельную ссылку на номер телефона. И еще один пример с указанием атрибутов ссылки в параметре $params:

{PHP.R.Phone|sedby_makephonelink($this, ‘title=”Позвоните нам” class=”some-class”’)}

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

<a href=”tel:+{PHP.R.Phone|sedby_clearphone()}”>
    <i class="fa-solid fa-phone"></i>
</a>

На этом с телефонами закончим и перейдём к мессенджерам и особенностям их размещения.

Ссылки на мессенджеры на сайте

Будем считать, что на смартфоне с номером, определенным нами как $R[‘Phone’], установлены мессенджеры Telegram, Viber и Whatsapp. Ссылки на два последних будут выглядеть следующим образом:

<a href="viber://chat?number={PHP.R.Phone|sedby_clearphone($this)}">
    <i class=”fa-brands fa-viber”></i>
</a>
<a href="https://wa.me/{PHP.R.Phone|sedby_clearphone($this)}">
    <i class=”fa-brands fa-whatsapp”></i>
</a>

С мессенджером Telegram немного иначе: используется не номер телефона, а ник пользователя. Поэтому укажем его в массиве $R:

$R[‘Telegram’] = ‘myTelegramNick’;

И в шаблоне:

<a href="https://t.me/{PHP.R.Telegram}">
    <i class=”fa-brands fa-telegram”></i>
</a>

Как видим, ничего сложного: мы обошлись нашей стандартной функцией по удалению из телефонного номера всего, кроме цифр.

На этом можно было бы и закончить, если бы не еще одна тема:

Ссылка на мессенджер MAX на сайте

Ссылки нового российского мессенджера MAX отличаются от аналогов: ссылка не имеет привязки к номеру телефона, указанному при регистрации, а для связи ваш абонент обязательно должен иметь установленное приложение MAX на своем устройстве.

Для того, чтобы сформировать ссылку на ваш профиль MAX, необходимо выполнить следующие действия:

• открыть приложение и зайти в свой профиль,
• кликнуть по иконке QR-кода, расположенной в левом верхнем углу приложения,
• кликнуть по кнопке “Поделиться” – при этом соответствующая ссылка будет скопирована в буфер обмена,
• полученную ссылку необходимо указать в атрибуте href ссылки на сайте.

Как видим, все немного иначе, однако нельзя утверждать, что это хорошо или плохо. MAX реализован в соответствии с заложенным в него подходом к решению вопросов безопасности и адаптации к российскому рынку, поэтому если клиент требует, делаем.

Заключение

Интеграция телефонных номеров и ссылок на мессенджеры уже давно является обязательным требованием для любого проекта, особенно коммерческого. Ваши потенциальные клиенты смогут в любое время и из любой локации связаться с вами для оперативного решения интересующих их вопросов. Наличие любых каналов связи улучшит показатели лояльности и доверия к вашему бренду, а вы сможете не только оперативно отвечать на вопросы, но и получать любую обратную связь в режиме реального времени.

Все достоинства налицо, а про реализацию мы рассказали выше. Пробуйте, экспериментируйте и не забывайте отписываться о результатах в комментариях.