# FeedbackHub auf unserer Seite finden Sie das widget unten rechts
Ein modernes Feedback-Widget-System ähnlich Facebook/Google Reviews – vollständig in deine Website integrierbar.
## Features
**Bewertungs-Modi:**
- ⭐ Sterne (1-5)
- 😀😐😞 Emoji-Skala
- 🏷️ Kategorien (Service, Qualität, Speed)
- 💬 Freitext-Kommentar
**Widget-Optionen:**
- 💬 Floating Button (unten rechts/links)
- 📌 Fest eingebettet (div mit ID)
- 📱 Voll responsive & mobile-optimiert
- 📊 Live-Durchschnitt anzeigen
**Dashboard:**
- Mehrere Websites verwalten
- Widget-Code-Generator
- Statistiken pro Site
- API-Key Management
## Installation
### 1. Dateien hochladen
Alle Dateien in ein Verzeichnis auf dem Webserver, z.B. `/feedbackhub/`.
### 2. Installation starten
```
https://deine-domain.de/feedbackhub/install.php
```
Eingeben:
- Datenbank Host (meist `localhost`)
- Datenbank Name (wird automatisch angelegt)
- Datenbank User & Passwort
- Site URL (z.B. `https://deine-domain.de/feedbackhub`)
Die `install.php` erstellt:
- Datenbank & Tabellen
- `config.php` mit deinen Einstellungen
**WICHTIG:** Nach erfolgreicher Installation `install.php` löschen!
### 3. Registrieren & einloggen
```
https://deine-domain.de/feedbackhub/register.php
```
### 4. Website hinzufügen
Im Dashboard:
- **Website Name** eingeben
- **Domain** der Website (z.B. `https://meine-seite.de`)
- **Widget-Typ** wählen:
- **Float:** Schwebendes Icon unten rechts/links
- **Embed:** Fest eingebettet in einem Div
- **Farbe** anpassen
- **Position** wählen (nur bei Float)
### 5. Code einbinden
**Floating Button:**
```html
<!-- Vor </body> einfügen -->
<script src=\"https://deine-domain.de/feedbackhub/widget.js\"
data-fh-site=\"SITE_ID\"
data-fh-key=\"API_KEY\"
data-fh-type=\"float\"
data-fh-color=\"#6366f1\"
data-fh-position=\"bottom-right\">
</script>
```
**Eingebettet:**
```html
<!-- Wo das Widget erscheinen soll -->
<div id=\"feedbackhub\"></div>
<!-- Vor </body> einfügen -->
<script src=\"https://deine-domain.de/feedbackhub/widget.js\"
data-fh-site=\"SITE_ID\"
data-fh-key=\"API_KEY\"
data-fh-type=\"embed\"
data-fh-color=\"#6366f1\">
</script>
```
Den fertigen Code bekommst du im Dashboard mit einem Klick auf **\"📋 Code\"**.
## Attribute erklärt
| Attribut | Wert | Beschreibung |
|---|---|---|
| `data-fh-site` | `123` | Site-ID (aus Dashboard) |
| `data-fh-key` | `abc123...` | Dein API-Key (aus Dashboard) |
| `data-fh-type` | `float` oder `embed` | Widget-Typ |
| `data-fh-color` | `#6366f1` | Primärfarbe des Widgets |
| `data-fh-position` | `bottom-right` oder `bottom-left` | Position (nur bei Float) |
## Funktionen
### Besucher-Ansicht
1. **Floating Button** erscheint unten rechts/links
2. Klick öffnet Modal mit 4 Tabs:
- ⭐ **Sterne:** 1-5 Sterne vergeben
- 😀 **Emoji:** Happy, Neutral, Sad wählen
- 📊 **Kategorien:** Service, Qualität, Speed bewerten (1-5)
- 💬 **Kommentar:** Freitext-Feedback (max. 500 Zeichen)
3. Nach Absenden: Danke-Seite mit Live-Stats
### Dashboard
- **Übersicht:** Alle Websites mit Stats (Bewertungen, Ø Sterne, Ø Kategorien, Emoji-Verteilung)
- **Widget-Code:** Per Klick generieren & kopieren
- **API-Key:** Sichtbar im Dashboard (bei Verlust neu generieren)
### Duplicate Prevention
- IP-basiert: Jede IP kann nur 1x pro Tag bewerten
- Hash: `SHA256(IP + Site-ID + Datum)`
## Technische Details
**Stack:**
- PHP 8.0+
- MySQL / MariaDB
- Vanilla JavaScript (kein jQuery)
- CSS3 Animations
**Tabellen:**
- `fh_users` – Registrierte User
- `fh_sites` – Websites mit Widget-Config
- `fh_ratings` – Alle Bewertungen
**API Endpoints:**
- `POST /api.php` → `action: submit` (Bewertung senden)
- `POST /api.php` → `action: stats` (Live-Stats laden)
## Design
**Aesthetic:** Cyber-Modern mit Neon-Akzenten
- Fonts: Syne (Headings), Work Sans (Body)
- Colors: Cyan-Türkis Primary (#00d9ff), Pink Accent (#ff00aa)
- Dark Background mit Radial Gradient
- Smooth Animations & Transitions
## Sicherheit
✓ Password Hashing (bcrypt)
✓ CSRF-Protection (Session-based)
✓ SQL Injection Prevention (Prepared Statements)
✓ XSS Protection (htmlspecialchars auf allen Outputs)
✓ IP-basierter Duplicate Check
✓ User-Agent Logging (max. 300 Zeichen)
## Anpassungen
**Widget-Farbe ändern:**
```html
data-fh-color=\"#ff0066\"
```
**Widget-Position ändern:**
```html
data-fh-position=\"bottom-left\"
```
**CSS überschreiben:**
```css
/* Eigenes CSS nach dem Widget-Script */
.fh-btn { width: 64px !important; height: 64px !important; }
.fh-title { color: #ff0066 !important; }
```
## Lizenz
Privates Projekt – alle Rechte vorbehalten.
