--- title: "Кнопка чата WhatsApp для вашего сайта" description: "Создайте плавающую кнопку WhatsApp для сайта: выберите цвет, положение, приветствие и задержку, посмотрите превью онлайн и скопируйте лёгкий код. Бесплатно." canonical: "https://omnichannels.ai/ru/tools/whatsapp-chat-button/" language: "ru" updated: "2026-10-10" publisher: "BroadNet Technologies" brand: "OmniChannels.ai" --- # Кнопка чата WhatsApp для вашего сайта Canonical: https://omnichannels.ai/ru/tools/whatsapp-chat-button/ Language: ru Publisher: OmniChannels.ai by BroadNet Technologies Кнопка чата WhatsApp — это небольшая плавающая кнопка на сайте, которая по клику открывает чат с компанией в WhatsApp. Это ссылка вида https://wa.me/ с номером компании и необязательным готовым сообщением, оформленная как значок в углу страницы. Посетитель начинает диалог со своего телефона или в WhatsApp Web, без форм и без сохранения номера. ## Как добавить кнопку WhatsApp на сайт 1. **Введите номер и сообщение:** Выберите страну, введите номер WhatsApp и напишите сообщение, которое отправит посетитель, например вопрос о заказе. 2. **Настройте внешний вид кнопки:** Выберите угол экрана, цвет, приветственное облачко, типы устройств и задержку. Предпросмотр показывает кнопку на тестовой странице для компьютера и телефона. 3. **Скопируйте код:** Скопируйте сниппет. Это несколько килобайт HTML, CSS и JavaScript без внешних запросов, cookies и трекинга. 4. **Вставьте код перед :** Следуйте инструкции для 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 на сайт? Сгенерируйте код выше со своим номером и сообщением, скопируйте его и вставьте непосредственно перед закрывающим тегом на сайте или в область кода футера вашего конструктора сайтов. После этого кнопка появится на всех страницах. ### Этот виджет чата WhatsApp бесплатный? Да. Генератор и код бесплатны, не требуют аккаунта и не имеют ограничений по использованию. Кнопка ведёт прямо в WhatsApp, поэтому за ней нет ни подписки, ни размещённого на стороне сервиса скрипта. ### Замедлит ли кнопка WhatsApp мой сайт? Нет. Сниппет — это несколько килобайт встроенного HTML, CSS и JavaScript, который не делает сетевых запросов, пока посетитель не нажмёт на кнопку. В отличие от виджетов, подгружающих внешние скрипты, шрифты и трекеры. ### Как добавить кнопку WhatsApp в WordPress? Используйте плагин для вставки кода в header и footer, например WPCode, и вставьте сниппет в раздел футера. Если у вас блочная тема, добавьте его в блок Custom HTML в шаблоне футера. Очистите кэш и проверьте работу кнопки. ### Как добавить кнопку WhatsApp в Shopify? В админ-панели Shopify откройте Online Store, Themes, затем Edit code для активной темы. Откройте layout/theme.liquid и вставьте сниппет непосредственно перед , затем сохраните и проверьте магазин на телефоне. ### Можно ли показывать кнопку WhatsApp только на мобильных устройствах? Да. Снимите отметку Desktop в генераторе, и кнопка будет скрыта на экранах шириной от 768 пикселей. Можно также снять отметку Mobile, чтобы показывать кнопку только на компьютерах. ### Могут ли несколько операторов отвечать на чаты с кнопки на сайте? С одного телефона это неудобно. Подключите номер к WhatsApp Business API и направляйте чаты в общий командный инбокс, где на один номер могут отвечать несколько операторов и чат-ботов.