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 AgentBase-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: Widget-fanen 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-detaljesiden for en publiceret app
  2. Gå til fanen "Widget" (kun synlig for publicerede apps)
  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:

  • Coral (#e86c4a, standard)
  • Terracotta
  • Ocean
  • Indigo
  • Violet
  • Emerald
  • Teal
  • Amber
  • Orange
  • Rose

Stil Indstillinger​

Tilpas udseendet af din widget med avancerede stil-indstillinger.

Stil indstillinger

Skrifttype​

Vælg mellem forskellige skrifttyper:

  • System (standard)
  • Sans-serif
  • Serif
  • Monospace

Hjørner (Border Radius)​

Hjørne indstillinger

Juster hjørnernes afrunding:

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

Input Stil​

Input stil

Vælg mellem:

  • Kant: Standard ramme omkring input
  • Fyldt: Udfyldt baggrund
  • Linje: Kun streg under input

Knap Stil​

Knap stil

Tilpas kørselsknappen:

  • Fyldt: Standard knap
  • Kant: Kun ramme
  • Ghost: Gennemsigtig baggrund

Skygge​

Skygge indstillinger

Tilføj dybde med skyggeeffekter:

  • Ingen: Ingen skygge
  • Subtil: Subtil skygge
  • Medium: Standard skygge
  • Dramatisk: Markant skygge

Afstand (Spacing)​

Afstand indstillinger

Juster den interne afstand:

  • Kompakt: Minimalt mellemrum
  • Normal: Standard mellemrum
  • Afslappet: 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 beskrivelse: Vis app-beskrivelsen
  • Vis brugervejledning: Vis hjælpetekst
  • Vis branding: Vis "Bygget med AgentBase"
  • 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:

<!-- AgentBase Embed Widget -->
<div id="agentbase-widget"></div>
<script src="https://<din-agentbase-host>/embed.js"></script>
<script>
  AgentBase.mount('#agentbase-widget', {
    appId: 'DIN_APP_ID',
    token: 'DIT_EMBED_TOKEN',
    layout: 'vertical',
    theme: {
      mode: 'light',
      primary-color: '#e86c4a',
      border-radius: 'md',
      input-style: 'outline',
      button-style: 'solid',
      font-family: 'system',
      shadow: 'sm',
      spacing: 'normal',
      show-branding: true,
      show-description: true,
      show-user-manual: true,
      text-align: 'left'
    }
  });
</script>
note

embed.js serveres fra samme domæne som din AgentBase-app — erstat <din-agentbase-host> med det domæne, hvor din app kører. Den genererede kode i "Widget"-fanen indsætter automatisk den korrekte host.

React Kode​

For React-projekter monterer du widget'en med AgentBase.mount i en useEffect og rydder op med destroy. Der er ingen npm-pakke — SDK'et indlæses via embed.js-scriptet:

import { useEffect, useRef } from 'react';

// Tilføj SDK-scriptet til din HTML, eller indlæs det dynamisk
// <script src="https://<din-agentbase-host>/embed.js"></script>

function AgentBaseWidget() {
  const containerRef = useRef(null);
  const widgetRef = useRef(null);

  useEffect(() => {
    if (containerRef.current && window.AgentBase) {
      widgetRef.current = AgentBase.mount(containerRef.current, {
        appId: 'DIN_APP_ID',
        token: 'DIT_EMBED_TOKEN',
        layout: 'vertical',
        theme: {
          "mode": "light",
          "primaryColor": "#e86c4a",
          "borderRadius": "md",
          "inputStyle": "outline",
          "buttonStyle": "solid",
          "fontFamily": "system",
          "shadow": "sm",
          "spacing": "normal",
          "showBranding": true,
          "showDescription": true,
          "showUserManual": true,
          "textAlign": "left"
        },
        onExecutionComplete: (results) => {
          console.log('Kørsel færdig:', results);
        }
      });
    }

    return () => {
      widgetRef.current?.destroy();
    };
  }, []);

  return <div ref={containerRef} />;
}

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​