Перейти к содержимому
OmniChannels.ai
Меню

Бесплатный инструмент

Кнопка чата WhatsApp для вашего сайта

Добавьте плавающую кнопку WhatsApp на любой сайт за несколько минут. Укажите номер, готовое сообщение, цвет, положение, приветствие и задержку, посмотрите результат в предпросмотре для компьютера или телефона и скопируйте небольшой автономный код. К нему прилагаются инструкции по установке для WordPress, Shopify, Wix и обычного HTML.

Бесплатно · без регистрации · работает в вашем браузере

Номер и сообщение

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

Появится в поле ввода клиента; он сможет изменить текст перед отправкой. Арабский текст, эмодзи и переносы строк кодируются автоматически.

Настройки кнопки

Расположение

Белая иконка на этом цвете имеет контрастность 2.0:1, что ниже рекомендуемых 3:1 для иконок. У кнопки по-прежнему есть доступное название, но более тёмный зелёный читается лучше.

Отображается рядом с кнопкой; посетитель может закрыть его до конца визита. Оставьте поле пустым, если приветствие не нужно.

Её озвучивают программы чтения с экрана, а при наведении курсора она показывается как подсказка.

Показывать на

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

Предпросмотр в реальном времени

Ваш код для вставки

Введите корректный номер WhatsApp, чтобы завершить формирование кода.

<!-- WhatsApp chat button (generated with omnichannels.ai/tools/whatsapp-chat-button/) -->
<div id="ocwa" class="ocwa ocwa-r" hidden>
  <div id="ocwa-tip" class="ocwa-tip" dir="auto"><span>Здравствуйте 👋 Чем можем помочь?</span><button type="button" class="ocwa-x" aria-label="Закрыть">&times;</button></div>
  <a class="ocwa-btn" href="https://wa.me/?text=%D0%97%D0%B4%D1%80%D0%B0%D0%B2%D1%81%D1%82%D0%B2%D1%83%D0%B9%D1%82%D0%B5%21%20%D0%A3%20%D0%BC%D0%B5%D0%BD%D1%8F%20%D0%B2%D0%BE%D0%BF%D1%80%D0%BE%D1%81%20%D0%BF%D0%BE%20%D0%B2%D0%B0%D1%88%D0%B5%D0%BC%D1%83%20%D1%81%D0%B0%D0%B9%D1%82%D1%83." target="_blank" rel="noopener" aria-label="Напишите нам в WhatsApp" title="Напишите нам в WhatsApp"><svg viewBox="0 0 24 24" width="30" height="30" aria-hidden="true" focusable="false"><path fill="#ffffff" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg></a>
