WhatsApp Icon

How to Add Whatsapp Share Button Using HTML & CSS Code?

In this article, we’ll build a WhatsApp Share Button Using Html and Css Code and add it to our website so that whenever someone clicks on the symbol, the message is shared with the specific person whose number is connected to our WhatsApp API. In this article, we’ll demonstrate how to incorporate a chat feature into our website using APIs. The most popular cross-platform messaging software in the world, WhatsApp, is also one of the most secure methods to contact family and friends that live overseas. End-to-end encryption and free web-based international calling are two of WhatsApp’s well-known increased privacy features. What is an API? Application Programming Interface is referred to as API. The term «application» in the context of APIs refers to any software with a specific function. Interface can be compared to a service agreement between two programmes. This agreement specifies the requests and responses that the two parties will use to communicate. Developers can find instructions in their API documentation on how to format those requests and responses. I hope you have a general idea of what the project entails. In our article, we will go over this project step by step.

Step1: Adding HTML Markup

          
WhatsApp Button
 
If you liked this pen, don't forget to heart, share and follow!
    

The project’s structure will be included first, but first we must include certain information inside the link, such as the fact that we utilised a CSS file, which we must connect inside our HTML code. In order to incorporate the icons into our project, we also used some icons on our Timeline page, so we needed to include some icon links inside the head part of our HTML.

Adding the Structure for our Whatsapp Icon: To add the WhatsApp icon structure to our website, we will use the fundamental HTML elements. This is a very simple structure; we’ll just add the main heading and then add the WhatsApp icon class inside our body using the font-awesome classes. We will now give our webpage a primary, large heading using the h1 element, and we will add the little description using the p tag. You can follow us on YouTube and Instagram if you appreciate our project and would want to see more of them.
Using the a tag we will add a whatsapp icon class inside our anchor link and inside our href we will add the Whataspp API link.

Step2: Adding CSS Code

html, body < width: 100%; height: 100%; >body < display: flex; flex-direction: column; align-items: center; justify-content: center; align-content: center; background: #00c6ff; /* fallback for old browsers */ background: -webkit-linear-gradient( to right, #0072ff, #00c6ff ); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient( to right, #0072ff, #00c6ff ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ font-family: "Montserrat", sans-serif; color: #ffffff; >h1 < font-size: 4em; text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7); >p < text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7); >.whatsapp-button < position: fixed; bottom: 15px; right: 15px; z-index: 99; background-color: #25d366; border-radius: 50px; color: #ffffff; text-decoration: none; width: 50px; height: 50px; font-size: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; -webkit-box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1); box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1); animation: effect 5s infinite ease-in; >@keyframes effect < 20%, 100% < width: 50px; height: 50px; font-size: 30px; >0%, 10% < width: 55px; height: 55px; font-size: 35px; >5% < width: 50px; height: 50px; font-size: 30px; >> 

Step1: The width and height of our body will be set to «100%» using the html body element selector. We’ll also use it to set the display to «flex» and centre all of the items using the align item attribute. We’ll add a linear gradient backdrop in shades of blue and light blue using the background attribute. The font colour is set to «white» and the font family is «Montserrat.»

Step2: Using the tag selector (h1), we will now style our HTML elements by setting the font-size to «4 em» and adding a black text shadow to the h1 heading with the text-shadow property. To add text shadows to our paragraph text, we will also use the tag selector (p).

Step3: Now using the class selector (.whatsapp-button) we will set the position as «fixed» and using the bottom property we will leave a 15px space from bottom and right property we will leave space 15px from right.Using the background color property we will set the background as «green» and we have also added a border radius of 50px to add the round shape to our icon. The width and height is set as 50px respecitvely.Using the animate property we will add effect ease-in to our icon. The keyframes rule is now able to provide the animation code by using the keyframe property. A progressive transition from one set of CSS styles to another is used to produce the animation. The collection of CSS styles can be altered repeatedly while the animation is playing.

