Home
Blogging
Coding

How to create WhatsApp Sticky Button

WhatsApp Sticky button is a button or widget for your blogger template that shows up everywhere on your website. With the help of this widget, users c
5 min read

How to create WhatsApp Sticky Button?


Hello Guys, Welcome to Coding Taggers, today we are going to see how to create WhatsApp widget in our Blogger template. It is very easy and simple to create WhatsApp widget in your Blogger template.



What Is a WhatsApp Sticky Button?

If you don't know what a WhatsApp Sticky. I am here to increase your knowledge. WhatsApp Sticky button is a button or widget for your blogger template that shows up everywhere on your website. With the help of this widget, users can easily connect to you via WhatsApp.

  Applying the WhatsApp widget to your blogger widget on your website is very simple and easy. You should follow a simple process.

 

So let's see how to setup a WhatsApp Sticky button widget on Blogger

  We are going to complete this in two steps, so follow these steps very carefully:

  •   Go to Blogger
  •   Click on Themes
  •   Click on the arrow and then edit the HTML
  •   Then Copy the HTML Code, paste the code above of the </body> tag. 
  •   Then find this code ]]> </b: skin>
  •   Then copy and paste the given CSS Code on above it.  

HTML Code for WhatsApp Sticky Button

  
<!DOCTYPE html>
<html>
	<head>
		<title>WhatsApp Sticky Button</title>
	</head>
	<body>
		<input class='chat-menu hidden' id='offchat-menu' type='checkbox'/>
		<div class='sticky-button blink_me' id='sticky-button'>
			<label for='offchat-menu'>
				<svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" fill="currentColor" class="bi bi-whatsapp" viewBox="0 0 16 16">
					<path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/>
				</svg>
			</label>
		</div>
		<div class='sticky-chat'>
			<div class='chat-content'>
				<div class='chat-header'>
					<svg viewbox='0 0 32 32'>
						<path d='M24,22a1,1,0,0,1-.64-.23L18.84,18H17A8,8,0,0,1,17,2h6a8,8,0,0,1,2,15.74V21a1,1,0,0,1-.58.91A1,1,0,0,1,24,22ZM17,4a6,6,0,0,0,0,12h2.2a1,1,0,0,1,.64.23L23,18.86V16.92a1,1,0,0,1,.86-1A6,6,0,0,0,23,4Z'/>
						<rect height='2' width='2' x='19' y='9'/>
						<rect height='2' width='2' x='14' y='9'/>
						<rect height='2' width='2' x='24' y='9'/>
						<path d='M8,30a1,1,0,0,1-.42-.09A1,1,0,0,1,7,29V25.74a8,8,0,0,1-1.28-15,1,1,0,1,1,.82,1.82,6,6,0,0,0,1.6,11.4,1,1,0,0,1,.86,1v1.94l3.16-2.63A1,1,0,0,1,12.8,24H15a5.94,5.94,0,0,0,4.29-1.82,1,1,0,0,1,1.44,1.4A8,8,0,0,1,15,26H13.16L8.64,29.77A1,1,0,0,1,8,30Z'/>
					</svg>
					<div class='title'> Coding Taggers <span>Discuss about coding? </span></div>
				</div>
				<div class='chat-text'>
					<span>Hello, How can we help you?</span>
					<span class='typing'>
						<svg viewbox='0 0 512 512'>
							<circle cx='256' cy='256' r='48'/>
							<circle cx='416' cy='256' r='48'/>
							<circle cx='96' cy='256' r='48'/>
						</svg>
					</span>
				</div>
			</div>
			<span><input class="schat" type="text" placeholder="Start chat... " autofocus></span>
			<a class='chat-button' href='https://api.whatsapp.com/send/?phone=911234567899' rel='nofollow noreferrer' target='_blank'>
				<svg viewBox='0 0 32 32' style="fill:#4CAF50">
					<path class='cls-1' d='M19.47,31a2,2,0,0,1-1.8-1.09l-4-7.57a1,1,0,0,1,1.77-.93l4,7.57L29,3.06,3,12.49l9.8,5.26,8.32-8.32a1,1,0,0,1,1.42,1.42l-8.85,8.84a1,1,0,0,1-1.17.18L2.09,14.33a2,2,0,0,1,.25-3.72L28.25,1.13a2,2,0,0,1,2.62,2.62L21.39,29.66A2,2,0,0,1,19.61,31Z'/>
				</svg>
			</a>
		</div>
	</body>
</html>
Note :

Find the Coding Taggers (highlighted) and replace them with your title.

Find 911234567899 (highlighted) and replace it with your WhatsApp number.

CSS Code for WhatsApp Sticky Button

  	/* Whatsapp Sticky Button from codingtaggers.blogspot.com */
