Как добавить бесплатный виджет чата WhatsApp на любой сайт за несколько минут: простой подход со ссылкой wa.me и генератор, который выдает готовый, кастомизируемый фрагмент кода без необходимости писать код вручную.
Есть два честных способа добавить виджет чата WhatsApp на сайт, не платя за него: вставить простую ссылку wa.me и оформить её самостоятельно, или использовать генератор, который выдаст вам готовый, настраиваемый фрагмент кода. Оба способа совершенно бесплатные и оба занимают несколько минут. Просто они отличаются тем, где вы окажетесь через полгода.
Мы рассмотрим оба варианта, начиная с простой ссылки, чтобы вы знали, на что именно идёте, когда решите её пропустить.
Абсолютный минимум это одна строка HTML:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question">Chat with us</a>Замените 15551234567 на ваш номер в полном международном формате, без плюса, без пробелов, без ведущего нуля. Параметр text это предзаполненное сообщение в формате URL-кодирования, поэтому %20 это пробел, а %2C это запятая. Нажмите на ссылку, и WhatsApp откроется с этим сообщением уже напечатанным в поле ввода, ожидая, пока посетитель нажмёт отправить.
wa.me это собственная короткая ссылка Meta для этого, поэтому поведение на другом конце согласовано: на телефоне откроется приложение WhatsApp напрямую, если оно установлено, или откроет магазин приложений, если нет. На настольном браузере без установленного приложения откроется web.whatsapp.com в новой вкладке вместо этого. Вам не нужно самостоятельно строить никакую логику определения устройства, это единственная часть подхода, которая действительно решена за вас.
Всё остальное нет. Одна простая ссылка это просто подчёркнутый синий текст, где бы вы его ни разместили. Чтобы превратить её в плавающую кнопку в нижнем углу, о которой люди говорят, когда имеют в виду “виджет чата WhatsApp”, вы должны написать CSS сами:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question"
target="_blank" rel="noopener"
style="position:fixed; bottom:20px; right:20px; z-index:5000;
width:56px; height:56px; border-radius:50%;
background:#25D366; display:flex; align-items:center;
justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25);">
<img src="/whatsapp-icon.svg" alt="Chat on WhatsApp" width="28" height="28">
</a>Это работает, но теперь вам также нужна иконка в виде отдельного файла, z-index достаточно высокий, чтобы оказаться над вашим баннером с куками и модальными окнами, но не над навигацией на мобильных устройствах, и план на случай, если кто-то захочет изменить текст сообщения в следующем месяце, что означает откроить этот же блок разметки снова, везде, где его вставили, на каждой странице или шаблоне, который его содержит.
Генератор виджета WhatsApp чата делает то же самое, что ссылка выше, плюс оформление, позиционирование и иконку, и выдаёт вам один тег скрипта вместо блока пользовательского CSS, за который вы несёте ответственность. Это бесплатно, не требует учётной записи и не использует WhatsApp Business API, поэтому нет этапа верификации перед началом использования.
Вот пошаговое руководство:
#25D366) установлен по умолчанию, но поле принимает любое значение в hex-формате, если вы хотите, чтобы он соответствовал цвету вашего сайта.text в простой ссылке, но редактируется из формы вместо URL-кодированной строки.По мере заполнения формы, живой предпросмотр кнопки отображается прямо на странице, а панель кода рядом с ним обновляется в реальном времени с готовым фрагментом:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#25D366"
data-position-vertical="bottom"
data-position-horizontal="right"
data-offset-vertical="20"
data-offset-horizontal="20"
data-z-index="5000"
data-greeting="Hi! How can we help?"
async
defer
></script>Нажмите Копировать, вставьте этот один тег перед закрывающим тегом </body> на вашем сайте, и виджет готов. Ничего больше загружать не нужно, никакого файла иконки, никакой отдельной таблицы стилей. Каждый параметр из формы (цвет, позиция, смещения, приветствие, всплывающее окно) кодируется как атрибут data- на том одном теге, поэтому всё передаётся как одна вставка.
На поверхности два варианта выглядят похоже, кнопка в углу, которая открывает WhatsApp, но они стареют по-разному.
С самодельной версией, каждый параметр это значение, спрятанное внутри встроенных стилей или отдельного файла CSS. Изменение приветствия означает поиск и редактирование параметра text в URL-кодированной строке. Перемещение кнопки, потому что новый баннер с куками теперь её перекрывает, означает перередактирование CSS на каждой странице или шаблоне, где вы её вставили, и если вы забыли одну, эта страница молча получит неправильно выглядящий виджет до тех пор, пока кто-то это не заметит. Ничто из этого не ломается громко, это просто постепенно рассинхронизируется страница за страницей.
Сгенерированный фрагмент хранит каждый из этих параметров как помеченный атрибут на одной строке, которую вы можете заново скопировать из формы за секунды, затем использовать поиск и замену по вашему сайту, если вы не используете общий включаемый заголовок или нижний колонтитул. И потому что реальная логика кнопки находится в размещённом файле скрипта, на который указывает тег, а не в коде, который вы вставили, исправления ошибок и улучшения поведения виджета развёртываются без вашего участия.
Механика одна и та же везде: добраться до фрагмента куда-то, что отображается на каждой странице, в идеале прямо перед </body>.
theme.liquid, прямо над закрывающим тегом </body>, через Online Store (Интернет-магазин) → Themes (Темы) → Edit Code (Редактировать код).Каждый из них имеет свои особенности, заслуживающие более внимательного изучения отдельно, мы подробнее рассмотрим WordPress отдельно, но сам процесс вставки идентичен везде: один тег скрипта, одно место, применённый ко всем страницам сразу.
Откройте сайт в режиме инкогнито, чтобы кэшированные стили не скрыли реальную проблему, и проверьте кнопку и на настольном компьютере, и на реальном телефоне, а не только на изменённом размером окне браузера. Нажмите на неё один раз с каждого устройства и убедитесь, что она открывает WhatsApp (приложение на мобильном, web.whatsapp.com на настольном) с вашим номером и сообщением приветствия уже заполненными. Затем прокрутите страницу с видимыми баннерами с куками или липкими элементами, самая частая проблема в этот момент это конфликт z-index, когда виджет отображается за другим элементом с fixed-позиционированием вместо того, чтобы быть на верху.
Это действительно бесплатно, или есть подвох? Сам генератор бесплатный и не требует учётной записи. Скрипт виджета, на который он указывает, размещается и обслуживается бесплатно. Если вы позже установите расширение Chrome The Chat Quotient для управления входящими разговорами через виджет, у него есть собственный бесплатный тариф, но это отдельный, опциональный шаг, а не требование для использования виджета.
Виджет WhatsApp это то же самое, что WhatsApp Web?
Нет, это частая путаница. WhatsApp Web (web.whatsapp.com) это интерфейс, который вы используете для чтения и отправления сообщений WhatsApp из браузера. Элемент виджета чата WhatsApp на веб-сайте это небольшая кнопка, которую вы добавляете на ваш сайт, и когда на неё нажимают, она открывает чат, либо в приложении WhatsApp на мобильном, либо в WhatsApp Web на настольном компьютере без установленного приложения. Виджет это то, что вы встраиваете, WhatsApp Web это место, где результирующий разговор откроется.
Работает ли виджет, если у посетителя не установлен WhatsApp? На мобильном устройстве нажатие без установленного приложения отправит посетителя в магазин приложений, чтобы установить WhatsApp сначала. Нет способа обойти этот шаг, потому что ссылка только знает, как передать в само приложение WhatsApp, а не заменить другой канал сообщений.
Могу ли я иметь несколько номеров WhatsApp, например продажи и поддержку, на одном виджете? Нет на одной кнопке. Виджет построен вокруг одного номера WhatsApp на экземпляр. Если вам нужны две точки входа, вы бы добавили два виджета с разными позициями и приветствиями, хотя в этот момент отдельная страница контактов с обоими номерами, перечисленными отдельно, обычно яснее для посетителей, чем две плавающие кнопки, расположенные в одном углу.
Нужно ли знать, как кодировать, чтобы использовать генератор? Нет. Каждый параметр это поле формы, и единственное, что вы вставляете, это один тег скрипта, который он производит, одна и та же операция копирования и вставки, независимо от того, на какой платформе работает ваш сайт.
Ссылка wa.me это действительно всё, что вам нужно, если вы комфортно себя чувствуете, написав и поддерживая свой собственный CSS и не против переходить в этот код каждый раз, когда что-то нужно изменить. Генератор виджета WhatsApp чата производит тот же результат, плавающую кнопку, которая открывает предзаполненный чат WhatsApp, без CSS, без файла иконки и без обслуживания, которое приходит с самодельным решением, и это всё ещё бесплатно.
Установите расширение Chrome и измените подход к управлению WhatsApp-разговорами для вашего бизнеса.