Terug naar overzicht
Embed Widgets
Plaats widgets van je website als embed op externe domeinen. Beheer widget-slots en configureer toegestane domeinen.
Wat zijn Embed Widgets?
Embed Widgets stellen je in staat om bepaalde onderdelen van je website als standalone widget te plaatsen op externe websites. Denk aan een reviews-widget op een partnersite, een boekingsformulier op een externe landingspagina, of je chatbot op een partnerportaal.
Beschikbare widgets voor embedding:
• AI Telefoonagent — Spraakwidget voor klantcontact
• Chatbot — AI chatwidget met gesprekshistorie en doorsturen naar support
• Reviews — Beoordelingen en sterren
• Menukaart — Categorieën, items en allergenen
• Boekingen — Afspraken inplannen
• Reserveringen — Tafels reserveren
Elke widget draait in een beveiligde, geïsoleerde container (Shadow DOM) die niet interfereert met de stijlen van de hostwebsite.
Widget-slots
Elke activatie van een widget verbruikt één widget-slot, ongeacht of het op je eigen site of als embed op een extern domein wordt gebruikt.
Slot-limieten per plan:
• Starter: 5 slots
• Professional: 15 slots
• Agency: 100 slots
Wil je meer slots? Upgrade naar een hoger plan. Er zijn geen losse slot-pakketten beschikbaar.
Tips
- Bekijk je huidige slotgebruik via CMS → Embed Widgets.
- Deactiveer ongebruikte widgets om slots vrij te maken.
Een embed activeren
Ga naar CMS → Embed Widgets en volg deze stappen:
1. Klik op 'Widget toevoegen'
2. Kies het widgettype (bijv. Reviews, Booking)
3. Kies het doeltype: eigen site of extern domein
4. Bij extern domein: voer het volledige domein in (bijv. https://partnersite.nl)
5. Klik op 'Activeren'
Het systeem valideert het domein (HTTPS vereist, geen privé IP's) en activeert de widget.
Tips
- Je kunt maximaal 20 toegestane domeinen per site configureren.
- Alleen HTTPS-domeinen zijn toegestaan voor embedding.
Let op
- Zorg dat het domein exact overeenkomt met waar je de widget plaatst. Een verkeerd domein blokkeert de widget.
Embed-code genereren
Na activatie genereer je de embed-code:
1. Klik op het code-icoon naast een actieve embed
2. Kopieer het script-fragment
3. Plak het in de HTML van de externe website
Voorbeeld:
```html
<script src="https://widgets.your-img-cdn.com/sdk.js"
data-site="JOUW_SITE_ID"
data-widget="reviews"
data-lang="nl"></script>
```
De widget wordt automatisch geladen en getoond op de plek waar je het script plaatst.
Tips
- Je kunt de taal instellen via data-lang (nl, en, de, fr, es).
- De widget past zich automatisch aan de breedte van de container aan.
Beveiliging
Embed Widgets zijn beveiligd met meerdere lagen:
• Domeinvalidatie — Alleen geconfigureerde domeinen kunnen de widget laden
• Origin-gebonden tokens — Korte-levensduur JWT tokens die gebonden zijn aan site, widget en domein
• Rate limiting — Maximaal 60 verzoeken per site per minuut, 20 per IP per minuut
• CSP frame-ancestors — Browserbescherming die embedding op ongeautoriseerde domeinen blokkeert
• Shadow DOM isolatie — Widget-code en -stijlen zijn geïsoleerd van de hostpagina
Let op
- Verwijder ongebruikte domeinen uit je configuratie om misbruik te voorkomen.
- Deel je embed-code niet publiek — hoewel de beveiliging domeingebonden is, is het beter om de code alleen te verstrekken aan vertrouwde partners.
Een embed deactiveren
Ga naar CMS → Embed Widgets:
1. Klik op het prullenbak-icoon naast de embed die je wilt verwijderen
2. Bevestig de deactivatie
De widget stopt direct met werken op het externe domein en het slot wordt vrijgegeven.
Tips
- Na deactivatie wordt de widget niet meer geladen, zelfs als het script nog op de externe site staat.
Installatie per platform
Hieronder staat per website-platform hoe je het embed-script toevoegt.
WordPress (klassieke editor of blok-editor):
1. Ga naar de pagina waar je de widget wilt plaatsen
2. Voeg een 'Custom HTML'-blok toe (Gutenberg) of schakel naar de tekst-editor
3. Plak het embed-script
4. Sla op en publiceer
Elementor:
1. Open de pagina in Elementor
2. Sleep het 'HTML'-widget naar de gewenste positie
3. Plak het embed-script in het HTML-veld
4. Klik op 'Bijwerken'
Oxygen Builder:
1. Open de pagina in Oxygen
2. Voeg een 'Code Block' component toe
3. Kies de tab 'HTML' of 'Full Code'
4. Plak het embed-script
5. Sla op
Webflow:
1. Voeg een 'Embed' element toe aan de pagina
2. Plak het embed-script in het code-veld
3. Publiceer de site
Squarespace:
1. Voeg een 'Code'-blok toe aan de pagina
2. Plak het embed-script
3. Sla op en publiceer
Wix:
1. Klik op 'Toevoegen' (+) → 'Embed code' → 'Custom embed'
2. Klik op 'Code invoeren'
3. Plak het embed-script
4. Positioneer het element op de gewenste plek
Shopify:
1. Ga naar Online Store → Themes → 'Edit code'
2. Open het template-bestand van de gewenste pagina (bijv. `page.liquid`)
3. Plak het embed-script op de gewenste positie
4. Sla op
Statische HTML-site:
Plak het embed-script direct in de `<body>` van je HTML-bestand op de plek waar je de widget wilt tonen.
Tips
- Het script mag overal in de <body> staan — de widget verschijnt op die exacte positie (behalve Voice Agent en Chatbot, die zweven rechtsonder).
- Je hoeft GEEN extra CSS of JavaScript toe te voegen. Het script laadt alles automatisch.
- Test altijd op een staging/preview-omgeving voordat je publiceert.
Let op
- Plaats het script NIET in de <head> — het heeft een zichtbaar element nodig en moet in de <body> staan.
- Sommige platforms (zoals Wix) cachen pagina's agressief. Na het toevoegen van het script kan het even duren voordat de widget zichtbaar is.
Wat elke widget toont & styling
Per widget:
• Voice Agent — Een zwevende bel-knop rechtsonder op de pagina. Bij klikken opent een gesprekspaneel met microfoon-, mute- en ophang-knop. De bezoeker start een WebRTC-spraakverbinding met de AI Telefoonagent direct vanuit de browser (geen telefoonnummer nodig).
• Chatbot — Een zwevende chatknop rechtsonder. Bij klikken opent een chatvenster met berichtgeschiedenis, markdown-ondersteuning en optioneel doorsturen naar support via e-mail. Geen inloggen vereist voor bezoekers — werkt op basis van siteId. Ondersteunt e-mailcapture, welkomstbericht en 5 talen.
• Reviews — Gemiddelde score met sterren + lijst van individuele beoordelingen (naam, datum, tekst, sterren).
• Menu — Categorieën met items, prijzen en allergeneninformatie. Inclusief zoek- en filterfunctie.
• Booking — Een stappenflow: kies datum → kies tijd → vul gegevens in → bevestiging.
• Reservation — Vergelijkbaar met booking maar voor restaurants: kies aantal gasten + datum → kies tijd → vul gegevens in → bevestiging.
Styling:
Elke widget draait in een Shadow DOM-container. Dit betekent:
• CSS van de externe website beïnvloedt de widget NIET
• De widget beïnvloedt de externe website NIET
• Je kunt GEEN custom CSS toepassen op de interne elementen van de widget
Beperkte aanpassingen via data-attributen:
• `data-theme="light"` of `data-theme="dark"` — schakel tussen licht en donker thema
• `data-lang="nl"` — stel de taal in (nl, en, de, fr, es)
De widget gebruikt automatisch de huisstijlkleuren die in je OptimoCMS site-instellingen zijn geconfigureerd.
Tips
- Voice Agent en Chatbot zweven altijd rechtsonder, ongeacht waar je het script plaatst op de pagina.
- De andere widgets (reviews, menu, booking, reservation) worden inline getoond op de positie van het script.
- De Chatbot haalt automatisch je chatbot-instellingen op (welkomstbericht, kleur, naam) uit het CMS.
- De Shadow DOM-isolatie voorkomt dat conflicten ontstaan met je bestaande thema of CSS.