Зачем это нужно

Мессенджер снижает порог обращения: человеку проще написать, чем звонить. Кнопка в углу экрана работает на всех страницах и не мешает читать, если её правильно расположить.

HTML-код кнопки

Вставьте ссылку перед закрывающим тегом body — в самый конец документа, после футера:

<a href="https://api.whatsapp.com/send?phone=79261118658" class="whatsapp" target="_blank" rel="noopener">
  <i class="fa fa-whatsapp whatsapp-icon"></i>
</a>

Номер указывается в международном формате, без плюса и скобок. Иконка берётся из Font Awesome — если он у вас не подключён, замените её на SVG.

CSS-код

.whatsapp {
  position: fixed;
  width: 44px;
  height: 44px;
  right: 14px;
  bottom: 63px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  font-size: 18px;
  z-index: 100;
}

.whatsapp-icon {
  margin-top: 13px;
  color: #fff;
}

Отступ снизу в 63 пикселя нужен, чтобы кнопка не перекрывала стрелку «наверх». Если стрелки нет — достаточно 14 пикселей.

Что учесть

• rel="noopener" обязателен: без него открытая вкладка получает доступ к вашему окну.
• На мобильных кнопка не должна закрывать форму — проверьте на 360 пикселях.
• Добавьте aria-label="Написать в WhatsApp": без подписи ссылка бесполезна для скринридера.
• Не дублируйте кнопку: одна на страницу, иначе посетитель путается.

Нужен сайт, а не только статья?

Сделаю сайт под ключ: подключу мессенджеры, формы заявок и аналитику так, чтобы всё работало на мобильных и не замедляло загрузку. С 2009 года, по договору.

ОБСУДИТЬ ПРОЕКТ

Полезно по теме: примеры разметки HTML, кнопка на CSS, про Django.