Плавающая кнопка Whatsapp

Опубликовано 12 Апрель, 2023 | Сниппеты с кодом | 1 641 просмотров

Добавьте html блок с кодом:

<style>
        /* CSS для стилизации виджета */
        .whatsapp-widget {
            position: fixed;
            bottom: 20px;
            right: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            border-radius: 50%;
            background-color: #25D366;
            width: 60px;
            height: 60px;
        }
        
        .whatsapp-widget a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            text-decoration: none;
        }
        
        .whatsapp-widget img {
            width: 32px;
            height: 32px;
        }
    </style>

    <!-- HTML структура виджета -->
    <div class="whatsapp-widget">
        <a href="https://wa.me/1234567890" target="_blank" rel="noopener noreferrer">
            <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp Logo">
        </a>
    </div>

    <script>
        // JavaScript для обработки номера телефона и текста сообщения
        const widgetLink = document.querySelector('.whatsapp-widget a');
        const phoneNumber = '1234567890'; // Замените на ваш номер телефона
        const defaultMessage = 'Здравствуйте! Я заинтересован в ваших услугах. Можете ли вы мне помочь?';

        widgetLink.href = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(defaultMessage)}`;
    </script>