Кнопка WhatsApp на сайте: как подключить и не терять заявки

Кнопка WhatsApp на сайте — самый короткий путь от «интересно» до разговора с менеджером: клиенту в Казахстане часто проще написать в мессенджер, чем заполнять форму и ждать звонка. Но на многих сайтах кнопка либо ведёт на неправильный номер, либо открывает пустой чат, либо закрывает собой текст на телефоне. В этой статье — как правильно сделать ссылку, где поставить кнопку, как считать обращения и как организовать ответы, чтобы заявки не терялись. Всё это мы в Webman настраиваем на сайтах клиентов с 2016 года, и ошибки повторяются из проекта в проект.

Форма и мессенджер решают разные задачи. Форма удобна, когда нужно собрать данные: город, площадь, бюджет, файл с чертежом. Мессенджер удобен, когда человек хочет быстро задать вопрос и не готов оставлять номер «на перезвон». Многие посетители, особенно с телефона, не нажмут «Отправить заявку», но спокойно напишут «Здравствуйте, сколько стоит?».

Поэтому мы не предлагаем выбирать: на хорошем сайте есть и форма, и кнопка мессенджера. Форма ловит тех, кто готов подробно описать задачу, кнопка — тех, кто хочет сначала спросить. О том, как сделать форму, которую заполняют, мы писали в статье «Форма заявки на сайте».

У кнопки есть ещё один плюс: диалог сохраняется у клиента в телефоне. Он может вернуться к нему через неделю, переслать ваш ответ партнёру или родственникам. Звонок такой «памяти» не оставляет.

Форма собирает тех, кто готов к заказу. Кнопка WhatsApp — тех, кто хочет сначала спросить. Теряя вторых, вы теряете половину разговоров.

Чтобы добавить WhatsApp на сайт, не нужны плагины и сторонние сервисы. Достаточно обычной ссылки на официальный адрес wa.me. По ней WhatsApp сам откроет чат с вашим номером: на телефоне — в приложении, на компьютере — в WhatsApp Web или в программе для компьютера.

Формат такой:

• https://wa.me/77011234567 — номер в международном формате, без плюса, пробелов, скобок и дефисов (номер в примере условный);
• для Казахстана номер начинается с 7, а не с 8: ссылка с восьмёркой откроет чат с несуществующим номером;
• номер должен быть зарегистрирован в WhatsApp. Если вы используете отдельный рабочий номер, проверьте, что на нём установлен WhatsApp Business или обычный WhatsApp.

Проверка за минуту: откройте ссылку со своего телефона и с компьютера. Если открылся чат с вашей компанией и видно её название — всё правильно. Если WhatsApp пишет, что номер не найден, ищите ошибку в цифрах.

Пустой чат — частая причина, по которой человек нажал кнопку и ничего не написал. Он не знает, с чего начать, отвлекается и закрывает окно. Решение — заранее подставить текст сообщения. Для этого к ссылке добавляют параметр «text»:

Пример: https://wa.me/77011234567?text=Здравствуйте!%20Хочу%20узнать%20стоимость%20ремонта

Пробелы и спецсимволы в ссылке кодируются (пробел превращается в %20). Большинство конструкторов сайтов делают это сами, а если вставляете ссылку вручную, закодируйте текст любым онлайн-кодировщиком URL или попросите разработчика.

Как написать текст сообщения

1. Начните с приветствия. «Здравствуйте!» — клиенту не придётся печатать его самому.
2. Назовите тему или страницу. «Хочу узнать стоимость ремонта санузла» лучше, чем «У меня вопрос».
3. Оставьте место для деталей. Фраза должна обрываться так, чтобы человек дописал своё: площадь, адрес, дату.
4. Не делайте текст длинным. Одна строка, без рекламы и ссылок: сообщение уходит от имени клиента, а не от вас.

Хороший приём — свой текст для каждой страницы. На странице «Ремонт кухни» сообщение упоминает кухню, на странице «Дизайн-проект» — дизайн. Менеджер сразу видит, откуда пришёл человек и о чём спрашивать.

Место кнопки зависит от того, на каком шаге человек может захотеть написать. Мы обычно ставим её в четырёх местах.

1. Первый экран. Рядом с главной кнопкой или телефоном в шапке. Для мобильной версии — иконка в шапке, которую видно без прокрутки. Подробнее о первом экране — в статье «Главная страница сайта».
2. Рядом с ценами. Цена вызывает больше всего вопросов: «а если площадь больше?», «а с материалами?». Кнопка «Уточнить в WhatsApp» под прайсом снимает эти вопросы.
3. Карточки товаров и услуг. В интернет-магазине — «Спросить о товаре» с названием товара в тексте сообщения.
4. Финальный блок с контактами. Там, где человек ищет, как с вами связаться.

Плавающая кнопка: польза и риск

Плавающая кнопка в углу экрана видна всегда — это удобно. Но на телефоне она легко перекрывает текст, цены или кнопку «Купить». Проверьте каждую страницу на экране шириной около 375 пикселей: кнопка не должна закрывать важное, а на странице оформления заказа её лучше убрать или сделать меньше. Ещё одно правило: одна плавающая кнопка, а не стопка из WhatsApp, Telegram, звонка и чата, которая занимает треть экрана.

