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. 

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 changing the Color, SVG icon, and the Link as shown in the video. You can Get SVG Icons Here.

Why do You need a Floating Telegram Button?

An animated floating Telegram button on a website can serve several purposes, depending on the context and the goals of the website. 

Here are some reasons why one might choose to include such a button:

1. Direct Communication: Enables quick communication via Telegram.
2. User Engagement: Grabs attention with animation.
3. Social Media Integration: Promotes Telegram channel.
4. Brand Personality: Enhances aesthetics and brand image.
5. Call to Action (CTA): Prompts specific user actions.
6. Customer Support: Offers a direct line for assistance.
7. Marketing and Promotion: Utilized for promotions and announcements.

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