How to Add a Popup Toast Notification Widget in Blogger

Adding a popup toast notification to your Blogger website can enhance user engagement by alerting visitors to important announcements, promotions, or calls-to-action, such as joining a WhatsApp group or Telegram etc.. . In this guide, we’ll guide you through the step-by-step process to easily add a popup toast notification widget in Blogger.

What is a Popup Toast Notification Widget?

A toast notification is a small, non-intrusive popup that appears on the screen to display alerts, updates, or social media follow prompts. Typically, toast notifications are designed to automatically disappear after a short period without any user interaction. However, in some cases, they can be customized to remain visible until the user dismisses them manually. 

Also Read: How to Add a Cookie Consent to Your Blogger Website (Responsive)

Why Add a Popup Notification to Blogger?

Popup toast notifications can boost engagement and highlight important information, like:

• Announcements (sales, promotions, or updates)
• Encouraging social media follows or shares
• Displaying special offers or discounts
• Collecting email subscriptions
• Providing important alerts (cookie consent, policy updates)

The great thing about toast notifications is that they appear and disappear subtly, meaning they don’t cause as much frustration as typical pop-up ads.

Also Read: How to Add a Floating Contact Form in Blogger

Steps to Add a Popup Toast Notification to Your Blogger Site

To add a popup toast notification to your Blogger website, follow these steps:

Step 1: Login into your Blogger account. Once you're in, navigate to the Theme section from the left sidebar to begin customizing your blog's design.

Step 2: In the Theme section, click on Edit HTML. This will let you see and change the HTML code for your blog.

Step 3: In the HTML editor, press Ctrl + F (Windows) or Cmd + F (Mac) to bring up the search function. Search for the </body> tag. This is where you’ll insert the code for the toast notification.

Step 4:  Just before the </body> tag, paste the following code:

<style>
.popup-container{position: fixed;left: 30px;bottom: 20px;background-color: #05344b;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);border-radius: 10px;padding: 20px;width: calc(100% - 1.5rem);max-width: 400px;z-index: 1000;display: none;}.e2-popup svg{width: 60px;height: 60px;background: #25D366;fill:#f8fafc;padding:8px;border-radius:8px;vertical-align: middle;}.popup-close svg{width: 24px;height: 24px;vertical-align: middle;color: #f8fafc;}.popup-close {position: absolute;top: 10px;right: 10px;cursor: pointer;}.e2-popup {display: flex;align-items: center;gap: 15px;padding: 15px;}.e2-popup p {margin-bottom: 10px;font-size: 15px;color: #f8fafc;}.join-now-btn {background-color: #25D366;color: white;border: none;padding: 8px 25px;border-radius: 32px;cursor: pointer;font-size: 16px;font-weight:600;}.join-now-btn:hover {opacity:0.8;}
@media (max-width: 680px){.popup-container {left: 50%;transform: translateX(-50%);}}
</style>

<div class="popup-container" id="whatsapp-popup">
        <div class="e2-popup">
          <div class="e2-popup-svg">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-whatsapp" viewBox="0 0 16 16">
  <path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232"/>
</svg>
          </div>
          <div class="e2-popup-button">
            <p>Join our WhatsApp group to stay updated with the latest news, offers, and updates. Don't miss out!</p>
            <a href="https://chat.whatsapp.com/your-group-link" target="_blank">
    <button class="join-now-btn">Join Now</button>
</a>
        </div>
      </div>
        <div class="popup-close" id="close-popup">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
                <line x1="18" y1="6" x2="6" y2="18"/>
                <line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
        </div>
    </div>

<script>
        function showPopup() {
            const popup = document.getElementById('whatsapp-popup');
            if (!sessionStorage.getItem('popupClosed')) {
                popup.style.display = 'block';
            }
        }
        function closePopup() {
            const popup = document.getElementById('whatsapp-popup');
            popup.style.display = 'none';
            sessionStorage.setItem('popupClosed', 'true');
        }
        document.getElementById('close-popup').addEventListener('click', closePopup);
        window.onload = showPopup;
    </script>

Step 5: After pasting the code, click Save in the top-right corner of the HTML editor to apply your changes.

You can change the SVG icon to any icon from Bootstrap Icons or Font Awesome, such as Facebook, Instagram, etc. Just update the icon code in the relevant section!{alertInfo}

Frequently Asked Questions:-

Q: Can I customize the toast notification’s position?

A: Yes! By changing the CSS, you can adjust the notification’s position to appear at the top, bottom, left, or right of the screen.

Q: Will the toast notification work on mobile devices?

A: Absolutely, The code is lightweight and designed to work across different screen sizes, including mobile devices.

Q: How do I change the message on the toast notification?

A: Simply replace the text inside the div element in the code, where it currently says "Join us!"