💬 Feedback Widget - Пример

Это демонстрация работы виджета обратной связи. Виджет позволяет пользователям оставлять отзывы, сообщать об ошибках или предлагать улучшения.

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

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

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

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

            <script src="https://ваш-домен.com/widgets/feedback-widget.js"></script>
<feedback-widget
    position="bottom-right"
    theme="light"
    button-text="Обратная связь"
    button-icon="💬"
    endpoint="/api/feedback"
    title="Поделитесь своим мнением"
    placeholder="Что вы думаете о нашем сайте?"
    submit-button-text="Отправить"
    success-message="Спасибо! Ваше сообщение отправлено."
    show-type-selector="true"
></feedback-widget>
        

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

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

<script>
    const widget = document.getElementById('feedback-widget');
    widget.addEventListener('submit', (event) => {
        console.log('Feedback submitted:', event.detail);
        // event.detail содержит:
        // {
        //     type: 'feedback' | 'bug' | 'suggestion',
        //     message: string,
        //     email?: string,
        //     url: string,
        //     timestamp: string,
        //     userAgent: string
        // }
    });
</script>
        

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

position - позиция кнопки: "bottom-right", "bottom-left", "top-right", "top-left" (по умолчанию: "bottom-right")
theme - тема: "light" или "dark" (по умолчанию: "light")
button-text - текст на кнопке (по умолчанию: "Обратная связь")
button-icon - иконка на кнопке (по умолчанию: "💬")
endpoint - URL для отправки данных (если не указан, данные логируются в консоль)
title - заголовок модального окна (по умолчанию: "Обратная связь")
placeholder - placeholder для текстового поля (по умолчанию: "Расскажите, что вы думаете...")
submit-button-text - текст кнопки отправки (по умолчанию: "Отправить")
success-message - сообщение об успешной отправке (по умолчанию: "Спасибо за вашу обратную связь!")
show-type-selector - показывать ли выбор типа обратной связи: "true" или "false" (по умолчанию: "true")

Примеры использования:

Пример 1: Виджет в правом нижнем углу (светлая тема)

Смотрите в правом нижнем углу страницы →

Пример 2: Виджет в левом верхнем углу (темная тема)

Смотрите в левом верхнем углу страницы →

Тестирование:

Статус: Готов к работе