Кнопка мессенджеров на сайт

Кнопка «Написать нам» для сайта: окно с WhatsApp, Telegram, MAX, ВКонтакте и QR-кодами. Заполните поля в конструкторе и вставьте готовый код на свой сайт.

Посетитель нажимает на сайте кнопку «Написать нам» и выбирает, где ему удобнее общаться — WhatsApp, Telegram, MAX или ВКонтакте. С компьютера он нажимает нужную кнопку или сканирует QR-код телефоном, а с телефона кнопка сразу открывает приложение.

Кнопка бесплатная и работает сама: ни аккаунт, ни подписка Radist.Online для неё не нужны. Кнопки ведут в ваши обычные чаты. Если эти номера и аккаунты подключены к Radist.Online, переписка попадёт в amoCRM или Битрикс24 вместе с остальными диалогами — отдельно настраивать кнопку не нужно.

Соберите свой код

Заполните поля прямо здесь — в блоке «Как это будет выглядеть» сразу видно результат, а ниже, в блоке «Код для вставки на сайт», появится готовый код с кнопками «Скопировать код», «Скачать файлом» и «Разбить для Тильды».

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

Тот же конструктор открывается отдельной страницей на сайте: radist.online/knopka.

Что указать в полях

Каналы связи

Каждый канал включается галочкой — можно все четыре, можно один. Выключенный канал не появится в окне: ни кнопки, ни QR-кода.

• WhatsApp → Номер телефона — номер, на который вы принимаете сообщения: цифры с кодом страны, например 79991234567. Если начнёте номер с восьмёрки, конструктор сам заменит её на код страны и покажет под полем, какой номер уйдёт в кнопку, — сверьте, что это ваш. Номер другой страны начните с плюса, например +84… для Вьетнама.
• WhatsApp → Текст первого сообщения — необязательное поле. Текст подставится в поле ввода, когда клиент нажмёт кнопку, и вы сразу поймёте, с какой страницы пришло обращение. Короткий текст латиницей попадёт и в QR-код. Русский текст занимает в QR-коде намного больше места, поэтому обычно остаётся только на кнопке. Влез текст в QR-код или нет, конструктор пишет прямо под полем.
• Telegram — имя пользователя, имя бота или номер телефона. «Собаку» и полную ссылку вставлять не обязательно, лишнее уберётся само.
• MAX — имя бота или канала, то есть то, что идёт после max.ru/ в вашей ссылке. У личного аккаунта имени нет: откройте свой профиль в MAX, скопируйте ссылку вида max.ru/u/<хеш> и вставьте её целиком. Ссылок по номеру телефона в MAX не существует — если впишете номер, конструктор предупредит об этом под полем.
• ВКонтакте — адрес сообщества или страницы, например example_community или vk.com/club123456. Конструктор соберёт ссылку vk.me/… и покажет её под полем. Если добавляете сообщество, в нём должны быть включены личные сообщения: «Управление» → «Сообщения» → включить. Иначе кнопка приведёт на страницу, где написать нельзя.

У Telegram, MAX и ВКонтакте под полем есть настройка «Метка визита в QR-коде» («Передавать» / «Не передавать»). Что это такое — в разделе «QR-коды и метка визита» ниже.

Тексты

Это то, что видит посетитель в окне:

• Заголовок окна;
• Подпись над кнопками — на компьютере;
• Подпись над кнопками — на телефоне (задаётся отдельно: с телефона QR-коды не нужны, и звать «отсканируйте код» там незачем);
• Подпись над QR-кодами;
• Текст согласия, Текст ссылки и Адрес ссылки — укажите адрес страницы со своей политикой обработки персональных данных.

Настройки

• Якорь для кнопки на сайте — по умолчанию messenger. Это слово вы затем указываете в ссылке своей кнопки: #messenger (см. шаг 4 ниже).
• Показывать QR-коды — можно обойтись без них.
• Откуда брать метку и Слово перед меткой — настройки метки визита, они видны, когда QR-коды включены. Подробнее — в следующем разделе.
• Круглая кнопка в углу экрана и Кнопка в углу перебирает мессенджеры — плавающая кнопка и её анимация. Окно можно открывать круглой кнопкой, своей кнопкой сайта или обеими сразу.

QR-коды и метка визита

QR-коды создаются сами по указанным контактам и уже лежат внутри готового кода — отдельный сервис не нужен. Внутри QR-кода ссылка на ваш чат.

Когда окно открывается у посетителя, браузер дорисовывает в QR-код метку визита из счётчика, который уже стоит на вашем сайте:

• Ройстат — буква r и номер визита;
• Коллтач — буква c и номер сессии;
• Яндекс Метрика — буква y и ClientID (он один на все визиты с этого браузера, поэтому нужный визит ищите по нему и по времени сообщения).

В поле «Откуда брать метку» можно выбрать один счётчик или оставить «Первый найденный» — тогда порядок такой: Ройстат, Коллтач, Метрика. В поле «Слово перед меткой» задаётся подпись перед ней, по умолчанию «Код». Если оставить поле пустым, будет только сама метка.

Куда попадает метка, зависит от канала:

• WhatsApp и личный аккаунт Telegram — видимой строкой в поле ввода, например Код r1234567: клиент отправит её вместе с сообщением;
• бот Telegram, MAX и ВКонтакте — скрыто: посетитель её не видит, её получает бот, канал или сообщество при запуске чата.

