A WhatsApp chat widget

whiskey-whatsapp.php

<?php
/**
 * Plugin Name: Whiskey WhatsApp
 * Plugin URI: https://getbutterfly.com/
 * Description: n/a
 * Version: 1.0.0
 * Author: getButterfly
 * Author URI: http://getbutterfly.com/
 * Update URI: http://getbutterfly.com
 * Requires at least: 6.0
 * Tested up to: 6.7.1
 * License: GNU General Public License v3 or later
 * License URI: https://www.gnu.org/licenses/gpl-3.0.html
 */

if ( ! defined( 'ABSPATH' ) ) {
    die;
}

function whiskey_whatsapp_widget() {
    $out = '<div class="nav-bottom">
        <div class="popup-whatsapp fadeIn">
            <div class="content-whatsapp -top">
                <i class="ai-x-small closePopup"></i>
                <p>👋 <i class="ai-face-happy"></i> How can we help you?</p>
            </div>
            <div class="content-whatsapp -bottom">
                <input class="whats-input" id="whats-in" type="text" Placeholder="Send message...">
                <span class="send-msPopup" id="send-btn">
                    <i class="ai-send"></i>
                </span>

            </div>
        </div>
        <button type="button" id="whats-openPopup" class="whatsapp-button">
            <img class="icon-whatsapp" src="https://cdn-icons-png.flaticon.com/512/134/134937.png">
        </button>
        <div class="circle-anime"></div>
    </div>';

    $out .= '<style>
    .popup-whatsapp button,
    .popup-whatsapp input,
    .popup-whatsapp textarea {
        font-family: inherit;
    }

    @keyframes pulse {
        0% {
            transform: scale(1, 1);
        }
        50% {
            opacity: 0.3;
        }
        100% {
            transform: scale(1.45);
            opacity: 0;
        }
    }
    .pulse {
        animation-name: pulse;
    }

    .nav-bottom {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        width: auto;
        height: auto;
        position: fixed;
        z-index: 8;
        bottom: 0px;
        right: 0px;
        padding: 6px;
        margin: 24px;
    }
    @media (max-width: 360px) {
        .nav-bottom {
            width: 320px;
        }
    }

    .whatsapp-button {
        display: flex;
        justify-content: center;
        align-content: center;
        width: 60px;
        height: 60px;
        z-index: 8;
        transition: 0.3s;
        margin: 10px;
        padding: 7px;
        border: none;
        outline: none;
        cursor: pointer;
        border-radius: 50%;
        background-color: white;
        box-shadow: 0 0 8px #075e5480;
    }

    .circle-anime {
        display: flex;
        position: absolute;
        justify-content: center;
        align-content: center;
        width: 60px;
        height: 60px;
        top: 15px;
        right: 15px;
        border-radius: 50%;
        transition: 0.3s;
        background-color: #77bb4a;
        animation: pulse 1.2s 4s ease infinite;
    }

    .popup-whatsapp {
        display: none;
        position: absolute;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        width: auto;
        height: auto;
        padding: 10px;
        bottom: 85px;
        right: 6px;
        transition: 0.5s;
        border-radius: 10px;
        background-color: white;
        box-shadow: 0 0 16px rgba(68, 68, 68, 0.5);
        animation: slideInRight 0.6s 0s both;
    }
    .popup-whatsapp > div {
        margin: 5px;
    }
    @media (max-width: 680px) {
        .popup-whatsapp p {
            font-size: 0.9em;
        }
    }
    .popup-whatsapp > .content-whatsapp.-top {
        display: flex;
        flex-direction: column;
    }
    .popup-whatsapp > .content-whatsapp.-top p {
        color: #585858;
        font-weight: 400;
        font-size: 1em;
    }
    .popup-whatsapp > .content-whatsapp.-bottom {
        display: flex;
        flex-direction: row;
    }

    .closePopup {
        font-size: 18px;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 28px;
        height: 28px;
        margin: 0px 0px 15px 0px;
        border-radius: 50%;
        border: none;
        outline: none;
        cursor: pointer;
        background-color: #ff5252;
    }
    .closePopup:hover {
        background-color: #b33939;
        transition: 0.3s;
    }

    .send-msPopup {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        cursor: pointer;
    }
    .send-msPopup:hover {
        color: #25d366;
    }

    .is-active-whatsapp-popup {
        display: flex;
    }

    input.whats-input[type="text"] {
        width: 250px;
        height: 40px;
        box-sizing: border-box;
        border: 0px solid #ffffff;
        border-radius: 20px;
        font-size: 1em;
        background-color: #ffffff;
        padding: 0px 0px 0px 10px;
        transition: width 0.3s ease-in-out;
        outline: none;
        transition: 0.3s;
    }
    @media (max-width: 420px) {
        input.whats-input[type="text"] {
            width: 225px;
        }
    }
    input.whats-input::placeholder {
        color: rgba(68, 68, 68, 0.705);
        opacity: 1;
    }
    input.whats-input[type="text"]:focus {
        background-color: #f8f8f8;
        transition: width 0.3s ease-in-out;
        transition: 0.3s;
    }

    .icon-whatsapp-small {
        width: 24px;
        height: 24px;
    }

    .icon-whatsapp {
        width: 45px;
        height: 45px;
    }

    .icon-font-color {
        color: #ffffff;
    }

    .icon-font-color--black {
        color: #333333;
    }
    </style>';

    $out .= '<script>
    document.addEventListener("DOMContentLoaded", function() {
        popupWhatsApp = () => {
            let btnClosePopup = document.querySelector(".closePopup");
            let btnOpenPopup = document.querySelector(".whatsapp-button");
            let popup = document.querySelector(".popup-whatsapp");
            let sendBtn = document.getElementById("send-btn");

            // Check if popup was previously closed
            const isPopupClosed = localStorage.getItem("whatsappPopupClosed");

            btnClosePopup.addEventListener("click", () => {
                popup.classList.toggle("is-active-whatsapp-popup");
                localStorage.setItem("whatsappPopupClosed", "true");
            });

            btnOpenPopup.addEventListener("click", () => {
                popup.classList.toggle("is-active-whatsapp-popup");
                popup.style.animation = "fadeIn .6s 0.0s both";
            });

            sendBtn.addEventListener("click", () => {
                let msg = document.getElementById("whats-in").value;
                let relmsg = msg.replace(/ /g, "%20");
                window.open("https://wa.me/+123456789?text=" + relmsg, "_blank");
            });

            // Only show popup after 3 seconds if it was not previously closed
            if (!isPopupClosed) {
                setTimeout(() => {
                    popup.classList.toggle("is-active-whatsapp-popup");
                }, 3000);
            }
        };

        popupWhatsApp();
    });
    </script>';

    echo $out;
}

add_action( 'wp_footer', 'whiskey_whatsapp_widget' );