Есть два способа сделать кнопку. Первый — обычная ссылка wa.me на иконке или кнопке, свёрстанная вместе с сайтом. Второй — готовый виджет WhatsApp на сайт от стороннего сервиса: всплывающее окно с аватаром менеджера, выбором отдела, иногда — с несколькими мессенджерами сразу.

Простая ссылка подходит, когда один номер и один отдел. Она ничего не весит, не замедляет загрузку и не зависит от чужого сервиса.

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

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

Если вы платите за рекламу, нужно понимать, сколько людей с неё написали. Здесь важно честно признать ограничение: сайт видит только клик по кнопке. Отправил ли человек сообщение после этого, браузер не знает. Поэтому в аналитике мы считаем клики, а в WhatsApp — реальные диалоги, и сравниваем одно с другим.

Как настроить учёт кликов

1. В Google Tag Manager создайте триггер «Клик — только ссылки» с условием: адрес ссылки содержит wa.me (и api.whatsapp.com, если на сайте есть старые ссылки).
2. Создайте тег события Google Analytics 4, например whatsapp_click, с этим триггером. Полезно передавать адрес страницы, чтобы видеть, откуда пишут.
3. Если запущена реклама Google Ads, создайте конверсию по этому событию. Пошаговая настройка целей через GTM — в нашей статье «Как настроить цели в Google Ads через Google Tag Manager».
4. Проверьте в режиме предварительного просмотра GTM, что событие срабатывает на каждой кнопке, включая плавающую и мобильную.

Как связать клик и диалог

Готовый текст сообщения работает как метка. Если на странице рекламы текст «Здравствуйте! Пишу с сайта по поводу кухни», менеджер видит, какие обращения пришли с этой страницы. Пример подсчёта: за неделю в аналитике 40 кликов по кнопке, а в WhatsApp 26 диалогов с этим текстом — значит, примерно каждый третий нажал и не написал. Если разрыв большой, проверьте, не открывается ли на телефоне пустой чат и правильный ли номер.

Кнопка — только половина дела. Вторая половина — что происходит в телефоне менеджера. Заявки из WhatsApp чаще всего теряются не на сайте, а в переписке: сообщение пришло ночью, менеджер в отпуске, рабочий телефон лежит в ящике.

Что помогает:

• WhatsApp Business на рабочем номере. В нём есть профиль компании с адресом и часами работы, приветственное сообщение, автоответ в нерабочее время, быстрые ответы на частые вопросы и ярлыки для сортировки чатов («новый», «ждёт расчёт», «оплачено»).
• Автоответ вне рабочего времени. Короткий и честный: «Спасибо, что написали! Мы работаем с 9 до 19, ответим утром». Клиент понимает, что его увидели.
• Ответственный за чат. Один человек, который отвечает за переписку в рабочие часы, и понятное правило замены на время отпуска.
• Перенос в учёт. Если у вас есть CRM, диалоги из WhatsApp стоит заводить в неё — вручную или через интеграцию. Иначе через месяц не вспомнить, кому что обещали.

Скорость ответа в мессенджере особенно важна: человек, который написал вам, мог написать и конкурентам. Ответ через несколько минут и ответ на следующий день — это два разных результата.

Возьмите телефон и компьютер и пройдите по списку. Всё, что не сработало, — задача для разработчика на сегодня.

1. Нажмите кнопку на телефоне: открылся чат с рабочим номером компании, а не с личным номером сотрудника.
2. Повторите на компьютере: открылся WhatsApp Web или программа, номер тот же.
3. В поле сообщения уже стоит готовый текст, он соответствует странице.
4. Кнопка видна на первом экране мобильной версии без прокрутки.
5. Плавающая кнопка не закрывает цену, кнопку заказа и последние строки текста.
6. Страница с кнопкой открывается быстро на мобильном интернете.
7. В режиме предварительного просмотра GTM клик по каждой кнопке создаёт событие.
8. Напишите сами себе в нерабочее время: пришёл автоответ.

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

• номер с восьмёркой или с лишними символами, из-за чего чат не открывается;
• пустой чат без готового текста;
• личный номер менеджера на кнопке: он уволился — и клиенты пишут в никуда;
• плавающая кнопка, которая закрывает цену или кнопку оформления заказа на телефоне;
• тяжёлый виджет, который замедляет загрузку страницы;
• кнопка есть, а учёта кликов нет — непонятно, приносит ли реклама обращения;
• нет автоответа: ночные сообщения остаются без ответа до обеда.

• Ссылка wa.me/7XXXXXXXXXX — номер в международном формате, без плюса и пробелов.
• Готовый текст через параметр «text» превращает клик в сообщение и подсказывает менеджеру, откуда пришёл клиент.
• Кнопку ставьте на первом экране, рядом с ценами, в карточках и в контактах; плавающая кнопка не должна перекрывать текст.
• Клики считайте через Google Tag Manager и GA4, диалоги — в WhatsApp, и сравнивайте одно с другим.
• Рабочий номер в WhatsApp Business, автоответ и ответственный за чат защищают заявки после клика.

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