У Telegram, MAX и ВКонтакте метку можно выключить — например, если ваш бот сам использует параметр start или ref. У ссылки на личный профиль MAX (u/<хеш>) метки не бывает: адрес слишком длинный для кода.

Метки не будет, если на сайте нет счётчиков, у посетителя стоит блокировщик рекламы или счётчик ещё не успел записать номер. Если счётчики на вашем сайте включаются только после согласия на cookie, а посетитель его не дал, метки тоже не будет. Во всех этих случаях QR-код работает как обычный, просто без метки. В ссылки кнопок метка не добавляется — только в QR-коды.

Сам конструктор ничего не считает: своих счётчиков в коде нет, запросов к Radist.Online он не делает. Метка едет внутри ссылки на чат обычным путем через ваш мессенджер.

Как поставить код на сайт

1. Нажмите «Скопировать код» в блоке «Код для вставки на сайт» выше. Если удобнее передать код разработчику или контент-менеджеру — нажмите «Скачать файлом».

2. Tilda: откройте страницу → «Добавить блок» → «Другое» → блок T123 «HTML-код». В один такой блок помещается не больше 30 000 байт, а код с QR-кодами больше, поэтому нажмите «Разбить для Тильды»:

   • добавьте на страницу столько блоков T123, сколько частей покажет конструктор, — подряд, один под другим;
   • нажмите «Скопировать блок» у блока 1, вставьте его в первый блок «HTML-код» и сохраните; так же — остальные, строго по номерам, каждый в свой блок;
   • блоки можно поставить в самый низ страницы — окно всё равно открывается поверх всего остального.

   В редакторе Тильды кнопки не видно — она появится только на опубликованной странице. Если вы что-то поменяли в конструкторе, разбейте код заново, удалите со страницы все старые блоки и вставьте новые. Старые и новые блоки не смешивайте.

3. Свой сайт или другой конструктор: вставьте код перед закрывающим тегом </body> либо в блок «HTML-вставка». Не знаете, где у сайта HTML-код? Спросите того, кто его делал: вставить готовый код в страницу — минутное дело.

4. Чтобы окно открывала ваша собственная кнопка или картинка, укажите у неё в поле «Ссылка» адрес #messenger. Таких кнопок на странице может быть сколько угодно.

5. Опубликуйте страницу и проверьте результат с компьютера и с телефона.

Нужна не кнопка, а одна ссылка или QR-код для визитки — возьмите генератор ссылок WhatsApp, Telegram или MAX либо генератор QR-кодов на сайте Radist.Online.

Частые вопросы

Нужно ли что-то устанавливать на сайт дополнительно? Нет. Картинки и QR-коды лежат внутри самого кода — отдельные файлы на сайт загружать не нужно. Извне подтягивается только шрифт надписей на кнопках; если он недоступен, надписи покажутся стандартным шрифтом, а окно работает как обычно.

Попадает ли в QR-код текст первого сообщения? Короткий — да. Русская буква занимает в адресе в шесть раз больше места, чем латинская, поэтому фраза из русских слов раздувает QR-код до нечитаемого с экрана. Такой текст остаётся только на кнопке, а в QR-код WhatsApp уходит короткая строка с меткой визита, например Код r1234567, — если счётчик на сайте её уже записал. Влез текст или нет, конструктор пишет прямо под полем.

Что видит клиент с телефона? QR-коды скрываются — они там не нужны, — а кнопки открывают приложение сразу. Подпись над кнопками для телефона задаётся отдельным полем конструктора.

Обращения будут приходить в Radist.Online? Кнопки ведут в ваши обычные чаты. Если номер и аккаунты подключены к Radist.Online, переписка попадёт в CRM вместе с остальными — отдельно настраивать кнопку не нужно.

Источник обращения попадёт в amoCRM или Битрикс24? Сама кнопка источник не размечает: в CRM приходит обычное входящее сообщение. Метка из QR-кода — это часть текста, который отправил клиент (WhatsApp, Telegram), или скрытый параметр запуска чата (MAX, ВКонтакте), а не поле источника. Разметка источника настраивается отдельно, силами интеграции.

Поддерживаются ли UTM-метки? Нет: служебные параметры из полей вырезаются, и ссылка на чат остаётся чистой. Отследить заход можно через метку визита в QR-коде — см. раздел «QR-коды и метка визита».

Данные, которые я ввожу в конструктор, куда-то уходят? Нет. Номер, тексты и остальные поля обрабатываются прямо в вашем браузере — код собирается на месте, и на серверы Radist.Online эти значения не передаются.

Что делать, если поменялся номер или аккаунт? Внутри кода зашита ссылка на ваш чат, и сама она не обновится. Соберите код в конструкторе заново и замените им старый на странице. Напечатанные материалы с прежним QR-кодом придётся перевыпустить.

Можно ли взять QR-код из окна для визитки, меню или листовки? Нет. Метку браузер дорисовывает каждому посетителю свою, и снимок с экрана разнёс бы одну метку на весь тираж. Для печати возьмите генератор QR-кодов WhatsApp на сайте Radist.Online, а для Telegram, MAX и ВКонтакте сделайте QR-код из обычной ссылки на ваш чат (t.me/…, max.ru/…, vk.me/…) в любом генераторе.

Можно ли поставить такую кнопку в подпись email? Окно с выбором мессенджера — нет: почтовые клиенты вырезают скрипты из писем, а окно открывается скриптом. В подпись можно положить обычную ссылку на чат или картинку QR-кода из генератора.