Een Debaty-post op je eigen site
Sluit een losse post in met één knip-en-plak-snippet — zonder cookies, zonder tracking, en dus zonder dat je bezoekers er een cookiebanner voor hoeven weg te klikken.
Het snippet
Plak dit waar de post moet staan. De blockquote is de inhoud zelf — leesbaar voor zoekmachines, RSS-lezers en screenreaders, ook als JavaScript uit staat. Het script vervangt hem door een levende, meeschalende kaart.
<blockquote class="debaty-embed" data-debaty-post="<post-id>">
<p>De posttekst — leesbaar zonder JavaScript.</p>
<p>— Naam (@handle) · <a href="https://debaty.com/nl/bubbel/<post-id>">https://debaty.com/nl/bubbel/<post-id></a></p>
</blockquote>
<script async src="https://debaty.com/embed.js" charset="utf-8"></script>Je hoeft dit niet met de hand te bouwen: elke post heeft "Insluiten" in het deelmenu, en de code komt er kant-en-klaar uit — inclusief de posttekst in de blockquote.
Een liveblog insluiten
Naast een post kun je ook een heel liveblog insluiten: gebruik data-debaty-liveblog met het liveblog-id in plaats van data-debaty-post. De kaart toont de titel, de starter, de drie nieuwste updates en een link naar het volledige verslag, en ververst zichzelf elke dertig seconden zolang het liveblog open staat — zonder cookies en zonder verzoeken naar een derde partij. Zodra het liveblog wordt afgesloten stopt het verversen en toont de kaart de slotsamenvatting.
<blockquote class="debaty-embed" data-debaty-liveblog="<liveblog-id>">
<p><strong>De titel van het liveblog</strong></p>
<p>De intro — leesbaar zonder JavaScript.</p>
<p>— Naam (@handle) · <a href="https://debaty.com/nl/liveblog/<liveblog-id>">https://debaty.com/nl/liveblog/<liveblog-id></a></p>
</blockquote>
<script async src="https://debaty.com/embed.js" charset="utf-8"></script>Hoe het werkt
embed.js (±2 kB, geen dependencies) zoekt blockquotes met data-debaty-post en vervangt ze door een iframe naar de embed-pagina van die post. Het iframe meet zichzelf en meldt zijn hoogte via postMessage; embed.js accepteert zo'n bericht alleen van onze origin én alleen voor een iframe dat het zelf plaatste. Links in de kaart openen in een nieuw tabblad op Debaty.
Geen cookies, geen tracking
Het embed-document zet geen enkele cookie, leest geen sessie en doet geen enkel third-party-request — systeemfonts, eigen CSS, afbeeldingen alleen van onze eigen origin. Er valt dus niets te consenten: je kunt het embed plaatsen zonder cookiebanner-verplichtingen, en het werkt ook in browsers die third-party-cookies volledig blokkeren (zoals Safari).
Bouw je het iframe zelf in plaats van via embed.js? Zet er dan dit sandbox-attribuut op — meer heeft de kaart niet nodig:
<iframe src="https://debaty.com/embed/post/<post-id>"
sandbox="allow-scripts allow-same-origin allow-popups"></iframe>Thema en taal
Standaard volgt de kaart het kleurenschema van de bezoeker (licht/donker). Pin het met data-debaty-theme="light" of "dark" op de blockquote; de taal van de kaart-labels kies je met data-debaty-lang="nl" of "en".
oEmbed
Voor CMS'en en editors die oEmbed spreken (WordPress, Mastodon-achtigen, notitie-apps) is er een endpoint conform oembed.com: type rich, met het snippet in html. height is null — de hoogte is pas bekend als de content rendert; embed.js meet hem live. maxwidth wordt gerespecteerd tot ons plafond van 600.
GET /api/oembed?url=https%3A%2F%2Fdebaty.com%2Fnl%2Fbubbel%2F<post-id>&format=json{
"version": "1.0",
"type": "rich",
"provider_name": "Debaty",
"author_name": "…",
"html": "<blockquote class=\"debaty-embed\" …>…</blockquote><script async src=\"…/embed.js\"></script>",
"width": 600,
"height": null
}Elke publieke postpagina draagt de discovery-link (<link rel="alternate" type="application/json+oembed">), dus een oEmbed-consumer heeft aan de gewone permalink genoeg.
En de publisher-widget dan?
Dit zijn twee verschillende producten. Het post-embed (deze pagina) toont één bestaande Debaty-post, overal plaatsbaar, zonder registratie. De publisher-widget is een reactiepaneel onder jouw eigen artikelen: reacties van jouw lezers, met moderatiewachtrij en een domein-allowlist, beheerd via je publisher-account.
Naar de publisher-widget →