Прямое открытие мессенджеров по ссылке из приложения Apache Cordova

Просмотров: 1166

Задача: При клике по ссылкам на Telegram и WhatsApp в мобильном приложении необходимо сразу открывать мессенджеры без промежуточного открытия системного браузера.

Прямое открытие мессенджеров по ссылке из мобильного приложения Apache Cordova

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

Для того, чтобы избежать открытия мессенджера в системном браузере и сразу запустить его, необходимо добавить следующие строки в файл конфигурации приложения (config.xml):

<allow-intent href="tg://*/*" />
<allow-intent href="whatsapp://*/*" />

Добавление ссылок на мессенджеры, в зависимости от платформы

На iOS есть особенность, заключающаяся в том, что ссылка на нужный чат в WhatsApp отличается от ссылки для Android. Поэтому для этого мессенджера необходимо проверять платформу и использовать соответствующую ссылку.

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


<button id="open_tg_chat">Открыть Telegram </button>
<button id="open_wa_chat">Открыть WhatsApp </button>

<script>
    document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady() {

        // Telegram ======================================================
        document.getElementById("open_tg_chat").onclick = function () {
            function openTelegramChat(username) {
                var url = "tg://resolve?domain=" + username;
                var target = "_system";
                var options = "location=yes";
                window.open(url, target, options);
            }
            openTelegramChat("ВАШ_ФААКАУНТ_В_ТЕЛЕГЕ");
        }

        // Whatsapp ======================================================
        var devicePlatform = device.platform;
        if (devicePlatform === 'Android') {
            document.getElementById("open_wa_chat").onclick = function () {
                function sendWhatsAppMessage(number, message) {
                    window.location.href = "whatsapp://send?phone=" + number + "&text=" + message;
                }
                sendWhatsAppMessage("+7911_ВАШ_НОМЕР");  // Замените на нужный номер телефона
            }
        } else {
            document.getElementById("open_wa_chat").onclick = function () {
                function sendWhatsAppMessage(number, message) {
                    window.location.href = "whatsapp://send?abid=" + number + "&text=" + message;
                }
                sendWhatsAppMessage("+7911_ВАШ_НОМЕР");  // Замените на нужный номер телефона
            }
        }

    }
</script>
Если вы хотите перенаправлять пользователей в разные чаты в Telegram, то проверку платформы можно также делать и для ссылок на этот мессенджер. Это может быть полезно для сегментации пользователей.

Теперь, при нажатии на кнопку с мессенджером, не будет открываться системный браузер, а сразу произойдет переход в нужное приложение.

Михаил Базаров 03.04.2023
Таким же образом, добавляя нужные схемы в config.xml, можно открывать любые другие приложения на телефоне пользователя

Блог-note: заметки разработчика

Основные функции вывода в шаблонах Битрикс

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

Input Type File, множественный с дропзоной и показом превью

Задача: Сделать возможность загрузки файлов в множественный input type="file" c помощью drag&drop и показом превью загру...

Увидеть файл заказов который передаст Битрикс в 1С

Для диагностики обмена заказов, интернет-магазина на 1С Битрикс с 1С Управление Торговлей, нужно увидеть xml файл с зака...

Работа с HTTP-запросами в Bitrix: Обзор возможностей класса \Bitrix\Main\HttpRequest

Класс \Bitrix\Main\HttpRequest, является наследником класса Request, представляет собой мощный инструмент для работы с д...

AJAX корзина с отправкой количества из раздела каталога

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

Вывести артикул в печатную форму бланка заказа

Задача: в печатную форму бланка заказа добавить артикулы товаров и данные о пользователе.

Ajax форма обратной связи, реализация в битрикс

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

Получить и вывести все цены товара в 1С-Битрикс

Задача: получить и вывести все цены товара по его ID в каталоге 1С-Битрикс (например, в детальной карточке catalog.e...

Сортировка элементов по индексу сортировки значений типа список

Внутри любого компонента есть заранее заложенные поля для сортировки элементов. Можно сортировать элементы в разных напр...