Add a Floating Button in Your WordPress Website [Without Plugin]

Adding a floating chat button to your WordPress website can improve customer engagement without relying on plugins. This method keeps your site lightweight and fast. Follow these simple steps to manually add it using HTML and CSS. (I am using the telegram button as an example)

Step 1: Add HTML Code

Place the following code inside your WordPress theme’s footer (footer.php) just before the </body> tag, or use the “Custom HTML” widget in the WordPress Customizer.

<a href="#" target="_blank" class="telegram-button">
        <img src="https://upload.wikimedia.org/wikipedia/commons/8/82/Telegram_logo.svg" alt="Telegram">
    </a>

Step 2: Style with CSS

Add the following CSS code to your theme’s “Additional CSS” section or inside the style.css file.


        .telegram-button {
	    z-index:999999;
            position: fixed;
            bottom: 30px;
            right: 20px;
            color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            font-size: 30px;
            transition-duration: 5s;
            transition-delay: 2s;				
        }
        .telegram-button img:hover {
   	    width: 55px;
            height: 55px;
      }
        
.telegram-button img {
            width: 50px;
            height: 50px;
        }