HTML-код виджета WhatsApp для копирования и вставки: от голой ссылки wa.me до полноценной плавающей кнопки, а также то, что необработанный код оставляет достраивать вам самим.
Если вы искали именно HTML-код, вот он, без необходимости регистрации:
<a href="https://wa.me/15551234567">Chat with us on WhatsApp</a>Замените 15551234567 на ваш номер в полном международном формате: сначала код страны, без знака плюс, без пробелов, без ведущего нуля. Одной этой ссылки достаточно, чтобы открыть чат WhatsApp с вашим бизнесом. Это же и есть весь честный ответ на запрос “дайте мне HTML-код виджета”, потому что всё, что идёт дальше, это уже вы (или генератор) достраиваете то, что эта одна строка не охватывает.
Посетитель попадает по ссылке с пустым полем ввода. Добавьте параметр text, чтобы сообщение уже ждало в поле, когда откроется чат:
<a href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing">
Chat with us on WhatsApp
</a>Сообщение должно быть закодировано в URL-формате: %20 это пробел, %2C это запятая, %27 это апостроф. Сначала напишите нужное предложение, затем пропустите его через любой URL-кодировщик, прежде чем вставить в значение text, поскольку необработанный пробел или знак препинания посреди строки запроса сломает ссылку в некоторых браузерах.
Текстовая ссылка это не то, что большинство людей имеют в виду под “виджетом WhatsApp”. Кнопка в углу это CSS поверх той же самой ссылки:
<a
href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing"
target="_blank"
rel="noopener"
aria-label="Chat on WhatsApp"
style="
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999;
width: 60px;
height: 60px;
border-radius: 50%;
background: #25D366;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,.2);
"
>
<svg width="30" height="30" viewBox="0 0 24 24" fill="white" aria-hidden="true">
<path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.87 9.87 0 0 0 4.74 1.21h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Z"/>
</svg>
</a>Эта версия обходится без отдельного файла иконки, встраивая значок телефона/чата прямо как SVG, поэтому это действительно один самодостаточный блок: вставьте его перед </body>, и больше ничего загружать не нужно. Но она всё равно оставляет четыре вещи, которые вам нужно доделать вручную, и именно здесь по-настоящему проявляется польза генератора.
Мобильные и настольные устройства ведут себя по-разному, и ничто в этом фрагменте кода это не контролирует. Нажмите на ссылку wa.me на телефоне с установленным WhatsApp, и приложение откроется напрямую. Если приложение не установлено, посетителя отправит в магазин приложений вместо этого, и нет никакого запасного сообщения или альтернативного способа связи, который можно было бы настроить прямо в ссылке. В настольном браузере она открывает web.whatsapp.com в новой вкладке, что работает только в том случае, если посетитель уже авторизован в WhatsApp Web в этом браузере, иначе он просто увидит QR-код без объяснения, зачем он нужен. Все три исхода исходят из одного и того же href. Вы не можете определить, какой из них вот-вот произойдёт, или перехватить это обычным HTML.
Предзаполненное сообщение живёт в URL, а не в поле формы. Измените его, и вам снова придётся вручную кодировать новую строку, находить каждую страницу, куда вставлена ссылка, и заменять её там тоже, если у вас нет общего шаблона.
Нет файла иконки, который можно было бы просто заменить, не редактируя путь SVG вручную, и нет способа изменить положение, размер или цвет кнопки, не трогая напрямую блок встроенных стилей, строку за строкой.
Ничто здесь не собирает данные о лиде до открытия чата. Ссылка (или кнопка) ведёт прямо в WhatsApp в момент клика. Если вам нужны имя и причина обращения до начала разговора, это отдельная форма, которую придётся создавать, подключать и как-то самостоятельно передавать в параметр text.
Генератор виджета чата WhatsApp это бесплатный инструмент, который превращает те же самые несколько настроек в один тег скрипта вместо блока CSS, который вам приходится поддерживать самостоятельно. Укажите свой номер, выберите цвет, задайте позицию и отступы, напишите приветствие и, по желанию, включите форму перед чатом (короткий вопрос, с email или телефоном, помеченными как обязательные или нет), которая собирает контекст ещё до того, как откроется окно WhatsApp. Инструмент выдаёт вот это:
<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
data-widget-id="wgt_xxxxxxxx"
data-whatsapp-number="15551234567"
data-color="#128C7E"
data-position-vertical="bottom"
data-position-horizontal="left"
data-offset-vertical="24"
data-offset-horizontal="24"
data-z-index="999"
data-greeting="Hi! Ask us anything."
data-prechat="true"
data-prechat-title="Before we chat"
data-prechat-description="Tell us what you need help with."
async
defer
></script>Каждая настройка это подписанный атрибут data- на одной строке, поэтому изменение приветствия или перемещение кнопки в другой угол означает просто заново скопировать тег из формы, а не рыться в файле CSS. Иконка, логика позиционирования, обработка deep-link для мобильных и настольных устройств, а также форма перед чатом, всё это находится в размещённом файле скрипта, на который указывает тег, а именно то, что необработанный HTML выше не может сделать сам по себе без того, чтобы вы это написали.
Если вы вставляете сгенерированный фрагмент и хотите знать, что контролирует каждая строка, прежде чем менять её вручную, вот что принимает этот тег:
| Атрибут | Что контролирует |
|---|---|
data-widget-id | Уникальный ID, выданный генератором, не редактируйте его |
data-whatsapp-number | Номер назначения, международный формат, без + |
data-color | Фон кнопки, любое hex-значение |
data-position-vertical | top или bottom |
data-position-horizontal | left или right |
data-offset-vertical / data-offset-horizontal | Расстояние в пикселях от этого края |
data-z-index | Порядок наложения, увеличьте, если кнопку перекрывает другой элемент с fixed-позиционированием |
data-greeting | Текст предзаполненного сообщения, ручное URL-кодирование не нужно |
data-prechat | true, чтобы показать короткую форму перед открытием чата |
data-prechat-title / data-prechat-description / data-prechat-question | Текст, отображаемый в форме перед чатом |
И обычный HTML, и сгенерированный тег скрипта вставляются в одно и то же место: туда, что отображается на каждой странице, в идеале прямо перед </body>.
theme.liquid, прямо над </body>, через Online Store (Интернет-магазин) → Themes (Темы) → Edit Code (Редактировать код).Требует ли обычная HTML-ссылка аккаунт WhatsApp Business?
Нет. Личный номер WhatsApp работает со ссылкой wa.me точно так же, как и номер Business. Функции, специфичные для Business, например каталог или автоматические ответы, не являются частью самой ссылки.
Почему моя кнопка показывает битое изображение вместо иконки?
Это происходит, когда HTML ссылается на внешний файл иконки (<img src="/whatsapp-icon.svg">), который не был загружен по этому пути. Версия со встроенным SVG выше полностью избегает этой проблемы, поскольку иконка записана прямо внутрь HTML.
Можно ли вставить HTML виджета внутрь тега <head> вместо этого?
Технически сам тег ссылки должен отображаться в <body>, поскольку содержимое <head> не отображается. Скрипты могут загружаться из <head>, но размещение фрагмента прямо перед </body> избегает блокировки рендеринга и является шаблоном, которого ожидает большинство конструкторов сайтов.
Есть ли ограничение на количество виджетов WhatsApp, которые можно добавить на одну страницу? Ничто не мешает вставить два, но две плавающие кнопки, наложенные друг на друга в одном углу, обычно выглядят как баг, а не как функция. Если вам нужны два номера (например, продажи и поддержка), дайте каждому свою отдельную позицию вместо того, чтобы накладывать их друг на друга.
Работает ли это так же на Squarespace? Панель Code Injection (Внедрение кода) в Squarespace (под Settings (Параметры) → Advanced (Дополнительно)) принимает любую из версий точно так же, как блок Custom HTML в WordPress, внедрение в нижний колонтитул применяет её ко всему сайту в одном месте.
Буквальный HTML для виджета WhatsApp это один тег <a href="https://wa.me/...">, и теперь он у вас есть. Превратить его в ту самую плавающую, брендированную кнопку, собирающую лиды, которую обычно представляют люди, означает либо самостоятельно писать и поддерживать CSS и все крайние случаи с deep-link, либо позволить Генератору виджета чата WhatsApp выдать готовый тег скрипта одной вставкой, бесплатно, без необходимости регистрации.
Установите расширение Chrome и измените подход к управлению WhatsApp-разговорами для вашего бизнеса.