IRP App Store

WhatsApp for Business has become a powerful driver of ecommerce revenues by turning everyday mobile chats into high-converting sales channels.

With billions of users already comfortable using WhatsApp, Merchants can meet customers where they are - on their phones - offering real-time support, personalised product recommendations, order updates, and even seamless checkout experiences within a single conversation.

This powerful integration turns everyday messaging into measurable revenue, making it a valuable addition for IRP Merchants focused on reveneue growth and customer engagement.

Adding Script and CSS

The WhatsApp for Business app is maintained through JavaScript and CSS that is placed in specific site scripts in IRP Admin. Placing these scripts correctly will determine if the functionality is available in Mobile and Desktop.

Script Type: Models Page After Image And Add To Basket

/
// Restrict which categories show button
if ([1,2,3,4,5,6,7,8,9…].includes(pageDetails.ProductDetails.CategoryID)) {

  $(document).ready(function () {
    // Create the WhatsApp link styled as a button
    const enquireLink = document.createElement("a");
    enquireLink.textContent = "WhatsApp Us Now For More Information";
    enquireLink.target = "_blank";
    enquireLink.className = "enquire-button";

    const baseHref = "https://wa.me/XXX";

    // Function to build and update the WhatsApp href
    function updateWhatsAppLink() {
      // Get product name
      let productName = pageDetails?.PageSubTypeDetails?.Name || "";
      productName = productName.replace(/-/g, ""); // remove hyphens
      productName = productName.replace(/\s+/g, " ").trim(); // collapse spaces

      // Get stock option content
      const stockValueElement = document.querySelector(
        ".stock-options-container .title-container .title-value"
      );
      const stockValue = stockValueElement ? stockValueElement.textContent.trim() : "";

      // Build message
      let message = `I'm interested in ${productName}`;
      if (stockValue) {
        message += ` (${stockValue})`;
      }

      // Update href
      enquireLink.href = `${baseHref}?text=${encodeURIComponent(message)}`;
    }

    // Initial setup
    updateWhatsAppLink();

    // Find the reference element
    const targetElement = document.querySelector(".models-page-brand-category-links-container");
    if (targetElement && targetElement.parentNode) {
      targetElement.parentNode.insertBefore(enquireLink, targetElement);
    }

    // Update message whenever stock option changes
    $(document).on("change", ".stock-options-container select, .stock-options-container input", function () {
      updateWhatsAppLink();
    });
  });

}

/

.standard-component-container a.enquire-button{
    display: inline-block;
    padding: 12px 15px 12px 40px;
    border: 1px solid #25D366;
    text-align: center;
    color:#fff !important;
    border-radius: var(--border-radius-button);
    background-color: #25D366;
    background-image: url(/Images/icons/whatsapp-w.png);
    background-position: 10px center;
    background-repeat: no-repeat;
    background-size: 20px;
    transition: all 0.25s linear;
}

.standard-component-container a.enquire-button:hover, .standard-component-container a.enquire-button:focus{
    background-color: #075E54;
    border-color: #075E54;
    background-image: url(/Images/icons/whatsapp-w.png);
    transition: all 0.25s linear;
}

Placing the WhatsApp Icon

Use the following script and code to place the WhatsApp logo in the bottom left of the screen

Script Type: Before End Of Body Mobile Site

/

 .whatsapp-chat-button {
      position: fixed;
      bottom: 10px;
      right: 10px;
      background-color: #25D366;
      color: #ffffff;
      padding: 12px;
      border-radius: 50px;
      font-size: 14px;
      font-family: Arial, sans-serif;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      transition: all 0.3s ease;
      z-index: 9999;
      box-sizing: border-box;
    }

    .whatsapp-chat-button:hover {
      background-color: #075E54;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    }

    .whatsapp-icon {
      width: 26px;
      height: 26px;
      fill: #fff;
    }

/