🍪 Cookie Consent Widget - Пример

Это демонстрация работы виджета согласия на использование cookies.

Как встроить на ваш сайт:

1. Простое подключение

            <!-- Добавьте перед закрывающим тегом </body> -->
<script src="https://ваш-домен.com/widgets/cookie-consent-widget.js"></script>
<cookie-consent-widget></cookie-consent-widget>
        

2. С настройками через атрибуты

            <script src="https://ваш-домен.com/widgets/cookie-consent-widget.js"></script>
<cookie-consent-widget
    theme="light"
    position="bottom"
    text="Мы используем cookies для улучшения работы сайта..."
    accept-button-text="Согласен"
    privacy-policy-url="/privacy"
    privacy-policy-text="Политику конфиденциальности"
></cookie-consent-widget>
        

3. С обработкой событий

            <script src="https://ваш-домен.com/widgets/cookie-consent-widget.js"></script>
<cookie-consent-widget id="cookie-widget"></cookie-consent-widget>

<script>
    const widget = document.getElementById('cookie-widget');
    widget.addEventListener('accept', () => {
        console.log('Пользователь принял cookies!');
        // Здесь можно инициализировать аналитику
        // Например: gtag('consent', 'update', { 'analytics_storage': 'granted' });
    });
</script>
        

Доступные атрибуты:

theme - тема: "light" или "dark" (по умолчанию: "light")
position - позиция: "bottom" или "top" (по умолчанию: "bottom")
text - текст сообщения
accept-button-text - текст кнопки (по умолчанию: "Принять")

privacy-policy-url

privacy-policy-text - текст ссылки на политику

🎛️ Интерактивное тестирование:

Настройки виджета

Тема (theme):

Позиция (position):

Текст сообщения (text):

Текст кнопки (accept-button-text):

URL политики конфиденциальности (privacy-policy-url):

Текст ссылки на политику (privacy-policy-text):

Управление согласием:

Статус: Загрузка...

📋 Примеры конфигураций:

Минимальная конфигурация

<cookie-consent-widget></cookie-consent-widget>

Темная тема, сверху

                    <cookie-consent-widget
    theme="dark"
    position="top"
></cookie-consent-widget>
                

С кастомным текстом

                    <cookie-consent-widget
    text="Мы используем cookies для улучшения работы сайта"
    accept-button-text="Понятно"
></cookie-consent-widget>
                

Без политики конфиденциальности

                    <cookie-consent-widget
    theme="light"
    position="bottom"
    text="Принимаете ли вы cookies?"
    accept-button-text="Да, принимаю"
></cookie-consent-widget>
                