Html для кнопки ватсап

⚡️ Срочно!

В связи с блокировкой FB перестало работать api Whatsapp и всем, кто пользовался виджетом Whatsapp для своих сайтов мы крайне рекомендуем переключиться на виджет Телеграм! Если вам нужна помощь в перенастройке виджета, пишите нам на почту hello@novatechno.ru

Как разместить виджет Whatsapp на своем сайте

Зачем

Виджет Whatsapp на вашем сайте, необходим для быстрой и удобной обратной связи. Благодаря этой небольшой детали, визуально повышается статус вашего сайта, создается ощущение доверия, ведь теперь любые вопросы решаются в считанные секунды!

Почему

Вы вероятно уже хотите написать о том, что существуют более традиционные чаты внутри сайта, и вы конечно правы! А что если я вам скажу, что они больше не нужны? Они устарели, они не удобные. Отвечают в них также очень долго. У виджета Whatsapp есть ряд больших преимуществ перед традиционными онлайн-чатами. Давайте рассмотрим эти преимущества:

• Удобство и быстрота;
• Вы получаете все контактные данные вашего клиента (делать рассылки теперь еще проще, ведь можно сегментировать клиентов по запросам);
• Вы получаете доверие своего клиента (раз он сам решил вам предоставить свой номер телефона);
• Растет эффективность вашей рекламы (ведь процент открываемости сообщения в Whatsapp практически 100%, а переходы по ссылкам приближаются к 60%);
• Ваши рекламные посты упрощаются (ведь для Whatsapp достаточно лишь ссылку и пару предложений).

Как

Да все очень просто и займет времени меньше, чем вы потратите на прочтение этой статьи!

1. Самое важное, что вам стоит сделать, так это ввести ваш номер телефона, для того чтобы клиенты могли с вами связаться.
2. После того, как вы все настроили, вам необходимо сгенерировать код, нажав на кнопку “Получить код”

Коды подписаны и вам не придется искать ответы на вопросы “Что с ними теперь делать?”

После того, как вы разместите эти коды на своей страницу, вам останется лишь наслаждаться приятным и продуктивным общением с вашими клиентами!

Источник

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».

Источник

nogayhan / index.html

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

// TR-WP.COM

$ ( document ) . ready ( function ( )

$ ( «#ackapa» ) . click ( function ( )

$ ( «.trwpwhatsappballon» ) . toggle ( 1000 ) ;

> ) ;

$ ( «#kapatac» ) . click ( function ( )

$ ( «.trwpwhatsappballon» ) . toggle ( 1000 ) ;

> ) ;

> ) ;

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

/* TR-WP.COM */

@import url ( ‘https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’ );

@import url ( ‘http://fonts.googleapis.com/css?family=Lato:100,300,400|Raleway:100,300,400,500,600,700|Open+Sans:100,300,400,500,600’ );

body

background-color : # c8c8c8 ;

height : 1200 px ;

>

. trwpwhatsappballon

font-size : 14 px ;

border-radius : 12 px ;

border : 1 px solid # fff ;

max-width : 250 px ;

>

. trwpwhatsapptitle

background-color : # 22c15e ;

color : white;

padding : 14 px ;

border-radius : 12 px 12 px 0 px 0 px ;

text-align : center;

>

. trwpwhatsappmessage

padding : 16 px 12 px ;

background-color : white;

>

. trwpwhatsappinput

background-color : white;

border-radius : 0 px 0 px 12 px 12 px ;

>

. trwpwhatsappinput input

width : 206 px ;

border-radius : 10 px ;

margin : 1 px 1 px 0 px 10 px ;

padding : 10 px ;

font-family : «Raleway» , Arial , sans-serif;

font-weight : 300 ;

font-size : 13 px ;

background-color : # efefef ;

border : 1 px solid # d4d4d4 ;

>

. trwpwhatsappbutton

background-color : # 22c15e ;

border-radius : 20 px ;

padding : 8 px 15 px ;

cursor : pointer;

color : # fff ;

max-width : 220 px ;

margin-top : 10 px ;

margin-bottom : 10 px ;

-webkit-touch-callout : none;

-webkit-user-select : none;

-khtml-user-select : none;

-moz-user-select : none;

-ms-user-select : none;

user-select : none;

>

. trwpwhatsappall

position : fixed;

z-index : 9999999999999999999 ;

bottom : 0 ;

right : 10 px ;

font-family : «Raleway» , Arial , sans-serif;

font-weight : 300 ;

font-size : 15 px ;

>

. trwpwhatsappsendbutton

color : # 22c15e ;

cursor : pointer;

>

button

button i

float : right;

position : absolute;

z-index : 999999999999 ;

right : 23 px ;

top : 11 ;

bottom : 81 px ;

font-size : 18 px !important ;

>

. kapat

position : absolute;

right : 8 px ;

top : 6 px ;

font-size : 13 px ;

border : 1 px solid # fff ;

border-radius : 99 px ;

padding : 2 px 5 px 2 px 5 px ;

color : white;

font-size : 10 px ;

cursor : pointer;

>

Источник

Как сделать ссылку на 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:

Источник