Ссылка или кнопка whatsapp
Создание кнопки whatsapp для своего сайта или для страницы в Instagram или для другой социальной сети. Клиент одним нажатие сможет написать вам в чат в whatsapp.
Создание ссылки:
https://api.whatsapp.com/send?phone=7**********
api.whatsapp.com/send?phone=7**********
*свой номер уже без +7
Добавляем сообщение к ссылке:
https://api.whatsapp.com/send?phone=7********** дополняем к ссылке URL: &text= и после каждого слова добавляем %20
Данная ссылка с сообщением может являть меткой для отслеживание от куда пришёл клиент.
Пример ссылки:
https://api.whatsapp.com/send?phone=71234567890&text=Добро%20пожаловать
Пример кликабельной кнопки:
<a class="название класса" href="https://api.whatsapp.com/send?phone=71234567890&text=webi.su target="_blank">Whatsapp</a>
.название класса { border-radius: 5px; padding: 7px 10px; cursor: pointer; color: #fff; background-color: #52b552; font-size: 1.5rem; border: 1px solid #fff; box-shadow: 2px 2px 5px #afffcf; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; }
.название класса:hover { border: 1px solid #006398; color: #fff; box-shadow: 2px 2px 20px #afffcf; text-decoration: none; background-color: #4aa84a; }
.название класса:active, .название класса:focus { color: #fff; text-decoration: none; }
a.название класса { -webkit-appearance: none; -moz-appearance: none; }
Создание ссылки:
https://api.whatsapp.com/send?phone=7**********
api.whatsapp.com/send?phone=7**********
*свой номер уже без +7
Добавляем сообщение к ссылке:
https://api.whatsapp.com/send?phone=7********** дополняем к ссылке URL: &text= и после каждого слова добавляем %20
Данная ссылка с сообщением может являть меткой для отслеживание от куда пришёл клиент.
Пример ссылки:
https://api.whatsapp.com/send?phone=71234567890&text=Добро%20пожаловать
Пример кликабельной кнопки:
<a class="название класса" href="https://api.whatsapp.com/send?phone=71234567890&text=webi.su target="_blank">Whatsapp</a>
.название класса { border-radius: 5px; padding: 7px 10px; cursor: pointer; color: #fff; background-color: #52b552; font-size: 1.5rem; border: 1px solid #fff; box-shadow: 2px 2px 5px #afffcf; transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; }
.название класса:hover { border: 1px solid #006398; color: #fff; box-shadow: 2px 2px 20px #afffcf; text-decoration: none; background-color: #4aa84a; }
.название класса:active, .название класса:focus { color: #fff; text-decoration: none; }
a.название класса { -webkit-appearance: none; -moz-appearance: none; }