Sådan embedder du en Greenbow widget

Hvilke widgets gælder dette?

Denne guide gælder embeddable widgets — fx SmartCharge og Driftstatus. Checkout Return er en standalone landing-side uden loader.js og embedes ikke — den rammes direkte på sit subdomæne.

Embeddable Greenbow widgets følger den samme embed-konvention: én <div> der markerer hvor widgeten skal vises, og ét <script> der loader den.

Generelt mønster

<div data-greenbow-{slug}></div>
<script src="https://{slug}.widget.greenbow.dk/loader.js" async></script>

{slug} er widgetens unikke navn — se den enkelte widgets dokumentation for hvilke data-*-attributter den understøtter.

Hvordan virker det?

1. loader.js er en lille (~3KB) IIFE som ikke bruger nogen frameworks.
2. Når DOM er klar, finder den alle [data-greenbow-{slug}]-elementer.
3. Inde i hvert element opretter den en <iframe> der peger på den faktiske widget på https://{slug}.widget.greenbow.dk/v{n}/.
4. Iframen sender sin højde tilbage til loaderen via postMessage så den kan resize sig dynamisk.

Hvorfor en iframe?

• Ingen CSS-konflikter mellem widget og host-side
• Ingen JS-konflikter — widget kan bruge sit eget framework, sin egen Vue
• Origin-isolation — widgetens cookies, storage og scripts kan ikke nå host-sidens data
• Sandbox-flag sætter ekstra restriktioner

Hvad host-siden skal tillade

Hvis host-sidens Content Security Policy (Content-Security-Policy) er restriktiv, skal frame-src tillade widget-origin:

Content-Security-Policy: frame-src https://*.widget.greenbow.dk;

Test lokalt

Lav en HTML-fil med snippet'en og åbn den i en browser. Loaderen virker fra file://, localhost og alle https-origins.