Home
CSS

How to Add an Animated Floating Telegram Button In Blogger & WordPress

 Are you looking to add a chat button to your Website? If so, you may want to consider incorporating an animated floating Telegram button. 

This trendy feature allows visitors to easily connect with you on the popular messaging app, creating a seamless way to stay in touch and receive updates. 

How to Add an Animated Floating Telegram Button In Blogger & WordPress

In this article, we'll provide step-by-step instructions on how to add an animated floating Telegram button to your Blogger or WordPress site, so you can start engaging with your audience in a whole new way. So, let's dive in and take your website to the next level!

Steps To Add Floating Telegram Button

You can use the HTML & CSS code just above the </body> tag.

Watch the below video to know the complete steps on how to add this in Blogger and wordpress website

HTML code ➜

<a href="https://t.me/YourChannelName" target="_blank" class="telegram-float">
		<div class="telegram-icon">
			<svg viewBox="0 0 64 64"><path d="M56.4,8.2l-51.2,20c-1.7,0.6-1.6,3,0.1,3.5l9.7,2.9c2.1,0.6,3.8,2.2,4.4,4.3l3.8,12.1c0.5,1.6,2.5,2.1,3.7,0.9 l5.2-5.3c0.9-0.9,2.2-1,3.2-0.3l11.5,8.4c1.6,1.2,3.9,0.3,4.3-1.7l8.7-41.8C60.4,9.1,58.4,7.4,56.4,8.2z M50,17.4L29.4,35.6 c-1.1,1-1.9,2.4-2,3.9c-0.2,1.5-2.3,1.7-2.8,0.3l-0.9-3c-0.7-2.2,0.2-4.5,2.1-5.7l23.5-14.6C49.9,16.1,50.5,16.9,50,17.4z"></path></svg>
</div>
</a>

CSS code ➜

 <style>
.telegram-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.telegram-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #0088cc;
  display: flex;
  justify-content: center;
  align-items: center;
  animation-name: pulse;
	animation-duration: 1.5s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

      @keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.5);
	}
	80% {
		box-shadow: 0 0 0 14px rgba(0, 136, 204, 0);
	}
}

.telegram-icon svg {
  fill: #fff;
  width: 30px;
  height: 30px;
}
</style>

Note that you can easily modify this Telegram button with a whatsapp button by chaning the Color, SVG icon and the Link as shown in the video. You can Get SVG Icons Here.

I hope this article help you add a floating telegram button to your website. If you have any doubts, do let me know in Our Telegram Group.