Produkt

Integrationsvejledning

Indbyg en metsa.app widget på dit website på fem minutter

I denne vejledning indlejrer du en interaktiv demo-widget på en simpel HTML-side. Når du er færdig, forstår du hvordan loader-scriptet virker, hvordan man konfigurerer widgets med data-attributter, og hvordan temaer automatisk anvendes.

Ingen konto nødvendig

Demo-widgetten kører udelukkende i din browser — ingen API-nøgle eller tilmelding krævet.

Hvad du skal bruge

  • En teksteditor
  • En webbrowser
  • Nogle få minutter

Trin 1: Opret en HTML-side

Opret en fil kaldet demo.html og indsæt følgende:

<!DOCTYPE html>
<html lang="da">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Min Widget Demo</title>
</head>
<body>
  <h1>Min Event-side</h1>

  <!-- Widgetten vises her -->

</body>
</html>

Åbn filen i din browser. Du bør se overskriften og intet andet.

Trin 2: Tilføj widgetten

Tilføj et enkelt <script>-tag, hvor du vil have widgetten til at blive vist:

<body>
  <h1>Min Event-side</h1>

  <script
    src="https://widgets.metsa.app/loader.js"
    data-widget="demo-color-picker"
  ></script>

</body>

Genindlæs siden. Et farvevælger-kort vises. Prøv at vælge en farve — hver del af widgetten opdateres øjeblikkeligt.

Det virker!

Loader-scriptet fandt sig selv, læste data-widget-attributten, hentede widget-modulet og injicerede det i en isoleret Shadow DOM-container — alt fra én linje kode.

Trin 3: Prøv mørkt tema

Tilføj en data-theme-attribut for at skifte widgetten til mørk tilstand:

<script
  src="https://widgets.metsa.app/loader.js"
  data-widget="demo-color-picker"
  data-theme="dark"
></script>

Genindlæs, og widgetten vises med en mørk palette. Fjern attributten, og den følger i stedet besøgendes systempræference.

Trin 4: Sådan virker temaer

Når du vælger en farve i demo-widgetten, kalder den deriveTheme() internt — den samme funktion som alle metsa.app widgets bruger. Fra en enkelt primærfarve og baggrund udleder systemet en hel palette: hover-tilstande, tekstfarver, kanter, succes/fejl-toner og meget mere.

Produktions-widgets (som nyhedsbrev-widgetten) modtager deres tema fra dashboardet, men mekanikken er identisk. Det du ser i demoen er præcis hvordan temaer opfører sig i produktion.

Trin 5: Se det på et rigtigt WordPress-site

Vil du se hvordan widgetten ser ud på et ægte WordPress-site? Vi har opsat en live-demo — en standard WordPress-installation med en metsa.app widget integreret via det samme ét-linje embed du netop har lært.

Åbn WordPress-demo →

Næste skridt

Klar til at indlejre en rigtig widget?

  1. Tilmeld dig på dash.metsa.app og opret en widget
  2. Kopiér embed-koden fra dit dashboard — den ser ens ud, bare med data-widget="email-collect" og din data-api-key
  3. Indsæt den på dit event-website

Mønsteret er altid det samme: ét <script>-tag, en data-widget-type, og valgfrie attributter til tilpasning.

Se vores produkter · Kontakt os