{
  "title": "Google Bewertungen Widget einbinden - Technische Anleitung",
  "description": "Schritt-für-Schritt Anleitung zur Integration des SterneWidget auf beliebigen Websites",
  "steps": [
    {
      "step": 1,
      "title": "Registrierung und Widget-Erstellung",
      "description": "Erstellen Sie einen kostenlosen Account auf sterne-widget.de und legen Sie im Dashboard ein neues Widget an.",
      "action": "Navigieren Sie zu https://sterne-widget.de und klicken Sie auf 'Kostenlos registrieren'."
    },
    {
      "step": 2,
      "title": "Google Business Profil verbinden",
      "description": "Suchen Sie im Dashboard nach Ihrem Unternehmen und wählen Sie das passende Google Business Profil aus. SterneWidget ruft automatisch die Place ID ab.",
      "action": "Geben Sie den Unternehmensnamen oder die Adresse in das Suchfeld ein."
    },
    {
      "step": 3,
      "title": "Widget-Design auswählen",
      "description": "Wählen Sie eines der 4 verfügbaren Designs: Badge für Header, Compact für Sidebars, Review Slider für Landing Pages oder Minimal für dezente Integration.",
      "action": "Klicken Sie auf das gewünschte Design und passen Sie Farben und Filter an."
    },
    {
      "step": 4,
      "title": "Embed-Code kopieren",
      "description": "Nach der Konfiguration generiert SterneWidget automatisch ein Embed-Code-Snippet. Dieser Code enthält sowohl das Script-Tag als auch das Container-Element.",
      "action": "Klicken Sie auf 'Code kopieren' im Dashboard.",
      "code_example": "<div id=\"sterne-widget\" data-widget-id=\"YOUR_WIDGET_ID\"></div>\n<script src=\"https://sterne-widget.de/widget.js\" async></script>"
    },
    {
      "step": 5,
      "title": "Code auf Website einfügen",
      "description": "Fügen Sie den kopierten Code an der gewünschten Stelle in Ihre Website ein. Bei CMS-Systemen nutzen Sie HTML-Blöcke oder Custom Code Bereiche.",
      "platforms": {
        "html": "Fügen Sie den Code direkt in Ihre HTML-Datei ein.",
        "wordpress": "Verwenden Sie einen Custom HTML Block im Gutenberg Editor oder fügen Sie den Code in eine Template-Datei ein.",
        "shopify": "Navigieren Sie zu 'Online Store > Themes > Edit Code' und fügen Sie den Code in die gewünschte Liquid-Datei ein.",
        "webflow": "Fügen Sie ein Embed Element hinzu und kopieren Sie den Code in das Code-Feld.",
        "wix": "Verwenden Sie das HTML Element unter 'Mehr hinzufügen' und fügen Sie den Code ein."
      }
    },
    {
      "step": 6,
      "title": "Widget testen",
      "description": "Speichern Sie die Änderungen und laden Sie Ihre Website neu. Das Widget sollte innerhalb weniger Sekunden mit Ihren Google Bewertungen erscheinen.",
      "action": "Öffnen Sie Ihre Website im Browser und prüfen Sie die Darstellung auf Desktop und Mobilgeräten."
    }
  ],
  "technical_requirements": {
    "javascript": "Das Widget benötigt JavaScript im Browser. Es lädt asynchron und blockiert nicht das Rendering.",
    "https": "Empfohlen für Produktionsumgebungen, aber nicht zwingend erforderlich.",
    "browser_support": "Chrome 90+, Firefox 88+, Safari 14+, Edge 90+",
    "size": "Das Widget-Script ist etwa 7KB groß (minified und gzipped)."
  },
  "advanced_options": {
    "custom_css": "Im Professional-Plan können Sie Custom CSS hinzufügen, um das Widget-Design anzupassen.",
    "lazy_loading": "Das Widget unterstützt Lazy Loading. Fügen Sie das Attribut data-lazy='true' zum Container-Element hinzu.",
    "review_filtering": "Konfigurieren Sie im Dashboard Filter für Mindest-Sternebewertung oder maximale Anzahl angezeigter Bewertungen."
  },
  "troubleshooting": [
    {
      "problem": "Widget wird nicht angezeigt",
      "solution": "Prüfen Sie ob JavaScript aktiviert ist und die Widget-ID korrekt ist. Öffnen Sie die Browser-Konsole für Fehlermeldungen."
    },
    {
      "problem": "Bewertungen werden nicht geladen",
      "solution": "Stellen Sie sicher dass Ihr Google Business Profil öffentliche Bewertungen hat. Die erste Synchronisation kann bis zu 5 Minuten dauern."
    },
    {
      "problem": "Design-Konflikte mit Website-CSS",
      "solution": "Das Widget nutzt Shadow DOM für Isolation. Falls dennoch Konflikte auftreten, nutzen Sie Custom CSS im Professional-Plan."
    }
  ],
  "security_notes": [
    "Das Widget kommuniziert ausschließlich mit den SterneWidget-Servern, nicht direkt mit Google.",
    "Alle Daten werden über HTTPS übertragen.",
    "Es werden keine personenbezogenen Daten der Website-Besucher erfasst.",
    "Die Integration erfordert keine Cookies und ist DSGVO-konform."
  ],
  "last_updated": "2026-01-13"
}