</div>
<style>
.ocwa{position:fixed;bottom:20px;z-index:2147483000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Tahoma,Arial,sans-serif}
.ocwa[hidden]{display:none}
.ocwa-r{right:20px}.ocwa-l{left:20px;align-items:flex-start}
.ocwa-btn{width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.24);transition:transform .2s ease}
.ocwa-btn:hover{transform:scale(1.07)}
.ocwa-btn:focus-visible{outline:3px solid #1a73e8;outline-offset:3px}
.ocwa-tip{position:relative;box-sizing:border-box;max-width:min(260px,calc(100vw - 40px));margin:0;padding-block:10px;padding-inline:14px 36px;background:#fff;color:#111b21;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.18);text-align:start;overflow-wrap:anywhere}
.ocwa-x{position:absolute;top:5px;inset-inline-end:5px;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:transparent;color:#54656f;font-size:20px;line-height:26px;cursor:pointer}
.ocwa-x:hover{background:#f0f2f5}.ocwa-x:focus-visible{outline:2px solid #1a73e8}
.ocwa-in{animation:ocwa-in .35s ease-out both}
@keyframes ocwa-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ocwa-in{animation:none}.ocwa-btn{transition:none}.ocwa-btn:hover{transform:none}}
@media (max-width:767px){.ocwa{bottom:16px}.ocwa-r{right:16px}.ocwa-l{left:16px}.ocwa-nomob{display:none!important}}
@media (min-width:768px){.ocwa-nodesk{display:none!important}}
@media print{.ocwa{display:none!important}}
</style>
<script>
(function(){var w=document.getElementById("ocwa");if(!w)return;var t=document.getElementById("ocwa-tip"),k="ocwa-tip-closed";if(t){var c=false;try{c=sessionStorage.getItem(k)==="1"}catch(e){}if(c){t.parentNode.removeChild(t)}else{t.querySelector("button").addEventListener("click",function(){t.parentNode.removeChild(t);try{sessionStorage.setItem(k,"1")}catch(e){}})}}setTimeout(function(){w.hidden=false;w.className+=" ocwa-in"},3000);})();
</script>

Автономный код: около 4 КБ, без внешних скриптов, шрифтов и изображений, без cookie.

Как установить

  1. 1Скопируйте код выше.
  2. 2Установите плагин для вставки кода в шапку и подвал, например WPCode, или откройте Appearance → Editor, если используете блочную тему.
  3. 3Вставьте код в раздел подвала (конец body) или в блок Custom HTML в части шаблона с подвалом.
  4. 4Сохраните изменения, очистите кеш в плагине кеширования и проверьте работу на телефоне.

Чаты копятся на одном телефоне? Отвечайте на эти чаты из общего инбокса команды

Всё, что вы вводите здесь, не отправляется на наши серверы.

Краткий ответ

Кнопка чата WhatsApp — это небольшая плавающая кнопка на сайте, которая по клику открывает чат с компанией в WhatsApp. Это ссылка вида https://wa.me/ с номером компании и необязательным готовым сообщением, оформленная как значок в углу страницы. Посетитель начинает диалог со своего телефона или в WhatsApp Web, без форм и без сохранения номера.

Надёжная инфраструктураОфициальный Meta Business Solution ProviderПартнёр Google RBMЧлен GSMAISO/IEC 27001:2022ISO/IEC 27018ISO 9001:2015ISO 22301SOC 2 Type IIСоответствие GDPR

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

  1. 1

    Введите номер и сообщение

    Выберите страну, введите номер WhatsApp и напишите сообщение, которое отправит посетитель, например вопрос о заказе.

  2. 2

    Настройте внешний вид кнопки

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

  3. 3

    Скопируйте код

    Скопируйте сниппет. Это несколько килобайт HTML, CSS и JavaScript без внешних запросов, cookies и трекинга.

  4. 4

    Вставьте код перед </body>

    Следуйте инструкции для WordPress, Shopify, Wix или обычного HTML, опубликуйте страницу и проверьте кнопку на телефоне и компьютере.

Что делает сгенерированный код

Сниппет добавляет на страницы одну ссылку с фиксированным положением в нижнем углу. Это стандартная ссылка click-to-chat в формате, описанном на справочной странице WhatsApp (faq.whatsapp.com/5913398998672934): https://wa.me/, ваш полный номер в международном формате и, при желании, параметр ?text= с сообщением в URL-кодировке. На телефонах ссылка открывает приложение WhatsApp, на компьютерах — WhatsApp Web или десктопное приложение.

Всё встроено в код: значок WhatsApp — это SVG-путь, стили ограничены одним префиксом класса, а скрипт — несколько строк, которые отвечают за задержку и закрываемое приветствие. Внешних скриптов, шрифтов, изображений и cookies нет, поэтому кнопка не замедляет страницу и не добавляет сторонний трекер.

Доступность и поддержка RTL по умолчанию

Плавающие кнопки часто состоят только из значка, и пользователям программ экранного доступа приходится гадать, что это. У сгенерированной ссылки есть aria-label, который вы задаёте сами (по умолчанию «Напишите нам в WhatsApp»), заметная рамка фокуса для пользователей клавиатуры и декоративный значок, скрытый от вспомогательных технологий. У приветствия есть полноценная кнопка закрытия со своей подписью.

Посетители, у которых в системе включено уменьшение анимации, видят кнопку без анимации появления и увеличения при наведении. В приветствии используется автоматическое направление текста и логические свойства CSS, поэтому арабский и другие языки с письмом справа налево отображаются корректно. Для RTL-сайтов кнопку можно разместить внизу слева.

  • Ссылка доступна с клавиатуры и имеет понятное доступное имя.
  • Учитывается prefers-reduced-motion.
  • Скрывается при печати; показ можно включать по типу устройства.
  • Закрытие приветствия запоминается на время визита, без cookies.

Как выбрать цвет, положение и время показа

На сайтах с письмом слева направо принято размещать кнопку внизу справа, а на арабских сайтах часто подходит положение внизу слева. Проверьте, что кнопка не закрывает баннер cookies, кнопку чат-бота или мобильную панель оформления заказа. Зелёный цвет WhatsApp (#25D366) мгновенно узнаётся; с белым значком его контрастность составляет около 2:1, поэтому, если важнее всего доступность, более тёмный зелёный, например #128C7E, даёт около 4:1.

Задержка в несколько секунд позволяет посетителям прочитать страницу до появления кнопки, а показ только на мобильных устройствах разумен, если ваша команда отвечает с телефонов. Делайте приветствие одной короткой конкретной строкой, например: «Вопросы о доставке? Напишите нам».

Официальная кнопка Chat on WhatsApp и правила бренда

WhatsApp также публикует фирменную кнопку «Chat on WhatsApp» в зелёно-белом цвете и трёх размерах и просит компании использовать её без изменений. Согласно справочному центру WhatsApp, сейчас она доступна только на английском языке. Плавающая кнопка-значок из этого инструмента — другой, компактный формат. Какой бы вариант вы ни выбрали, не изменяйте сам логотип WhatsApp и не создавайте впечатления, что WhatsApp одобряет ваш бизнес.

Когда одного телефона уже недостаточно

Кнопка на сайте может быстро увеличить число входящих чатов. В приложении WhatsApp Business диалоги хранятся на ограниченном числе подключённых устройств. На платформе WhatsApp Business Platform (API) та же ссылка wa.me может вести в общий командный инбокс: там чаты распределяются между операторами, сначала на них отвечают чат-боты или ИИ-агенты, а после закрытия 24-часового окна обслуживания клиента диалог продолжается одобренными шаблонами.

Заранее решите, кто отвечает, в какие часы и как быстро. Если вы не обрабатываете чаты круглосуточно, укажите часы ответа в приветствии.

Вопросы о кнопке WhatsApp для сайта

Как добавить кнопку WhatsApp на сайт?

Сгенерируйте код выше со своим номером и сообщением, скопируйте его и вставьте непосредственно перед закрывающим тегом </body> на сайте или в область кода футера вашего конструктора сайтов. После этого кнопка появится на всех страницах.

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

Да. Генератор и код бесплатны, не требуют аккаунта и не имеют ограничений по использованию. Кнопка ведёт прямо в WhatsApp, поэтому за ней нет ни подписки, ни размещённого на стороне сервиса скрипта.

Замедлит ли кнопка WhatsApp мой сайт?

Нет. Сниппет — это несколько килобайт встроенного HTML, CSS и JavaScript, который не делает сетевых запросов, пока посетитель не нажмёт на кнопку. В отличие от виджетов, подгружающих внешние скрипты, шрифты и трекеры.

Как добавить кнопку WhatsApp в WordPress?

Используйте плагин для вставки кода в header и footer, например WPCode, и вставьте сниппет в раздел футера. Если у вас блочная тема, добавьте его в блок Custom HTML в шаблоне футера. Очистите кэш и проверьте работу кнопки.

Как добавить кнопку WhatsApp в Shopify?

В админ-панели Shopify откройте Online Store, Themes, затем Edit code для активной темы. Откройте layout/theme.liquid и вставьте сниппет непосредственно перед </body>, затем сохраните и проверьте магазин на телефоне.

Можно ли показывать кнопку WhatsApp только на мобильных устройствах?

Да. Снимите отметку Desktop в генераторе, и кнопка будет скрыта на экранах шириной от 768 пикселей. Можно также снять отметку Mobile, чтобы показывать кнопку только на компьютерах.

Могут ли несколько операторов отвечать на чаты с кнопки на сайте?

С одного телефона это неудобно. Подключите номер к WhatsApp Business API и направляйте чаты в общий командный инбокс, где на один номер могут отвечать несколько операторов и чат-ботов.

Другие бесплатные инструменты