Hop til hovedindhold

Embed Widget

Indlejr dine publicerede apps på eksterne hjemmesider ved hjælp af embed-widget funktionen.

Oversigt​

Embed-widget giver dig mulighed for at integrere dine SyvFlows-apps direkte på andre hjemmesider. Brugere kan interagere med appen uden at forlade din hjemmeside.

Embed sektionen

Adgang​

  • Udvikler+: Kan konfigurere og administrere embed-widgets
  • Kun publicerede apps: Embed-sektionen vises kun for apps med status "Publiceret"

Embed Tokens​

For at bruge embed-widget på eksterne hjemmesider, skal du oprette et embed-token. Tokenet bruges til at autentificere dine embed-widgets.

Token administration

Opret Token​

  1. Åbn app-detaljerne for en publiceret app
  2. Udvid "Embed-widget" sektionen
  3. Klik på "Opret Token"
  4. Angiv et beskrivende navn for tokenet
  5. (Valgfrit) Tilføj tilladte domæner for ekstra sikkerhed

Opret token dialog

Token Sikkerhed​

  • Tilladte domæner: Begræns hvilke domæner der kan bruge tokenet
  • Rate limiting: Beskyt mod misbrug med automatisk hastighedsbegrænsning
  • Tilbagekald: Du kan til enhver tid deaktivere et token
Vigtigt

Gem tokenet et sikkert sted! Det vises kun én gang ved oprettelse.

Layout Indstillinger​

Vælg hvordan din widget skal vises på hjemmesiden.

Layout valgmuligheder

Vertikal Layout​

Standard layout med inputs stablet lodret. Bedst til formularer med mange felter.

Vertikal layout

Horisontal Layout​

Inputs vises side om side. Velegnet til kompakte formularer med få felter.

Horisontal layout

Kompakt Layout​

Minimalistisk visning med reduceret afstand. Perfekt til sidebar-widgets.

Kompakt layout

Tema Tilpasning​

Farvetema​

Vælg mellem lys, mørk eller automatisk tema.

Lys tilstand: Lys tema

Mørk tilstand: Mørk tema

Auto tilstand: Automatisk tilpasning baseret på brugerens systemindstillinger.

Primær Farve​

Vælg en primær farve fra foruddefinerede presets eller brug en brugerdefineret farve.

Farve presets

Foruddefinerede farver inkluderer:

  • Blå (standard)
  • Grøn
  • Lilla
  • Orange
  • Rød
  • Pink
  • Cyan
  • Indigo

Stil Indstillinger​

Tilpas udseendet af din widget med avancerede stil-indstillinger.

Stil indstillinger

Skrifttype​

Vælg mellem forskellige skrifttyper:

  • System (standard)
  • Inter
  • Roboto
  • Open Sans
  • Lato

Hjørner (Border Radius)​

Hjørne indstillinger

Juster hjørnernes afrunding:

  • Ingen: Skarpe hjørner
  • Lille: Let afrunding
  • Medium: Standard afrunding
  • Stor: Markant afrunding
  • Fuld: Maksimal afrunding

Input Stil​

Input stil

Vælg mellem:

  • Outline: Standard ramme omkring input
  • Filled: Udfyldt baggrund
  • Underline: Kun streg under input

Knap Stil​

Knap stil

Tilpas kørselsknaappen:

  • Default: Standard knap
  • Outline: Kun ramme
  • Ghost: Gennemsigtig baggrund

Skygge​

Skygge indstillinger

Tilføj dybde med skyggeeffekter:

  • Ingen: Ingen skygge
  • Lille: Subtil skygge
  • Medium: Standard skygge
  • Stor: Markant skygge

Afstand (Spacing)​

Afstand indstillinger

Juster den interne afstand:

  • Kompakt: Minimalt mellemrum
  • Normal: Standard mellemrum
  • Komfortabel: Ekstra mellemrum

Live Forhåndsvisning​

Se dine ændringer i realtid med den integrerede forhåndsvisning.

Forhåndsvisning

Lys forhåndsvisning: Forhåndsvisning lys

Mørk forhåndsvisning: Forhåndsvisning mørk

Indholdsindstillinger​

Tilpas hvilke elementer der vises i widgetten:

  • Vis titel: Vis app-navnet
  • Vis beskrivelse: Vis app-beskrivelsen
  • Vis brugervejledning: Vis hjælpetekst
  • Vis branding: Vis "Powered by SyvFlows"
  • Tekstjustering: Venstre, center eller højre

Generér Embed Kode​

Når du har konfigureret din widget, kan du generere koden til indlejring.

HTML Kode​

Kopier HTML-koden og indsæt den på din hjemmeside:

<!-- SyvFlows Embed Widget -->
<div id="syvflows-widget"></div>
<script src="https://app.syvflows.dk/embed.js"></script>
<script>
  SyvFlows.init({
    container: '#syvflows-widget',
    appId: 'DIN_APP_ID',
    token: 'DIT_EMBED_TOKEN',
    theme: {
      mode: 'light',
      primaryColor: '#3b82f6',
      fontFamily: 'system',
      borderRadius: 'md'
    },
    layout: 'vertical'
  });
</script>

React Kode​

For React-projekter, brug komponenten:

import { SyvFlowsWidget } from '@syvflows/react';

function App() {
  return (
    <SyvFlowsWidget
      appId="DIN_APP_ID"
      token="DIT_EMBED_TOKEN"
      theme={{
        mode: 'light',
        primaryColor: '#3b82f6',
        fontFamily: 'system',
        borderRadius: 'md'
      }}
      layout="vertical"
      onComplete={(result) => console.log('Resultat:', result)}
    />
  );
}

Bedste Praksis​

Sikkerhed​

  1. Brug domænebegrænsninger: Angiv altid tilladte domæner for dine tokens
  2. Roter tokens regelmæssigt: Opret nye tokens periodisk
  3. Overvåg brug: Hold øje med API-forbruget

Brugeroplevelse​

  1. Match dit tema: Tilpas farver til din hjemmesides design
  2. Test på mobile: Verificer at widgetten fungerer på alle skærmstørrelser
  3. Klar feedback: Brug loading-indikatorer og fejlmeddelelser

Performance​

  1. Lazy loading: Indlæs kun widgetten når den er synlig
  2. Caching: Brug browser-caching til hurtigere indlæsning
  3. Minimér data: Send kun nødvendige felter

Fejlfinding​

Widget indlæses ikke​

  • Tjek at tokenet er gyldigt
  • Verificer at domænet er på listen over tilladte domæner
  • Tjek browser-konsollen for fejlmeddelelser

Stilarter ser forkerte ud​

  • Tjek for CSS-konflikter med din hjemmeside
  • Brug mere specifik CSS hvis nødvendigt
  • Overvej at bruge iframe-isolation

Kørsel fejler​

  • Tjek at appen er publiceret og aktiv
  • Verificer at alle påkrævede inputs er udfyldt
  • Tjek API-kvoter og rate limits

Relaterede sider​