Embed-Widgets

Mit Embed-Widgets können Sie bestimmte Teile Ihrer Website als eigenständige Widgets auf externen Websites platzieren. Denken Sie an ein Bewertungs-Widget auf einer Partnerseite, ein Buchungsformular auf einer externen Landingpage oder Ihren Chatbot auf einem Partnerportal. Verfügbare Widgets für Embedding: • KI-Sprachagent — Sprach-Widget für Kundenkontakt • Chatbot — KI-Chat-Widget mit Gesprächsverlauf und Weiterleitung an Support • Bewertungen — Ratings und Sterne • Speisekarte — Kategorien, Artikel und Allergene • Buchungen — Termine vereinbaren • Reservierungen — Tische reservieren Jedes Widget läuft in einem sicheren, isolierten Container (Shadow DOM), der nicht mit den Stilen der Host-Website interferiert.

Jede Widget-Aktivierung verbraucht einen Widget-Slot, unabhängig davon, ob es auf Ihrer eigenen Website oder als Embed auf einer externen Domain verwendet wird. Slot-Limits pro Plan: • Starter: 5 Slots • Professional: 15 Slots • Agency: 100 Slots Mehr Slots benötigt? Upgraden Sie auf einen höheren Plan. Separate Slot-Pakete sind nicht verfügbar.

Gehen Sie zu CMS → Embed-Widgets und folgen Sie diesen Schritten: 1. Klicken Sie auf 'Widget hinzufügen' 2. Wählen Sie den Widget-Typ (z.B. Bewertungen, Buchung) 3. Wählen Sie den Zieltyp: eigene Website oder externe Domain 4. Bei externer Domain: Geben Sie die vollständige Domain ein (z.B. https://partnerseite.de) 5. Klicken Sie auf 'Aktivieren' Das System validiert die Domain (HTTPS erforderlich, keine privaten IPs) und aktiviert das Widget.

Nach der Aktivierung generieren Sie den Embed-Code: 1. Klicken Sie auf das Code-Symbol neben einem aktiven Embed 2. Kopieren Sie das Script-Snippet 3. Fügen Sie es in den HTML-Code der externen Website ein Beispiel: ```html <script src="https://widgets.your-img-cdn.com/sdk.js" data-site="IHRE_SITE_ID" data-widget="reviews" data-lang="de"></script> ``` Das Widget wird automatisch geladen und dort angezeigt, wo Sie das Script platzieren.

Embed-Widgets sind mit mehreren Schichten gesichert: • Domain-Validierung — Nur konfigurierte Domains können das Widget laden • Origin-gebundene Tokens — Kurzlebige JWT-Tokens, gebunden an Website, Widget und Domain • Rate Limiting — Maximal 60 Anfragen pro Website pro Minute, 20 pro IP pro Minute • CSP frame-ancestors — Browserschutz, der Embedding auf nicht autorisierten Domains blockiert • Shadow DOM-Isolation — Widget-Code und -Stile sind von der Host-Seite isoliert

Gehen Sie zu CMS → Embed-Widgets: 1. Klicken Sie auf das Papierkorb-Symbol neben dem Embed, das Sie entfernen möchten 2. Bestätigen Sie die Deaktivierung Das Widget hört sofort auf, auf der externen Domain zu funktionieren, und der Slot wird freigegeben.

Nachfolgend finden Sie Anleitungen zum Hinzufügen des Embed-Scripts auf jeder Website-Plattform. WordPress (klassischer oder Block-Editor): 1. Gehen Sie zur Seite, auf der das Widget erscheinen soll 2. Fügen Sie einen 'Eigenes HTML'-Block hinzu (Gutenberg) oder wechseln Sie zum Text-Editor 3. Fügen Sie das Embed-Script ein 4. Speichern und veröffentlichen Elementor: 1. Öffnen Sie die Seite in Elementor 2. Ziehen Sie das 'HTML'-Widget an die gewünschte Position 3. Fügen Sie das Embed-Script in das HTML-Feld ein 4. Klicken Sie auf 'Aktualisieren' Oxygen Builder: 1. Öffnen Sie die Seite in Oxygen 2. Fügen Sie eine 'Code Block'-Komponente hinzu 3. Wählen Sie den Tab 'HTML' oder 'Full Code' 4. Fügen Sie das Embed-Script ein 5. Speichern Webflow: 1. Fügen Sie ein 'Embed'-Element zur Seite hinzu 2. Fügen Sie das Embed-Script in das Code-Feld ein 3. Veröffentlichen Sie die Seite Squarespace: 1. Fügen Sie einen 'Code'-Block zur Seite hinzu 2. Fügen Sie das Embed-Script ein 3. Speichern und veröffentlichen Wix: 1. Klicken Sie auf 'Hinzufügen' (+) → 'Code einbetten' → 'Benutzerdefiniert' 2. Klicken Sie auf 'Code eingeben' 3. Fügen Sie das Embed-Script ein 4. Positionieren Sie das Element an der gewünschten Stelle Shopify: 1. Gehen Sie zu Online Store → Themes → 'Code bearbeiten' 2. Öffnen Sie die Template-Datei der gewünschten Seite (z.B. `page.liquid`) 3. Fügen Sie das Embed-Script an der gewünschten Position ein 4. Speichern Statische HTML-Seite: Fügen Sie das Embed-Script direkt in den `<body>` Ihrer HTML-Datei ein, wo das Widget erscheinen soll.

Pro Widget: • Voice Agent — Ein schwebender Anruf-Button unten rechts auf der Seite. Beim Klicken öffnet sich ein Gesprächspanel mit Mikrofon-, Stummschalt- und Auflegen-Tasten. Der Besucher startet eine WebRTC-Sprachverbindung mit dem KI-Telefonagenten direkt aus dem Browser (kein Telefonnummer nötig). • Chatbot — Ein schwebender Chat-Button unten rechts. Beim Klicken öffnet sich ein Chatfenster mit Nachrichtenverlauf, Markdown-Unterstützung und optionaler Weiterleitung an Support per E-Mail. Keine Anmeldung für Besucher erforderlich — funktioniert basierend auf siteId. Unterstützt E-Mail-Erfassung, Willkommensnachricht und 5 Sprachen. • Bewertungen — Durchschnittliche Punktzahl mit Sternen + Liste individueller Bewertungen (Name, Datum, Text, Sterne). • Speisekarte — Kategorien mit Artikeln, Preisen und Allergeninformationen. Inklusive Such- und Filterfunktion. • Buchungen — Ein Schritt-für-Schritt-Ablauf: Datum wählen → Zeit wählen → Daten eingeben → Bestätigung. • Reservierungen — Ähnlich wie Buchungen, aber für Restaurants: Gästeanzahl + Datum wählen → Zeit wählen → Daten eingeben → Bestätigung. Styling: Jedes Widget läuft in einem Shadow DOM-Container. Das bedeutet: • CSS der externen Website beeinflusst das Widget NICHT • Das Widget beeinflusst die externe Website NICHT • Sie können KEIN benutzerdefiniertes CSS auf die internen Elemente des Widgets anwenden Begrenzte Anpassungen über Data-Attribute: • `data-theme="light"` oder `data-theme="dark"` — zwischen hellem und dunklem Theme wechseln • `data-lang="de"` — Sprache einstellen (nl, en, de, fr, es) Das Widget verwendet automatisch die Markenfarben, die in Ihren OptimoCMS-Website-Einstellungen konfiguriert sind.