.whatsapp-button < position: fixed; bottom: 15px; right: 15px; z-index: 99; background-color: #25d366; border-radius: 50px; color: #ffffff; text-decoration: none; width: 50px; height: 50px; font-size: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; -webkit-box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1); box-shadow: 0px 0px 25px -6px rgba(0, 0, 0, 1); animation: effect 5s infinite ease-in; >@keyframes effect < 20%, 100% < width: 50px; height: 50px; font-size: 30px; >0%, 10% < width: 55px; height: 55px; font-size: 35px; >5% < width: 50px; height: 50px; font-size: 30px; >> 

Now we’ve completed our whatsapp Icon using HTML , CSS . I hope you understood the whole project. Let’s take a look at our Live Preview. Now We have Successfully created our Whatsapp Icon using HTML , CSS. You can use this project directly by copying into your IDE. WE hope you understood the project , If you any doubt feel free to comment!! If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page. follow : codewithrandom
Written By : Arun
Code By: Jonathan

Источник

WhatsApp кнопка для сайта с анимацией

Сегодня разберем, как сделать красивую анимированную кнопку для связи по WhatsApp прямо с сайта. Делать мы это будем без плагинов, только при помощи CSS. Поэтому данный способ подойдёт для любого сайта. Ну а разбирать мы всё это будем, конечно же, на примере самой популярной CMS WordPress.

Ссылка для перехода в Whatsapp

Для начала рассмотрим, как выглядит ссылка на чат в Whatsapp для сайта.

А вот она в виде HTML кода:

Вместо phone=79260000000 вставляем нужный номер

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

Кнопка Whatsapp в углу экрана с анимацией

Первый вариант кнопки whatsapp для сайта делается довольно просто и её легко отредактировать, если вам понадобится поменять цвет или размеры.

Для создания нашей кнопки, мы будем использовать иконку Font Awesome. Для этого ваш шаблон должен поддерживать данный шрифт. Если нет, то необходимо его подключить. Если вы не знаете, как это сделать, то можно воспользоваться плагином Font Awesome — он автоматически подключит библиотеку иконок.

.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 следующий код.

Кнопка Whatsapp — вариант 2

Данная кнопка имеет более сложную анимацию и эффект появления надписи при наведении.

.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%; 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; >.whatsapp-button:hover < z-index:1; background:#fff; color:transparent; transition:.3s; >.whatsapp-button:hover i < color:#25D366; font-size:44px; 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 (перед закрывающим тегом ), а CSS в конец файла style.css.

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

Например, для вставки HTML подойдут такие плагины, как «DCO Insert Analytics Code», «Head & Footer Code», «Woody Snippets» и им подобные. А для добавления CSS подойдёт плагин «Custom CSS» или «SiteOrigin CSS».

Источник

Как сделать ссылку на Whatsapp: 3 варианта в HTML

Маркетологи предлагают использовать в продажах мессенджеры как альтернативу Instagram Direct и Facebook. Привлечение клиентов из IG и FB может стоить очень дорого. В мессенджерах выстраивают более дешевую воронку продаж. Простой код html – и готова ссылка, которая переводит клиента в WhatsApp.

Если аккаунт Instagram – единственная площадка продажи ваших услуг, товара, не стоит бояться переводить клиентов в переписку WhatsApp. Это самый популярный в мире мессенджер, на 10% популярнее, чем Viber.

По статистике компании «Statista», в 2020 году количество пользователей мессенджеров увеличилось вдвое. В 2021 году продолжит развиваться новый способ взаимодействия с целевой аудиторией – мессенджер-маркетинг. Поэтому не использовать мессенджеры – недальновидно.

Преимущества WhatsApp перед Direct

Один из важнейших разделов в шапке профиля – обратная связь. Несмотря на то, что в бизнес-аккаунтах доступны кнопки «Позвонить», «Написать», кликают по ним редко.

· длинные текстовые сообщения легко читать: разделяем абзацы, маркированные списки, вставляем смайлы.

Предприниматели предпочитают Ватсап из-за одной важной опции – внесение номера в контакты. В будущем это дает возможность:

