<!-- Локальный код виджета -->
<script>
    window.WAWidgetConfig = {
        phone: '79998887700', // ОПЦИОНАЛЬНО: Ваш номер WhatsApp в формате 7XXXXXXXXXX (только цифры)
        message: 'Добрый день, я пишу с сайта XXXXX.', // ОПЦИОНАЛЬНО: Текст сообщения по умолчанию
        textColor: '#0a0a0a', // ОПЦИОНАЛЬНО: Цвет текста (HEX-код или название)
        textShadow: '0 1px 9px rgba(255,255,255,0.8)', // ОПЦИОНАЛЬНО: Тень текста (CSS-формат)
        iconColor: '#25D366', // ОПЦИОНАЛЬНО: Цвет кнопок (HEX-код)
        bubbleShows: 2 // ОПЦИОНАЛЬНО: Сколько раз показывать облачко на странице (число)
    };
</script>

<!-- Основная библиотека - Создайте локально на своём хостинге -->
<script src="https://ВАШдомен.Домен/whatsapp-widget-core.js"></script>

<!-- Конец - Локальный код виджета -->

<!-- Основная библиотека (удобнее убрать в локальный файл на хостинге и ссылатся на него, как и сделано выше) -->
<script>
(function() {
    // ========================================================================
    // КОНФИГУРАЦИЯ ПО УМОЛЧАНИЮ (менять не обязательно, все настройки делаются в блоке выше - локально)
    // ========================================================================
    const defaultConfig = {
        phone: '79998887700', // Номер телефона по умолчанию
        message: 'Здравствуйте! Я хочу задать вопрос.', // Сообщение по умолчанию
        textColor: 'black', // Цвет текста по умолчанию
        textShadow: '0 1px 3px white', // Тень текста по умолчанию
        iconColor: '#25D366', // Цвет кнопок по умолчанию (зеленый WhatsApp)
        bubbleShows: 2 // Количество показов облачка с текстом по умолчанию в мобильной версии
    };

    // Объединяем настройки: сначала берём значения по умолчанию, затем перезаписываем пользовательскими
    const config = window.WAWidgetConfig ? 
        {...defaultConfig, ...window.WAWidgetConfig} : 
        defaultConfig;

    // ========================================================================
    // СТИЛИ ВИДЖЕТА (не требует изменений)
    // ========================================================================
    const styles = document.createElement('style');
    styles.innerHTML = `
        /* Основной контейнер виджета */
        #waWidgetUniversal {
            position: fixed;
            left: 55px; // Отступ иконки WhatsApp слева
            bottom: 55px;  // Отступ иконки WhatsApp снизу
            z-index: 9999;
            opacity: 1;
            transition: 0.3s;
        }
        
        /* Стили иконки WhatsApp */
        .wa-main-icon-universal {
            cursor: pointer;
            position: relative;
            text-align: center;
        }
        
        /* Стили текстовых подписей */
        .wa-label-top-universal, .wa-label-bottom-universal {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            white-space: nowrap;
            text-align: center;
            color: ${config.textColor} !important; /* Используем цвет из конфига */
            text-shadow: ${config.textShadow} !important; /* Используем тень из конфига */
            transition: opacity 0.3s ease;
        }
        .wa-label-top-universal {
            top: -40px;
            width: 80px;
            white-space: normal;
            line-height: 1.2;
        }
        .wa-label-bottom-universal {
            bottom: -48px;
        }
        
        /* Стили панели управления */
        .wa-control-panel-universal {
            display: none;
            position: absolute;
            bottom: 60px;
            left: 0;
            width: 150px;
            background: white;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            opacity: 1;
        }
        .wa-actions-universal {
            display: grid;
            gap: 8px;
        }
        .wa-btn-universal {
            background: ${config.iconColor}; /* Используем цвет из конфига */
            color: white;
            border: none;
            padding: 8px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            text-align: center;
            opacity: 1;
        }
        
        /* Стили модального окна QR-кода */
        #waQRModalUniversal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            z-index: 10000;
            background: white;
            padding: 45px;
            border-radius: 12px;
            width: 450px;
            height: 480px;
            box-sizing: border-box;
            opacity: 1;
        }
        #waQRModalOverlayUniversal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: none;
            z-index: 9999;
        }
        #waQRModalCloseUniversal {
            position: absolute;
            top: -60px;
            right: -60px;
            cursor: pointer;
            font-size: 80px;
            color: white;
            line-height: 1;
            opacity: 1;
        }
        #waQRCodeUniversal {
            width: 350px;
            height: 350px;
            margin: 0 auto;
            pointer-events: none;
            background: white;
            opacity: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        #waQRModalCaptionUniversal {
            text-align: center;
            font-size: 14px;
            color: black;
            margin-top: 20px;
            opacity: 1;
        }
        
        /* Текст в панели управления */
        .wa-panel-text-universal {
            text-align: center;
            margin-bottom: 10px;
            font-size: 14px;
            color: black !important;
            text-shadow: none !important;
            opacity: 1 !important;
            transform: none !important;
        }
        .wa-panel-title-universal {
            font-weight: bold;
            font-size: 16px;
        }
        
        /* Адаптивность для мобильных */
        @media (max-width: 768px) {
            .wa-label-top-universal, 
            .wa-label-bottom-universal {
                display: block;
            }
            .wa-panel-text-universal {
                display: none;
            }
            
            /* Стили всплывающего облачка */
            .wa-bubble {
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                background: white;
                color: black !important;
                padding: 3px 12px;
                border-radius: 18px;
                box-shadow: 0 2px 8px rgba(0,0,0,0.15);
                text-align: center;
                font-size: 12px;
                line-height: 1.4;
                white-space: nowrap;
                z-index: 10;
                min-width: 120px;
                opacity: 0;
                pointer-events: none;
                margin-top: 10px;
            }
            
            .wa-bubble::before {
                content: '';
                position: absolute;
                bottom: 100%;
                left: 50%;
                transform: translateX(-50%);
                border: 8px solid transparent;
                border-bottom-color: white;
            }
            
            /* Анимация облачка */
            @keyframes bubbleFade {
                0%, 76.9% {
                    opacity: 0;
                    transform: translateX(-50%) translateY(10px);
                }
                80.8%, 92.3% {
                    opacity: 1;
                    transform: translateX(-50%) translateY(0);
                }
                96.2%, 100% {
                    opacity: 0;
                    transform: translateX(-50%) translateY(-10px);
                }
            }
        }
        
        /* Стили для десктопов */
        @media (min-width: 769px) {
            .wa-label-top-universal, 
            .wa-label-bottom-universal {
                display: none;
            }
            
            .wa-bubble {
                display: none !important;
            }
        }
    `;
    document.head.appendChild(styles);

    // ========================================================================
    // HTML-СТРУКТУРА ВИДЖЕТА (не требует изменений)
    // ========================================================================
    const widgetHTML = `
        <div id="waWidgetUniversal">
            <div class="wa-container-universal">
                <div class="wa-main-icon-universal">
                    <img src="https://aaateh.tochkadostupa.pro//all_site/files/WhatsApp.svg" 
                         width="56" height="56" alt="WhatsApp Icon">
                    <div class="wa-bubble">WhatsApp<br>Напишите нам</div>
                </div>
                <div class="wa-control-panel-universal">
                    <div class="wa-panel-text-universal wa-panel-title-universal">Напишите нам</div>
                    <div class="wa-panel-text-universal">в WhatsApp</div>
                    
                    <div class="wa-actions-universal">
                        <button class="wa-btn-universal" id="waGoUniversal">Перейти в WhatsApp</button>
                        <button class="wa-btn-universal" id="waQRUniversal">Показать QR код</button>
                    </div>
                </div>
            </div>
            <div id="waQRModalOverlayUniversal"></div>
            <div id="waQRModalUniversal">
                <span id="waQRModalCloseUniversal">&times;</span>
                <div id="waQRCodeUniversal"></div>
                <div id="waQRModalCaptionUniversal">Сканируйте, <br>чтобы открыть чат WhatsApp на телефоне.</div>
            </div>
        </div>
    `;
    document.body.insertAdjacentHTML('beforeend', widgetHTML);

    // ========================================================================
    // ОСНОВНАЯ ЛОГИКА РАБОТЫ ВИДЖЕТА (не требует изменений)
    // ========================================================================
    function initWidget() {
        const widget = document.getElementById('waWidgetUniversal');
        const qrModal = document.getElementById('waQRModalUniversal');
        const qrModalOverlay = document.getElementById('waQRModalOverlayUniversal');
        const qrModalClose = document.getElementById('waQRModalCloseUniversal');
        const controlPanel = document.querySelector('.wa-control-panel-universal');
        const bubble = document.querySelector('.wa-bubble');
        let hideTimeout = null;
        let qrCodeGenerated = false;
        let showCount = 0;

        // Генерация ссылки WhatsApp
        function generateLink() {
            const phone = config.phone.replace(/[^\d]/g, ''); // Очищаем номер от лишних символов
            const text = encodeURIComponent(config.message); // Кодируем сообщение для URL
            return `https://wa.me/${phone}?text=${text}`;
        }

        // Показ облачка с анимацией (только на мобильных)
        function showBubble() {
            if (window.innerWidth > 768) return;
            if (showCount >= config.bubbleShows) return; // Используем настройку из конфига
            
            bubble.style.animation = 'none';
            void bubble.offsetWidth; // Перезапуск анимации
            bubble.style.animation = `bubbleFade 13s forwards`;
            
            setTimeout(() => {
                showCount++;
                if (showCount < config.bubbleShows) {
                    setTimeout(showBubble, 2000);
                }
            }, 13000);
        }

        // Обработчики событий
        document.querySelector('.wa-main-icon-universal').addEventListener('click', function(e) {
            if(window.innerWidth <= 768) window.open(generateLink(), '_blank');
        });

        // Поведение на десктопах
        if(window.innerWidth > 768) {
            const mainIcon = document.querySelector('.wa-main-icon-universal');
            mainIcon.addEventListener('mouseenter', () => {
                controlPanel.style.display = 'block';
                clearTimeout(hideTimeout);
            });
            
            mainIcon.addEventListener('mouseleave', () => 
                hideTimeout = setTimeout(() => controlPanel.style.display = 'none', 500));
            
            controlPanel.addEventListener('mouseenter', () => clearTimeout(hideTimeout));
            controlPanel.addEventListener('mouseleave', () => 
                hideTimeout = setTimeout(() => controlPanel.style.display = 'none', 300));
        }

        // Кнопка "Перейти в WhatsApp"
        document.getElementById('waGoUniversal').addEventListener('click', () => 
            window.open(generateLink(), '_blank'));

        // Кнопка "Показать QR код"
        document.getElementById('waQRUniversal').addEventListener('click', () => {
            qrModalOverlay.style.display = 'block';
            qrModal.style.display = 'block';
            
            if(!qrCodeGenerated) {
                const qrLink = generateLink();
                
                // Генерация QR-кода
                const typeNumber = 0;
                const errorCorrectionLevel = 'H';
                const qr = qrcode(typeNumber, errorCorrectionLevel);
                qr.addData(qrLink);
                qr.make();
                
                // Создание SVG
                const moduleCount = qr.getModuleCount();
                const svgTag = qr.createSvgTag(1, 0);
                const container = document.createElement('div');
                container.innerHTML = svgTag;
                const svgElement = container.firstChild;
                
                // Настройка размеров
                svgElement.removeAttribute('width');
                svgElement.removeAttribute('height');
                svgElement.setAttribute('viewBox', `0 0 ${moduleCount} ${moduleCount}`);
                svgElement.style.width = '100%';
                svgElement.style.height = '100%';
                
                // Вставка в контейнер
                const qrCodeContainer = document.getElementById('waQRCodeUniversal');
                qrCodeContainer.innerHTML = '';
                qrCodeContainer.appendChild(svgElement);

                qrCodeGenerated = true;
            }
        });

        // Закрытие модального окна
        qrModalClose.addEventListener('click', () => {
            qrModal.style.display = 'none';
            qrModalOverlay.style.display = 'none';
        });

        qrModalOverlay.addEventListener('click', () => {
            qrModal.style.display = 'none';
            qrModalOverlay.style.display = 'none';
        });

        // Запускаем показ облачка (только на мобильных)
        if (window.innerWidth <= 768) {
            showBubble();
        }
        
        widget.style.display = 'block';
    }

    // Подключаем библиотеку генерации QR-кодов
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/qrcode-generator@1.5.0/qrcode.min.js';
    script.onload = initWidget;
    document.head.appendChild(script);
})();
</script>