:root {
--warna-background: #4dc247;
--warna-bg-chat: #f0f5fb;
--warna-icon: #fff;
--warna-text: #505050;
--warna-text-alt: #989b9f;
--lebar-chatbox: 320px;
}
.sticky-button{
display: flex;
align-items: center;
justify-content: center;
position: fixed;
right: 20px;
bottom: 76px;
width: 45px;
height: 45px;
background-color: #fefefe;
border-radius: 50%;
box-shadow: 1px 1px  5px 5px #4CAF50;
}
.sticky-button a, .sticky-button label{display:flex;align-items:center;width:55px;height:55px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;}
.sticky-button a svg, .sticky-button label svg{margin:auto;fill:#4dc247}
.sticky-button label svg.svg-2{display:none}
.sticky-chat{position:fixed;bottom:70px;right:20px;width:70%;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;
z-index:21;opacity:0;visibility:hidden;line-height:normal}
.sticky-chat .chat-content{border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden}
.sticky-chat .chat-header{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:#4CAF50;overflow:hidden}
.sticky-chat .chat-header:after{content:'';display:block;position:absolute;bottom:0;right:0;width:70px;height:65px;background:rgba(0,0,0,.000);border-radius:70px 0 5px 0;}
.sticky-chat .chat-header svg{width:35px;height:35px;flex:0 0 auto;fill:var(--warna-icon)}
.sticky-chat .chat-header .title{padding-left:15px;font-size:14px;font-weight:600;font-family:'Roboto', sans-serif;color:var(--warna-icon)}
.sticky-chat .chat-header .title span{font-size:11px;font-weight:400;display:block;line-height:1.58em;margin:0;}
.sticky-chat .chat-text{display:flex;flex-wrap:wrap;margin:25px 20px;font-size:12px;color:var(--warna-text)}
.sticky-chat .chat-text span{display:inline-block;margin-right:auto;padding:10px 10px 10px 20px;background-color:var(--warna-bg-chat);border-radius:3px 15px 15px}
.sticky-chat .chat-text span:after{content:'Just now';display:inline-block; position:relative; bottom:-5px; left:-4px;margin-left:2px;font-size:9px;color:var(--warna-text-alt)}
.sticky-chat .chat-text span.typing{margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:15px 3px 15px 15px}
.sticky-chat .chat-text span.typing:after, .chat-menu{display:none}
.sticky-chat .chat-text span.typing svg{height:14px;fill:var(--warna-text-alt)}
.sticky-chat .chat-button{display:flex;align-items:center;margin-top:15px;padding:12px 20px;border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden;font-size:12px;color:var(--warna-text)}
.sticky-chat .chat-button svg{width:20px;height:20px;fill:var(--warna-text-alt);margin-left:auto;transform:rotate(40deg);-webkit-transform:rotate(40deg)}
.chat-menu:checked + .sticky-button label{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
.chat-menu:checked + .sticky-button label svg.svg-1{display:none}
.chat-menu:checked + .sticky-button label svg.svg-2{display:table-cell}
.chat-menu:checked + .sticky-button + .sticky-chat{
bottom: 77px;
right: 81px;
opacity: 1;
visibility: visible;
} 
.schat {
outline: none ;position:absolute;bottom:12px;left:15px;border:none;color:#4CAF50;font-weight:bold;
} 
.blink_me {
animation: blinker 1.3s linear infinite;
text-align: center;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
Note:

You can make changes in CSS code like color, background-color etc. But you have to change it carefully.

Full Source Code :


<!DOCTYPE html>
<html>
	<head>
		<title>WhatsApp Sticky Button</title>
		<style>
			/* Whatsapp Sticky Button from codingtaggers.blogspot.com */
			:root {
			--warna-background: #4dc247;
			--warna-bg-chat: #f0f5fb;
			--warna-icon: #fff;
			--warna-text: #505050;
			--warna-text-alt: #989b9f;
			--lebar-chatbox: 320px;
			}
			.sticky-button{
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			right: 20px;
			bottom: 76px;
			width: 45px;
			height: 45px;
			background-color: #fefefe;
			border-radius: 50%;
			box-shadow: 1px 1px  5px 5px #4CAF50;
			}
			.sticky-button a, .sticky-button label{display:flex;align-items:center;width:55px;height:55px;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;}
			.sticky-button a svg, .sticky-button label svg{margin:auto;fill:#4dc247}
			.sticky-button label svg.svg-2{display:none}
			.sticky-chat{position:fixed;bottom:70px;right:20px;width:70%;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;
			z-index:21;opacity:0;visibility:hidden;line-height:normal}
			.sticky-chat .chat-content{border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden}
			.sticky-chat .chat-header{position:relative;display:flex;align-items:center;padding:15px 20px;background-color:#4CAF50;overflow:hidden}
			.sticky-chat .chat-header:after{content:'';display:block;position:absolute;bottom:0;right:0;width:70px;height:65px;background:rgba(0,0,0,.000);border-radius:70px 0 5px 0;}
			.sticky-chat .chat-header svg{width:35px;height:35px;flex:0 0 auto;fill:var(--warna-icon)}
			.sticky-chat .chat-header .title{padding-left:15px;font-size:14px;font-weight:600;font-family:'Roboto', sans-serif;color:var(--warna-icon)}
			.sticky-chat .chat-header .title span{font-size:11px;font-weight:400;display:block;line-height:1.58em;margin:0;}
			.sticky-chat .chat-text{display:flex;flex-wrap:wrap;margin:25px 20px;font-size:12px;color:var(--warna-text)}
			.sticky-chat .chat-text span{display:inline-block;margin-right:auto;padding:10px 10px 10px 20px;background-color:var(--warna-bg-chat);border-radius:3px 15px 15px}
			.sticky-chat .chat-text span:after{content:'Just now';display:inline-block; position:relative; bottom:-5px; left:-4px;margin-left:2px;font-size:9px;color:var(--warna-text-alt)}
			.sticky-chat .chat-text span.typing{margin:15px 0 0 auto;padding:10px 20px 10px 10px;border-radius:15px 3px 15px 15px}
			.sticky-chat .chat-text span.typing:after, .chat-menu{display:none}
			.sticky-chat .chat-text span.typing svg{height:14px;fill:var(--warna-text-alt)}
			.sticky-chat .chat-button{display:flex;align-items:center;margin-top:15px;padding:12px 20px;border-radius:10px;background-color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,.05);overflow:hidden;font-size:12px;color:var(--warna-text)}
			.sticky-chat .chat-button svg{width:20px;height:20px;fill:var(--warna-text-alt);margin-left:auto;transform:rotate(40deg);-webkit-transform:rotate(40deg)}
			.chat-menu:checked + .sticky-button label{-webkit-transform: rotate(360deg);transform: rotate(360deg);}
			.chat-menu:checked + .sticky-button label svg.svg-1{display:none}
			.chat-menu:checked + .sticky-button label svg.svg-2{display:table-cell}
			.chat-menu:checked + .sticky-button + .sticky-chat{
			bottom: 77px;
			right: 81px;
			opacity: 1;
			visibility: visible;
			} 
			.schat {
			outline: none ;position:absolute;bottom:12px;left:15px;border:none;color:#4CAF50;font-weight:bold;
			} 
			.blink_me {
			animation: blinker 1.3s linear infinite;
			text-align: center;
			}
			@keyframes blinker {
			50% {
			opacity: 0;
			}
			}
		</style>
	</head>
	<body>
		<input class='chat-menu hidden' id='offchat-menu' type='checkbox'/>
		<div class='sticky-button blink_me' id='sticky-button'>
			<label for='offchat-menu'>
				<svg xmlns="http://www.w3.org/2000/svg" width="30px" height="30px" fill="currentColor" class="bi bi-whatsapp" viewBox="0 0 16 16">
					<path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/>
				</svg>
			</label>
		</div>
		<div class='sticky-chat'>
			<div class='chat-content'>
				<div class='chat-header'>
					<svg viewbox='0 0 32 32'>
						<path d='M24,22a1,1,0,0,1-.64-.23L18.84,18H17A8,8,0,0,1,17,2h6a8,8,0,0,1,2,15.74V21a1,1,0,0,1-.58.91A1,1,0,0,1,24,22ZM17,4a6,6,0,0,0,0,12h2.2a1,1,0,0,1,.64.23L23,18.86V16.92a1,1,0,0,1,.86-1A6,6,0,0,0,23,4Z'/>
						<rect height='2' width='2' x='19' y='9'/>
						<rect height='2' width='2' x='14' y='9'/>
						<rect height='2' width='2' x='24' y='9'/>
						<path d='M8,30a1,1,0,0,1-.42-.09A1,1,0,0,1,7,29V25.74a8,8,0,0,1-1.28-15,1,1,0,1,1,.82,1.82,6,6,0,0,0,1.6,11.4,1,1,0,0,1,.86,1v1.94l3.16-2.63A1,1,0,0,1,12.8,24H15a5.94,5.94,0,0,0,4.29-1.82,1,1,0,0,1,1.44,1.4A8,8,0,0,1,15,26H13.16L8.64,29.77A1,1,0,0,1,8,30Z'/>
					</svg>
					<div class='title'> Coding Taggers <span>Discuss about coding? </span></div>
				</div>
				<div class='chat-text'>
					<span>Hello, How can we help you?</span>
					<span class='typing'>
						<svg viewbox='0 0 512 512'>
							<circle cx='256' cy='256' r='48'/>
							<circle cx='416' cy='256' r='48'/>
							<circle cx='96' cy='256' r='48'/>
						</svg>
					</span>
				</div>
			</div>
			<span><input class="schat" type="text" placeholder="Start chat... " autofocus></span>
			<a class='chat-button' href='https://api.whatsapp.com/send/?phone=911234567899' rel='nofollow noreferrer' target='_blank'>
				<svg viewBox='0 0 32 32' style="fill:#4CAF50">
					<path class='cls-1' d='M19.47,31a2,2,0,0,1-1.8-1.09l-4-7.57a1,1,0,0,1,1.77-.93l4,7.57L29,3.06,3,12.49l9.8,5.26,8.32-8.32a1,1,0,0,1,1.42,1.42l-8.85,8.84a1,1,0,0,1-1.17.18L2.09,14.33a2,2,0,0,1,.25-3.72L28.25,1.13a2,2,0,0,1,2.62,2.62L21.39,29.66A2,2,0,0,1,19.61,31Z'/>
				</svg>
			</a>
		</div>
	</body>
</html>


Try it on CodePen:



Post a Comment