Некоторые размещают в шапке номер телефона. Копировать номер с Инстаграм-страницы магазина, блога, сервиса – неудобно. Сложно представить, как человек переписывает по цифре номер, сворачивает приложение Instagram, открывает контакты, добавляет номер, потом пишет в WhatsApp.

Помните! Лишние действия тормозят процесс покупки.

Чтобы клиент не переписывал номер телефона вручную, а звонил, писал сразу, сделайте html ссылку на WhatsApp. Размещайте в «Ссылке профиля» Инстаграм, отправляйте в сообщении, иcпользуйте для таргетированной рекламы.

Как правильно сделать ссылку на WhatsApp

Функция «Прямая связь» запускает чат с пользователем, чьего номера нет в вашем списке контактов. Глубоких знаний Html не понадобится. Следуйте инструкции.

Помогите клиенту обратиться к вам. Сформулируйте шаблон первого сообщения. Пользователю останется нажать «отправить».

Такую хитрость используют для создания базы клиентов, рассылок, оформления подписок, записи на вебинары и т.д.

Html для Мультиссылки

Ограничения для отображения контактов в шапке профиля Instagram – боль бизнес-аккаунтов. Доступно добавление одной ссылки. Единственный канал ограничивает возможности обратной связи с клиентами. Интернет-пользователи ленивы и требовательны: не будет удобного мессенджера – не закажут. WhatsApp и Telegram используют молодые люди. Аудитория более зрелого возраста чаще выбирает Viber.

Чтобы оставить контакты разных мессенджеров, социальных сетей, ссылки на описание товаров и услуг, воспользуйтесь сервисом мультиссылок Hipolink – мини-сайт с удобным функционалом. Подходит для бизнеса и продвижения товаров и услуг.

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

Ссылка на мессенджер в Hipolink

Не нужно знать html или искать код ссылки для WhatsApp. Hipolink – конструктор, настройки совершаются за пару кликов. Чтобы добавить мессенджеры, воспользуйтесь инструкцией.

В разделе «Настройка мессенджеров» выберете необходимые мессенджеры. Из всех сервисов мультиссылок только Hipolink предоставляет 11 мессенджеров, кнопку которых можно сделать без использования дополнительного html:

Источник

Site Builder

Сайто-Строитель.рф © 2013-2021
При копировании материалов активная ссылка на источник обязательна!

Cайто-Cтроитель.рф
Поиск по Сайту

Анимированная кнопка Ватсап (Whatsapp) на сайт

Мы уже давно привыкли к различным кнопкам на сайтах в виде телефона, логотипов мессенджеров и так далее. Социальные сети и различные чаты на сегодняшний день — это основная масса потребителей. Наиболее популярным сегодня стал Whatsapp. Поэтому кнопка его чата для связи с владельцами Веб-ресурсов, больше необходимость чем мода.

Сегодня я приготовил три варианта популярного чата Ватсап. Первый наиболее простой вариант, мы сейчас рассмотрим.

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

Для реализации этой кнопки Whatsapp, сначала необходимо подключить библиотеку «font-awesome.min.css», на главной странице вашего сайта. Для этого между тегами HEAD или перед открывающим тегом BODY, необходимо прописать следующее:

Тут же ниже можем прописать стилевые оформления кнопки, или добавить их в стилевой файл вашего сайта:

А теперь приступим к размещению самой кнопки Ватсап. Её мы расположим в самом низу страницы перед закрывающим тегом BODY. При этом не забываем записать свой телефон, как на примере кода ниже. Телефон обязательно должен быть привязан к мессенджеру Ватсапа:

Сохраняем файл. Проверяем. Все работает, значит молодцы! Нет ищем ошибку в действиях.

Друзья в данном примере. Я подготовил три вида кнопок. Исходники, которых вы сможете скачать по ссылке ниже. Также посмотрите видео, где подробно рассказывается о каждом из вариантов, установки кнопки Ватсап на сайт.

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

Скачать файл: button-whatsapp.rar [41.94 Kb] (cкачиваний: 101)

Источник