Adding a Toast Notification Popup to Your WordPress Website

In this article, we will guide you on incorporating a toast popup notification into your Blogger website. The notification popup is crafted using a combination of HTML, CSS, and JavaScript.

This feature can be seamlessly integrated into your website without causing any concern for page loading speed issues.

Utilizing this tool is an effective method to communicate important updates, special promotions, or introduce a Call To Action (CTA) button for your products or services. Such notifications play a crucial role in enhancing click-through rate (CTR) and driving conversions on your website.

Now, let’s delve into how you can effortlessly incorporate this notification popup into your Blogger website.

• Start by accessing the WordPress dashboard and navigating to the theme section.

• Before proceeding, be sure to create a backup of your current theme. Next, select the Edit HTML option from the drop-down menu.
• Locate the closing body tag in the theme code.

• Insert the provided code snippet just above the closing </body> tag.

<div class="T-container">
  <div class="T-close">X</div>
  <div class="T-icon">
    <!-- Replace below text content with your Telegram SVG icon -->
    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" 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.0,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>
  <div class="text-content">
    <h3>
      Hi, Welcome to <!-- Your Telegram Name -->. Join Our Telegram Channel to get latest updates
      <a href="<!-- Your Telegram URL -->" class="T-button">
        Join Now <span>&rarr;</span>
      </a>
    </h3>
  </div>
</div>

<style>

/* Adjust Popup Background Here */
.T-container {
  position: fixed;
  bottom: -140px;
  width: 90%;
  max-width: 720px;
  display: flex;
  align-items: center;
  background: #05344b;
  color: white;
  font-family: "system-ui", sans-serif;
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 1800ms ease;
  z-index: 90000;

}

.T-container.active {
  bottom: 20px;
}

.T-container .text-content h3 {
  color: white;
  font-size: 17px;
  font-family: system-ui;
  padding: 20px 0;
  font-weight: 500;
  line-height: 20px;
}

.T-container .text-content {
  padding: 0 24px;
  padding-right: 40px;
}

/* Adjust Button Background Here */
.T-button {
  display: inline-block;
  padding: 5px 13px;
  background-color: lightyellow;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  margin: 10px 0px 0px 0px;
  cursor: pointer;
}

.T-button span {
  margin-left: 8px;
}

/* Adjust Icon Background Here */
.T-container .T-icon {
  text-align: center;
  background-color: #0077aa;
  border-radius: 6px;
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

/* Adjust Icon Size Here */
.T-container .T-icon svg {
  fill: white;
  width: 30px;
  height: 30px;
}

.T-container .T-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

</style>

<script>
const toastContainer = document.querySelector(".T-container");
const closeBtn = document.querySelector(".T-close");
const toastLink = document.querySelector(".T-button");

const hideToastFor30Days = () => {
  const currentDate = new Date();
  const expirationDate = new Date(currentDate.getTime() + 30 * 24 * 60 * 60 * 1000); // 30 days in milliseconds
  localStorage.setItem("toastExpirationDate", expirationDate.getTime());
  toastContainer.classList.remove("active");
};

if (!localStorage.getItem("toastExpirationDate") || new Date().getTime() > localStorage.getItem("toastExpirationDate")) {
  setTimeout(() => {
    toastContainer.classList.add("active");
  }, 1000);
}

closeBtn.addEventListener("click", hideToastFor30Days);
toastLink.addEventListener("click", hideToastFor30Days);
</script>

• Customize elements such as the Call to Action Link, SVG Icon, Description, etc., as needed, and then save the theme code.
• Congratulations! The Toast Notification Popup has been successfully integrated into your WordPress website.

Additionally, you have the flexibility to display this popup on specific pages like the homepage, post page, or static pages using the WordPress Conditional Tags.

Feel free to fine-tune the appearance by adjusting the CSS code.