Перейти к содержимому

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

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

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

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

Не путайте с виджетом открытой линии Битрикс24 — это другая кнопка и другая настройка. Если вы искали её, вам сюда: Кнопка на сайт в Битрикс24.

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

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

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

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

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

Каналы связи

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

  • WhatsApp → Номер телефона — номер, на который вы принимаете сообщения: только цифры, с кодом страны и без плюса, например 79991234567. Если начнёте номер с восьмёрки, конструктор сам подставит код страны и покажет под полем, какой номер уйдёт в ссылку, — сверьте, что это ваш.
  • Telegram — имя пользователя, имя бота или номер телефона. «Собачку» и полную ссылку вставлять не обязательно, лишнее уберётся само.
  • MAX — имя бота, например id1686013002_3_bot. У номерного аккаунта имени нет: откройте свой профиль в MAX, скопируйте ссылку вида https://max.ru/u/f9LHod… и вставьте её целиком, ничего не обрезая. Ссылок по номеру телефона в MAX не существует — номер в это поле вписывать бесполезно, конструктор предупредит об этом под полем.
  • Текст первого сообщения — необязательное поле. Он подставится в поле ввода, когда клиент нажмёт кнопку с компьютера, и вы сразу поймёте, с какой страницы пришло обращение. В QR-код этот текст не попадает.

Тексты

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

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

Настройки

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

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

  1. Нажмите «Скопировать код» в блоке «Код для вставки на сайт» выше. Если удобнее передать код разработчику или контент-менеджеру — нажмите «Скачать файлом».
  2. Tilda: откройте страницу → «Добавить блок» → «Другое» → блок T123 «HTML-код» → вставьте код и сохраните. Блок можно поставить в самый низ страницы — окно всё равно открывается поверх всего остального.
  3. Свой сайт или другой конструктор: вставьте код перед закрывающим тегом </body> либо в блок «HTML-вставка».
  4. Чтобы окно открывала ваша собственная кнопка или картинка, укажите у неё в поле «Ссылка» адрес #messenger. Таких кнопок на странице может быть сколько угодно.
  5. Опубликуйте страницу и проверьте результат с компьютера и с телефона.
Перед публикацией нажмите каждую кнопку в предпросмотре и убедитесь, что открывается нужный чат. QR-коды проверьте камерой телефона — так же, как это сделает клиент. Ошибка в одной цифре номера — и клиенты будут писать чужому человеку.

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

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

Почему в QR-код не попадает текст первого сообщения? Русский текст сильно увеличивает количество точек в коде, и он перестаёт считываться с экрана. Поэтому в QR-код зашивается только ссылка на чат, а текст подставляется при нажатии кнопки с компьютера.

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

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

Что делать, если поменялся номер или аккаунт? Соберите код в конструкторе заново и замените им старый блок на странице. Код статичный: он не обновляется сам после того, как вы его вставили.

Помогла ли статья?