Free Tool

Build a WhatsApp chat widget for your website

Configure it below and try it out right on this page. The bubble in the corner is the real widget, live.

Configure your widget

Changes update the live preview and the snippet instantly.

Pick your country so the code is right (WhatsApp can't find the chat without it), then enter the rest of the number, digits only.

Raise this if the widget ends up hidden behind another element on your site, like a cookie banner or a different chat tool.

Your embed snippet

Paste this before the closing </body> tag on your website.

Live preview

Look at the bottom corner of this page. That's your widget, rendered from the settings above using the real embed script.

Manage your leads on WhatsApp Web

Download the free Chat Quotient Chrome extension to see and manage every conversation directly inside WhatsApp Web, a full WhatsApp CRM experience.

Add to Chrome, It's Free

Что такое виджет чата WhatsApp?

Виджет чата WhatsApp это небольшая кнопка, сидящая в углу веб-сайта и при нажатии открывает разговор WhatsApp с компанией, либо прямо на номер WhatsApp компании, либо через короткую форму сначала. Он заменяет статическую ссылку "Свяжитесь с нами" или форму электронной почты каналом, который у большинства посетителей уже открыт на телефоне.

Он отличается от простой ссылки "нажать для чата" (просто текст или значок, который открывает wa.me) тем, что виджет настраивается: положение, цвет и предварительно заполненное приветствие.

Как добавить виджет чата WhatsApp на ваш веб-сайт

  1. 1

    Настройте ваш виджет

    Введите номер WhatsApp, затем выберите цвет и угол для виджета.

  2. 2

    Скопировать фрагмент

    Используйте кнопку "Скопировать фрагмент" выше. Это один тег <script>, без других файлов или зависимостей.

  3. 3

    Вставьте его на свой сайт

    Добавьте его прямо перед закрывающимся тегом </body> HTML вашего сайта.

  4. 4

    Опубликуйте

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

Где вставлять, по платформе

WordPress
Используйте плагин типа "Insert Headers and Footers" или "WPCode", или вставьте его прямо в footer.php вашей темы перед </body> через Appearance → Theme File Editor.
Shopify
Online Store → Themes → Edit code → theme.liquid, и вставьте фрагмент прямо над </body>.
Wix
Settings → Custom Code → Add Code, установите его загружаться на всех страницах в разделе "Body - end".
Webflow
Project Settings → Custom Code → Footer Code, затем опубликуйте ваш сайт.
Любой другой сайт
Если вы можете редактировать HTML вашего сайта, вставьте его перед </body>. Это работает одинаково везде.

Почему добавить кнопку WhatsApp на ваш сайт

Без формы, без электронной почты, без перезагрузки страницы

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

Это встречает посетителей там, где они уже находятся

WhatsApp это приложение для обмена сообщениями по умолчанию для миллиардов людей во всем мире. Для большинства посетителей нет ничего нового для загрузки или регистрации.

Каждый чат начинается с контекстом

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

Вы точно контролируете, где он находится

Установите цвет, угол и смещение так, чтобы виджет соответствовал вашему сайту вместо универсального пузырька по умолчанию.

Бесплатно, без процесса утверждения

Без заявления на API Business WhatsApp, без отдельного номера, без кода кроме одного тега скрипта.

Кнопка чата против виджета чата. В чем разница?

Кнопка чата

Статическая ссылка или значок, открывающий чат WhatsApp при нажатии. Никаких настроек сверх номера назначения.

Виджет чата

  • Настраиваемые цвет, положение и предварительно заполненное приветствие
  • Работает везде: WordPress, Shopify, Wix, Webflow или простой HTML без зависимостей
  • Это ровно то, что вы строите выше

Часто задаваемые вопросы

Этот генератор виджета чата WhatsApp бесплатный? +

Да. Виджет перенаправления, который вы создаете выше (с вашим номером, цветом, положением и приветствием), бесплатный, с небольшим знаком "Powered by Chat Quotient". На будущее планируется версия Pro с питанием от AI-агента.

Мне нужна WhatsApp Business API для его использования? +

Нет. Виджет открывает обычный чат WhatsApp, используя ваш существующий номер WhatsApp. Никаких утверждений Business API или отдельного номера не требуется.

Будет ли это работать на WordPress, Shopify, Wix или любом другом веб-сайте? +

Да. Это один тег <script> без зависимостей, поэтому он работает везде, где вы можете вставить HTML: WordPress, Shopify, Wix, Webflow, Squarespace или самодельный сайт.

Виджет замедляет мой сайт? +

Это не должно быть заметно. Скрипт небольшой, загружается с async и defer, поэтому никогда не блокирует вашу страницу и отрисовывается внутри изолированного Shadow DOM, поэтому не конфликтует со стилями вашего сайта.

Я могу получить имя посетителя до того, как он перейдет на WhatsApp? +

Не пока. Захват потенциального клиента перед передачей WhatsApp находится в дорожной карте, и мы повторно включим переключатель здесь, когда он будет готов.

Где хранится моя конфигурация? +

Нигде на наших серверах. Ваши настройки живут полностью внутри тега скрипта, который вы вставляете на сайт. Чтобы позже что-то изменить, вернитесь на эту страницу, переконфигурируйте и скопируйте новый фрагмент (сохраните копию текущего, так как мы не сохраняем его для вас).

В чем разница между кнопкой чата и виджетом чата? +

"Кнопка чата" обычно это просто статическая ссылка, открывающая WhatsApp. "Виджет чата" (то, что строит этот инструмент) это плавающий лаунчер с настраиваемым приветствием, положением и цветом.

Могу ли я использовать свой личный номер WhatsApp или мне нужен деловой номер? +

Любой номер WhatsApp работает, личный или деловой. Просто введите с кодом страны и без пробелов или плюса.