Step-by-Step Guide: Adding a Floating Telegram Button to Your Blogger Site

Want to Add a Chat Button to Your Website? Consider a Floating Telegram Button!

This popular feature allows your website visitors to easily connect with you via this widely-used messaging app, creating a seamless communication channel 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, helping you engage with your audience in a whole new way. Let's get started and take your website to the next level!

How to Add a Floating Telegram Button to Your Template:

1- Log in to your blogger.com account

2- Go to Theme > Edit HTML

3- Copy the HTML code and paste it above the </body> tag

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>
  

4- Copy the CSS code and paste it above the ]]></b:skin> tag

      
<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> 
  

5- Finally, click Save to complete the process.

Why You Need a Floating Telegram Button

A floating animated Telegram button on your website can serve multiple purposes depending on your site's context and objectives. Here are several compelling reasons to implement this feature:

- Direct Communication: Enables instant messaging via Telegram

- User Engagement: Captures attention through animation

- Social Media Integration: Promotes your Telegram channel

- Brand Personality: Enhances aesthetic appeal and brand image

- Call-to-Action (CTA): Encourages specific user actions

- Customer Support: Provides direct contact for assistance

- Marketing & Promotion: Useful for announcements and campaigns

I hope this guide helps you add a floating Telegram button to your website. If you have any questions, please let me know!