Widget Integration Guide

Kom i gang med SmartAgent på dit website på 5 minutter

1Quick Start

1. Opret din agent

Log ind på SmartAgent.dk og opret en ny agent i dit dashboard. Vælg den type agent der passer til dit behov:

Kundeservice - Besvarer kundehenvendelser 24/7
Salg - Hjælper med produktvalg og tilbud
Booking - Håndterer tidsbestillinger

2. Hent din embed kode

Gå til din agents indstillinger og find Widget Integration sektionen. Kopier embed koden.

3. Indsæt koden på dit website

Indsæt embed koden i din HTML fil, lige før </body> tagget:

<!-- Indsæt lige før </body> -->
<script src="https://smartagent.dk/widget/smartagent-widget.js"></script>
<script>
  SmartAgent.init({
    agentId: 'din-agent-id',
    apiKey: 'din-api-nøgle'
  });
</script>
</body>

✅ Færdig!

Din chat widget vises nu på dit website.

2Widget Konfiguration

Tilpas udseende

I agent indstillingerne kan du tilpasse:

Primær farve - Match din brand farve
Position - Nederst til højre eller venstre
Velkomstbesked - Første besked brugeren ser

Eksempel: Custom farve

Du kan også tilpasse widgetten via konfiguration:

<script>
  SmartAgent.init({
    agentId: 'din-agent-id',
    apiKey: 'din-api-nøgle',
    primaryColor: '#ff6b6b',  // Custom farve
    position: 'bottom-left',   // Venstre hjørne
    welcomeMessage: 'Hej! Hvad kan jeg hjælpe med?'
  });
</script>

3Sikkerhed

API Nøgle Sikkerhed

⚠️ Vigtigt!

Din API nøgle er synlig i kildekoden. Dette er normalt, da den kun giver adgang til at sende beskeder til din agent.

Brug domæne whitelist for ekstra sikkerhed:

Domæne Whitelist

Begræns hvilke websites der må bruge din widget:

Gå til agent indstillinger → Widget Integration
Find "Tilladte Domæner" sektionen
Tilføj dine domæner (f.eks. example.com)
Brug *.example.com for alle subdomæner

Regenerer API Nøgle

Hvis din nøgle bliver kompromitteret, kan du regenerere den i agent indstillingerne. Husk at opdatere embed koden på alle dine websites efter regenerering.

4Avanceret

Widget Events

Lyt til widget events i din kode:

<script>
  // Widget er klar
  window.addEventListener('smartagent:ready', function() {
    console.log('SmartAgent widget er klar');
  });

  // Ny besked modtaget
  window.addEventListener('smartagent:message', function(e) {
    console.log('Besked:', e.detail.message);
  });

  // Widget åbnet/lukket
  window.addEventListener('smartagent:toggle', function(e) {
    console.log('Widget status:', e.detail.open);
  });
</script>

Programmatisk Kontrol

Styr widgetten fra din JavaScript kode:

<script>
  // Åbn widget
  SmartAgent.open();

  // Luk widget
  SmartAgent.close();

  // Send besked programmatisk
  SmartAgent.sendMessage('Hej, jeg vil gerne have hjælp');

  // Nulstil samtale
  SmartAgent.reset();
</script>

Custom Metadata

Send ekstra information med samtaler:

<script>
  SmartAgent.init({
    agentId: 'din-agent-id',
    apiKey: 'din-api-nøgle',
    metadata: {
      userId: '12345',
      planType: 'premium',
      customField: 'værdi'
    }
  });
</script>

Test & Fejlfinding

Test lokalt

Opret en simpel HTML fil for at teste widgetten:

<!DOCTYPE html>
<html>
<head>
  <title>SmartAgent Test</title>
</head>
<body>
  <h1>Test Side</h1>
  <p>SmartAgent widget burde vises nederst til højre.</p>

  <!-- SmartAgent Widget -->
  <script src="https://smartagent.dk/widget/smartagent-widget.js"></script>
  <script>
    SmartAgent.init({
      agentId: 'din-agent-id',
      apiKey: 'din-api-nøgle'
    });
  </script>
</body>
</html>

Almindelige Problemer

Widget vises ikke

Tjek at script tagget er før </body>
Åbn browser console (F12) for fejlbeskeder
Verificer at agentId og apiKey er korrekte

Fejl: "Dette domæne er ikke autoriseret"

Tilføj dit domæne til whitelist i agent indstillinger
Eller fjern alle domæner for at tillade alle

Beskeder sendes ikke

Tjek at agenten er aktiv i dashboard
Verificer API nøglen er korrekt
Se browser console for fejlbeskeder

Brug for hjælp?

Hvis du har spørgsmål eller problemer med integrationen, er du velkommen til at kontakte os.

Gå til Dashboard Kontakt Support