Websitene Whatsapp Butonu Ekle

Question

Css Kısmı

<style>

        #whatsappButton {

            position: fixed;

            bottom: 20px;

            left: 20px;

            background-color: #25d366;

            color: #fff;

            padding: 10px;

            border: none;

            border-radius: 50%;

            cursor: pointer;

            font-size: 16px;

            z-index: 9999; /* Yüksek bir z-index değeri belirleyerek en üstte olmasını sağlar */

        }

        #whatsappButton img {

            width: 32px; /* Resmin genişliğini ve yüksekliğini ihtiyaca göre ayarlayabilirsiniz */

            height: auto; /* Otomatik yükseklik ayarı */

        }

        #whatsappButton:hover{

        background-color: #98e794;

        }

</style>

Js Kısmı

<script>

    // WhatsApp numarasını aşağıdaki gibi güncelleyin

    var whatsappNumarasi = "+90123456789";

    var message = "Merhaba! Ürünleriniz Hakkında Bilgi Almak İstiyorum.";

    // WhatsApp butonu oluşturuluyor

    var whatsappButton = document.createElement("button");

    // Resmin yolunu ve adını aşağıdaki gibi güncelleyin

    var imagePath = "https://cdn-icons-png.flaticon.com/64/1384/1384023.png";

    var imageAlt = "WhatsApp";

    // Resmi butona ekleyin

    whatsappButton.innerHTML = '<img src="' + imagePath + '" alt="' + imageAlt + '">';

    whatsappButton.id = "whatsappButton";

// WhatsApp butonu tıklandığında yönlendirme gerçekleşiyor

    whatsappButton.addEventListener("click", function () {

        window.location.href = "https://api.whatsapp.com/send?phone=" + whatsappNumarasi+ "&text=" + encodeURIComponent(message);

    });

    // Sayfanın en üst katmanına WhatsApp butonunu ekliyor

    document.body.insertBefore(whatsappButton, document.body.firstChild);

</script>