Сегодня разберем, как сделать красивую анимированную кнопку для связи по WhatsApp прямо с сайта. Делать мы это будем без плагинов, только при помощи CSS. Поэтому данный способ подойдёт для любого сайта. Ну а разбирать мы всё это будем, конечно же, на примере самой популярной CMS WordPress.
Ссылка для перехода в Whatsapp
Для начала рассмотрим, как выглядит ссылка на чат в Whatsapp для сайта.
https://api.whatsapp.com/send?phone=79000000000
А вот она в виде HTML кода:
<a href="https://api.whatsapp.com/send?phone=79000000000" target="_blank" title="Написать в Whatsapp" rel="noopener noreferrer"></a>
Вместо phone=79260000000 вставляем нужный номер
Этот код можно вставить в любом месте, как простую ссылку. Добавив к нему соответствующие стили, можно сделать с помощью этого кода обычную или фиксированную кнопку. Чем мы сейчас и займёмся.
Кнопка Whatsapp в углу экрана с анимацией
Первый вариант кнопки whatsapp для сайта делается довольно просто и её легко отредактировать, если вам понадобится поменять цвет или размеры.
Для создания нашей кнопки, мы будем использовать иконку Font Awesome. Для этого ваш шаблон должен поддерживать данный шрифт. Если нет, то необходимо его подключить. Если вы не знаете, как это сделать, то можно воспользоваться плагином Font Awesome - он автоматически подключит библиотеку иконок.
HTML код:
<a href="https://api.whatsapp.com/send?phone=79000000000" target="_blank" title="Написать в Whatsapp" rel="noopener noreferrer"><div class="whatsapp-button"><i class="fa fa-whatsapp"></i></div></a>
CSS код:
.whatsapp-button { position: fixed; right: 13px; bottom: 90px; transform: translate(-50%, -50%); background: #25D366; /*цвет кнопки*/ border-radius: 50%; width: 55px; /*ширина кнопки*/ height: 55px; /*высота кнопки*/ color: #fff; text-align: center; line-height: 53px; /*центровка иконки в кнопке*/ font-size: 35px; /*размер иконки*/ z-index: 9999; } .whatsapp-button a { color: #fff; } .whatsapp-button:before, .whatsapp-button:after { content: " "; display: block; position: absolute; border: 50%; border: 1px solid #25D366; /*цвет анимированных волн от кнопки*/ left: -20px; right: -20px; top: -20px; bottom: -20px; border-radius: 50%; animation: animate 1.5s linear infinite; opacity: 0; backface-visibility: hidden; } .whatsapp-button:after{ animation-delay: .5s; } @keyframes animate { 0% { transform: scale(0.5); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }
CSS для мобильной версии сайта:
Если вам необходимо поменять местоположение кнопки на мобильных устройствах, то добавьте к стилям CSS следующий код.
@media (max-width : 800px) { .whatsapp-button { bottom: 5px; /*отступ кнопки снизу от экрана*/ left: 70px; /*отступ кнопки слева от экрана(right - справа)*/ } }
Кнопка Whatsapp - вариант 2
Данная кнопка имеет более сложную анимацию и эффект появления надписи при наведении.
HTML код:
<a href="https://api.whatsapp.com/send?phone=79260000000" target="_blank" rel="noopener noreferrer"><div type="button" class="whatsapp-button"><div class="text-button"><i class="fa fa-whatsapp"></i><span>WhatsApp</span></div></div></a>
CSS код:
.whatsapp-button { background: #25D366; border: 3px solid #1cc15a; border-radius: 50%; box-shadow: 0 8px 10px rgba(7, 206, 112, 0.6); cursor: pointer; height: 68px; text-align: center; width: 68px; position: fixed; right: 5%; bottom: 8%; padding: 0px !important; z-index: 9999; transition: .3s; -webkit-animation: hoverWave linear 1s infinite; animation: hoverWave linear 1s infinite; } .whatsapp-button .text-button { height:68px; width:68px; border-radius:50%; position:relative; overflow:hidden; } .whatsapp-button .text-button span { text-align: center; color:#23a455; opacity: 0; font-size: 0; position:absolute; right: 8px; top: 27px; line-height: 14px; font-weight: 600; transition: opacity .3s linear; font-family: 'montserrat', Arial, Helvetica, sans-serif; } .whatsapp-button .text-button:hover span { opacity: 1; font-size: 11px; } .whatsapp-button:hover i { display:none; color:#25D366; font-size:44px; transition:.3s; } .whatsapp-button:hover { z-index:1; background:#fff; color:transparent; transition:.3s; } } .whatsapp-button i { color:#fff; font-size:44px; transition:.3s; line-height: 66px;transition: .5s ease-in-out; animation: 1200ms ease 0s normal none 1 running shake; animation-iteration-count: infinite; -webkit-animation: 1200ms ease 0s normal none 1 running shake; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes hoverWave { 0% { box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 0 rgba(7,206,112,0.2),0 0 0 0 rgba(7,206,112,0.2) } 40% { box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 15px rgba(7,206,112,0.2),0 0 0 0 rgba(7,206,112,0.2) } 80% { box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 30px rgba(7,206,112,0),0 0 0 26.7px rgba(7,206,112,0.067) } 100% { box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 30px rgba(7,206,112,0),0 0 0 40px rgba(7,206,112,0.0) } }@keyframes hoverWave { 0% { box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 0 rgba(7,206,112,0.2),0 0 0 0 rgba(7,206,112,0.2) } 40% { box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 15px rgba(7,206,112,0.2),0 0 0 0 rgba(7,206,112,0.2) } 80% { box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 30px rgba(7,206,112,0),0 0 0 26.7px rgba(7,206,112,0.067) } 100% { box-shadow:0 8px 10px rgba(7,206,112,0.3),0 0 0 30px rgba(7,206,112,0),0 0 0 40px rgba(7,206,112,0.0) } } @keyframes shake { 0% { transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); } 10% { transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); -webkit-transform: rotateZ(-30deg); } 20% { transform: rotateZ(15deg); -ms-transform: rotateZ(15deg); -webkit-transform: rotateZ(15deg); } 30% { transform: rotateZ(-10deg); -ms-transform: rotateZ(-10deg); -webkit-transform: rotateZ(-10deg); } 40% { transform: rotateZ(7.5deg); -ms-transform: rotateZ(7.5deg); -webkit-transform: rotateZ(7.5deg); } 50% { transform: rotateZ(-6deg); -ms-transform: rotateZ(-6deg); -webkit-transform: rotateZ(-6deg); } 60% { transform: rotateZ(5deg); -ms-transform: rotateZ(5deg); -webkit-transform: rotateZ(5deg); } 70% { transform: rotateZ(-4.28571deg); -ms-transform: rotateZ(-4.28571deg); -webkit-transform: rotateZ(-4.28571deg); } 80% { transform: rotateZ(3.75deg); -ms-transform: rotateZ(3.75deg); -webkit-transform: rotateZ(3.75deg); } 90% { transform: rotateZ(-3.33333deg); -ms-transform: rotateZ(-3.33333deg); -webkit-transform: rotateZ(-3.33333deg); } 100% { transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); } } @-webkit-keyframes shake { 0% { transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); } 10% { transform: rotateZ(-30deg); -ms-transform: rotateZ(-30deg); -webkit-transform: rotateZ(-30deg); } 20% { transform: rotateZ(15deg); -ms-transform: rotateZ(15deg); -webkit-transform: rotateZ(15deg); } 30% { transform: rotateZ(-10deg); -ms-transform: rotateZ(-10deg); -webkit-transform: rotateZ(-10deg); } 40% { transform: rotateZ(7.5deg); -ms-transform: rotateZ(7.5deg); -webkit-transform: rotateZ(7.5deg); } 50% { transform: rotateZ(-6deg); -ms-transform: rotateZ(-6deg); -webkit-transform: rotateZ(-6deg); } 60% { transform: rotateZ(5deg); -ms-transform: rotateZ(5deg); -webkit-transform: rotateZ(5deg); } 70% { transform: rotateZ(-4.28571deg); -ms-transform: rotateZ(-4.28571deg); -webkit-transform: rotateZ(-4.28571deg); } 80% { transform: rotateZ(3.75deg); -ms-transform: rotateZ(3.75deg); -webkit-transform: rotateZ(3.75deg); } 90% { transform: rotateZ(-3.33333deg); -ms-transform: rotateZ(-3.33333deg); -webkit-transform: rotateZ(-3.33333deg); } 100% { transform: rotateZ(0deg); -ms-transform: rotateZ(0deg); -webkit-transform: rotateZ(0deg); } }
Установка кнопки на WordPress
В админ панели WordPress переходим в раздел "внешний вид/редактор тем". Далее, в зависимости от структуры вашей темы, заходим в нужные файлы вносим правки. HTML код обычно вставляют в файл footer.php (перед закрывающим тегом </body>), а CSS в конец файла style.css.
Современные шаблоны могут иметь более сложную структуру, несколько файлов css и прочее, поэтому можно воспользоваться плагинами.
Например, для вставки HTML подойдут такие плагины, как "DCO Insert Analytics Code", "Head & Footer Code", "Woody Snippets" и им подобные. А для добавления CSS подойдёт плагин "Custom CSS" или "SiteOrigin CSS".
WordPress плагин WhatsApp кнопки
Если вы не хотите возиться с кодом, то можете воспользоваться разработанным мной быстрым и лёгким WordPress плагином Sticky Contact Button. Плагин не нагружает сайт, так как не использует JavaScript и при этом он позволяет добавить на сайт красивую анимированную кнопку с всплывающей подсказкой. С его помощью вы сможете создать не только WhatsApp кнопку, но и Telegram,Viber или телефон. В настройках легко можно менять вид кнопки и выбирать разные варианты анимации.
Ссылка на плагин Sticky Contact Button
Ещё один мой плагин, с помощью которого можно добавить сразу любое количество контактов. При нажатии на кнопку появляются всплывающие кнопки с добавленными контактами.
Ссылка на плагин Multibutton Fixed
28 ответов
Все отлично работает, спасибо вам за информацию для виджета, очень помогло!!!
Автору спасибо за кнопку! Все отлично работает!
Привет. Как сделать, что бы при нажатии на эту кнопку в приложении вместе с вопросом присылалась ссылка со станицы, где она была нажата?
Приветствую. У меня почему то получается только мерцающий зеленый кружок без логотипа WhatsApp
Значит что-то делаете неправильно, возможно, шрифт не подключили.
Здравствуйте, выбрала первый вариант, но почему то вместо кнопки выходит просто круг, без значка белого. Почему так может быть?
Наверно шрифт FontAwesome у вас не подключен.
а как его подключить нет инструкции?))
Не внимательно статью прочитали) Короче, если без заморочек, то просто установите плагин Font Awesome (он так и называется).
Автору спасибо за кнопку!
Кнопка топ - сделайте плагином на ВП
Спасибо вам огромное! Установил и всё прекрасно работает.
Возможно сделать, чтобы кнопка скрывалась при скроллинге страницы?
Да, конечно. Делается по принципу появления кнопки "вверх".
Добрый день, а можно дополнительный кусочек кода, чтоб при скролле скрывалась? А так всё работает прекрасно, спасибо!
Это уже нужно скрипты задействовать - отдельная песня.
Как этот виджет добавить на опенкарт? Пробую, уже добавила код и в шапку и в подвал и в файлы css во все темы - не хочет отображаться...
Надо смотреть, что и куда вы добавляете...
на пк отображается, а вот на сматфоне нет, на сайте
такая же прблема
Друзья, доброго дня!
Спасибо за отличное решение!
Использовали первый вариант Вашей кнопки. Немного увеличили размер для лучшей видимости.
На сайте: igrushkadlyadushi.ru - всё отлично.
На втором: medic.lightideas.studio - "плющит" шрифтину (белую иконку) вотсап... голову сломали почему это - решения не нашли. (((
CSS вставлен в head, так как при помещении в файлы CSS кнопка не видна вообще. Почему - тоже не понятно. (((
Очень надеюсь на Ваш совет и помощь!
Добрый день! У вас для шрифта прописан стиль font-style: italic поэтому значок получается с наклоном. Надо прописать font-style: normal;
Спасибо Вам огромное!!!!!
А почему код работает только при CSS в HEAD?
Надо смотреть последовательность подключения всех элементов.
Добрый день, подскажите как правильно прописать ссылку в WhatsApp, что бы при нажатии на кнопку закидывало в нужный чат? Спасибо.
В статье про это написано, и про ссылку, и про кнопку. Вопрос непонятен)
Приветствую.
После установки кнопки по второму варианту, в левом нижнем углу наблюдается мелкая красная иконка WhatsApp.
Убрал фрагмент кода - картинка исчезла:
Полагаю, в CSS за нее отвечает класс:
.whatsapp-button:hover i {
display:none;
И др.
Пожалуйста, поясните для чего нужен этот фрагмент?
Пока тесстирую сайт на тестовом домене.
В CSS всё нормально - этот код отвечает за смену иконки на надпись при наведении курсора. Я в HTML коде случайно два раза вставил вывод иконки, поэтому выскакивала вторая. Сейчас код поправил.