⚡️ Срочно!
В связи с блокировкой FB перестало работать api Whatsapp и всем, кто пользовался виджетом Whatsapp для своих сайтов мы крайне рекомендуем переключиться на виджет Телеграм! Если вам нужна помощь в перенастройке виджета, пишите нам на почту hello@novatechno.ru
Как разместить виджет Whatsapp на своем сайте
Зачем
Виджет Whatsapp на вашем сайте, необходим для быстрой и удобной обратной связи. Благодаря этой небольшой детали, визуально повышается статус вашего сайта, создается ощущение доверия, ведь теперь любые вопросы решаются в считанные секунды!
Почему
Вы вероятно уже хотите написать о том, что существуют более традиционные чаты внутри сайта, и вы конечно правы! А что если я вам скажу, что они больше не нужны? Они устарели, они не удобные. Отвечают в них также очень долго. У виджета Whatsapp есть ряд больших преимуществ перед традиционными онлайн-чатами. Давайте рассмотрим эти преимущества:
- Удобство и быстрота;
- Вы получаете все контактные данные вашего клиента (делать рассылки теперь еще проще, ведь можно сегментировать клиентов по запросам);
- Вы получаете доверие своего клиента (раз он сам решил вам предоставить свой номер телефона);
- Растет эффективность вашей рекламы (ведь процент открываемости сообщения в Whatsapp практически 100%, а переходы по ссылкам приближаются к 60%);
- Ваши рекламные посты упрощаются (ведь для Whatsapp достаточно лишь ссылку и пару предложений).
Как
Да все очень просто и займет времени меньше, чем вы потратите на прочтение этой статьи!
- Самое важное, что вам стоит сделать, так это ввести ваш номер телефона, для того чтобы клиенты могли с вами связаться.
- После того, как вы все настроили, вам необходимо сгенерировать код, нажав на кнопку “Получить код”
Коды подписаны и вам не придется искать ответы на вопросы “Что с ними теперь делать?”
После того, как вы разместите эти коды на своей страницу, вам останется лишь наслаждаться приятным и продуктивным общением с вашими клиентами!
How to Add Whatsapp Share Button Using HTML & CSS?
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.
Do you want to learn HTML to JavaScript? 🔥
If yes, then here is our Master Frontend: Zero to Hero eBook! 📚 In this eBook, you’ll learn complete HTML, CSS, Bootstrap, and JavaScript from beginner to advance level. 💪 It includes 450 Projects with source code.
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 element, and we will add the little description using the
tag. You can follow us on YouTube and Instagram if you appreciate our project and would want to see more of them.
- Using the tag we will add a whatsapp icon class inside our anchor link and inside our href we will add the Whataspp API link.
Let’s have a look at our webpage now that we’ve added structure.
Step2: Adding CSS Code
In your stylesheet, copy and paste the CSS code provided below.
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.
Live Preview Of Whatsapp Icon using HTML , CSS
See the Pen
WhatsApp Button by Jonathan Gomes (@jonathangomes)
on CodePen.
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.
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; |
| > |