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ørk tilstand

Demo-widgetten har sine egne Light-/Dark-knapper. Klik på Dark, og hele paletten udledes på ny til en mørk baggrund: hover-tilstande, kanter, tekstfarver og succes-/fejlfarver.

Bemærk at der ikke er nogen tema-attribut på script-tagget. Loaderen sender kun det videre, som en widget skal bruge for at nå api’et (data-api-key, data-api-url, data-event-id, data-lang og et par stykker mere), og en produktions-widget henter sit udseende fra konfigurationen i dit dashboard, ikke fra dit embed.

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 de attributter widgetten skal bruge, din data-api-key plus, for en event-widget, dens data-event-id.

Se vores produkter · Kontakt os