Telegram Join Pop Up Bottom Floating Widget HTML Code

Telegram Join Pop Up Bottom Floating Widget HTML Code
Telegram Join Pop Up Bottom Floating Widget HTML Code
Are you looking for an attractive and user-friendly way to promote your Telegram group or business on your website? Look no further! We've got an amazing solution for you - the Telegram Join Pop Up Bottom Floating Widget. This widget is not only eye-catching but also easy to implement since it's built using HTML. Let's dive into the details and learn how you can make the most of this fantastic Widget.

What is the Telegram Join Pop Up Bottom Floating Widget?

The Telegram Join Pop Up Bottom Floating Widget is a powerful feature that you can integrate into your website to enhance user engagement and promote your Telegram group or business. Here's how it works: when a visitor lands on your website, this widget gracefully pops up at the bottom of the screen, catching their attention. You have the freedom to link it to your group, ID, or any other destination you prefer. If a user decides to close it, the pop-up will respect their choice. It's an effective and unobtrusive way to grow your Telegram community.

Telegram Join Pop Up Bottom Floating Widget HTML Code

Implementing this widget is a breeze. Below is the HTML code you can use on your website or app:


        .slide-up-box {
            display: none;
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 500px; /* Set your desired width */
            background-color: #ddddff;
            background-color: rgba(221, 221, 255, 0.3);
            color: #fff;
            padding: 20px;
            padding-top: 0px;
            text-align: center;
            border-radius: 10px;

        .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            font-size: 24px;
            color: #000;
            cursor: pointer;

        .telegram-dp {
            max-width: 100%;
            height: 100%;
            border-radius: 50%;
            margin: 20px auto;
            display: block;

        .join-button {
            background-color: #0088cc;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;

        @media (max-width: 768px) {
            .telegram-dp {
                max-width: 80px;
        document.addEventListener("DOMContentLoaded", function() {
            setTimeout(function() {
                document.getElementById("telegram-box").style.display = "block";
            }, 1000);

        function closeTelegramBox() {
            document.getElementById("telegram-box").style.display = "none";

    <!-- Telegram Group Slide-Up Box -->
    <div id="telegram-box" class="slide-up-box">
        <button id="close-button" class="close-button" onclick="closeTelegramBox()">&times;</button>
        <img src="" alt="Telegram Group DP" class="telegram-dp">
        <a href="" class="join-button">Join Our Official Group</a>

How the Telegram Join Pop Up Bottom Floating Widget Works

This widget is designed to pop up only when a visitor accesses your website or app. What makes it even more impressive is that it's smart enough to remember the user's preference. If someone closes the pop-up, it won't annoy them repeatedly. Instead, the widget will reappear after a specific period, which you can customize according to your needs. You can link it to your Telegram group, Facebook page, or any other URL, and the widget's appearance and behavior are fully customizable.

Final Words

In today's post, we introduced the Telegram Join Pop Up Bottom Floating Widget – a valuable addition for any blogger, website owner, or app developer. By simply placing the provided HTML code in the body section of your website or app, you can effortlessly engage with your audience and promote your Telegram community.

If you have any questions or need assistance, please feel free to leave a comment. We also welcome your suggestions to make this widget even more appealing and functional. Thank you for reading, and we hope you find this widget a valuable asset for your online presence.
Next Post Previous Post
No Comment
Add Comment
comment url
Facebook Page
প্রিমিয়াম সাজেশন গ্রুপ [9 to 12]

আপনি যদি নবম শ্রেণি থেকে দ্বাদশ শ্রেণির একজন শিক্ষার্থী হয়ে থাকেন তাহলে নিচের দেওয়া গ্রুপে জয়েন করুন। এই গ্রুপে সকল প্রিমিয়াম সাজেশন এবং নোট পেয়ে যাবেন। আশা করি আপনার পরীক্ষায় অনেক উপকার হবে।

গ্রুপ : এখানে ক্লিক করুন