Discover the Benefits of Canva Pro for Free and Elevate Your Designs | Get it for Free

Floating Telegram Button

Is adding a chat button to your website your intention? Should that be the case, you may wish to include an animated Telegram button that moves indefinitely. I'll explain how to add an animated floating Telegram button to Blogger in this article.

This cutting-edge feature highlight makes it possible for visitors or users to interact with you on the well-known Telegram app in an efficient manner, creating a reliable way to stay in touch and get updates. 

Following are the Some Advantages of Floating Telegram Button

1. Customers or visitors can easily communicate with you or your company.
2. You can share meaningful content and automate quick responses for your customers with Telegram, which helps you build a loyal customer base.
3. The Telegram Channel or group automation features are, at best, limited or basic. You may need to use the Channel if you have more customers.
4. You can get in touch with your customers quickly through Telegram, you can help them throughout their relationship with your brand or site.

Following are the Some DisAdvantage of the Floating Telegram Button

1. You can only respond to clients using the Telegram app on one smartphone or desktop. If you have more than five employees, this strategy is not feasible.
2. If you have more than 1 operator you have to made them admin and give them all admin privliages which can be risky sometime.

In only two simple steps, we will add an animated floating Telegram button to Blogger. Just take the actions I've listed below. 

Place the following HTML code where we want it to be displayed just before the </footer> tag. So it will became sticky and Floated.

<a class='telegram-float' href='https://t.me/Abdullahdcurz' target='_blank'>
		<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'/></svg>
</div>
</a>

Now, to give our Floating button style and animation we have to add CSS code in our template. Copy the below CSS code and paste it above </head> 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>

Click on Save button. That's it, If you Follow these steps Carefully then You will successfully Added an Animated Floating Telegram Button In Blogger Website. Enjoy and happy blogging 

You can undoubtedly or easily change or modify this Telegram button with a whatsapp button or any social sites button by chaning the Color, SVG icon and the Link. You can Get SVG Icons from many sites

Go to Link

Go to Link