Javascript API

Brug Javascript API'en til kontaktidentitetsverifikation (forudautentificering) og til at interagere med Herodesk live chat

Written by Anders Eiler
Last updated 2026-03-19
På denne side

Kontaktidentitetsverifikation (Forudautentificering)

Forudautentificering lader dig automatisk logge dine allerede indloggede brugere ind i live chat-widgetten, så de ikke behøver at indtaste deres navn og e-mail manuelt.

Sådan fungerer det

  1. Din server kalder Herodesk API'et for at generere en sikker hash for kontakten
  2. Din frontend sender hashen (sammen med kontaktens oplysninger) til chat-widgetten
  3. Widgetten verificerer tokenet og logger kontakten ind automatisk

Trin 1: Generer Hashen (Server-side)

Foretag en GET-anmodning til Herodesk API'et fra din backend:

GET https://api.herodesk.io/v1/contacts/chat-auth-token?email=john@example.com
Authorization: Bearer YOUR_API_KEY

Bemærk: Se https://api.herodesk.io/#/Contacts/contacts_chat_auth_token for API-detaljer.

Svar:
{
  "contact_id": 123,
  "email": "john@example.com",
  "name": "John Doe",
  "auth_token": "a1b2c3d4e5f6..."
}

Du kan også slå op via id i stedet for e-mail:

GET https://api.herodesk.io/v1/contacts/chat-auth-token?id=123
Authorization: Bearer YOUR_API_KEY

**Vigtigt:** Udsæt aldrig din API-nøgle på frontend. Generer altid auth-tokenet på din server.

Ydeevne: Sessionscaching

Widgetten cacher automatisk kontaktens identitet i browsercookies efter den første succesfulde identifikation. Ved efterfølgende sideindlæsninger (eller SPA-navigationer), hvis samme e-mail sendes via boot, springer widgetten helt over identify API-kaldet og bruger den cachede session.

Sådan fungerer det

  1. Første besøg: API kaldes → cookies sættes
  2. Efterfølgende besøg: E-mail-hash sammenlignes med cachet hash → API-kald springes over

Cookie-lagring

  • herodesk_contact_identified - Hashet e-mail-fingeraftryk (365 dage)
  • herodesk-chat-contact_uuid - Kontakt UUID (365 dage)
  • herodesk_contact_verified - Verifikationstoken (365 dage)

Når API-kald foretages

1. ✅ Første besøg (ingen cookies)
Kontakten besøger for første gang (ingen cachet session)

2. ✅ E-mail ændret (forældede cookies ryddet)
E-mailadressen ændres mellem sideindlæsninger (forældede cookies ryddes automatisk)

3. ✅ Cookies udløbet (browseroprydning)
Cookies er udløbet eller blevet ryddet af browseren

4. ❌ Samme e-mail inden for cookie-livstid → Intet API-kald

Bemærk: Det betyder, at du trygt kan kalde Herodesk('boot', {...}) på hver side uden at bekymre dig om overflødige API-forespørgsler eller ydelsespåvirkning.

Javascript API-metoder

Herodesk-funktionen tilbyder metoder til at styre widgetten programmatisk og lytte til events. Kald disse efter widget-scriptet er indlæst.

Status-egenskaber

Herodesk-objektet eksponerer skrivebeskyttede status-egenskaber, der afspejler den aktuelle widget-status:

EgenskabTypeBeskrivelse
Herodesk.isBootedBooltrue efter at boot-kommandoen er behandlet med gyldige parametre
Herodesk.isReadyBooltrue når widgetten er fuldt indlæst og klar til at modtage kommandoer
Herodesk.isVisibleBoolTrue når chat-panelet er åbent, false når lukket

Eksempel:

// Tjek om widgetten er klar før visning
if (Herodesk.isReady && !Herodesk.isVisible) {
 Herodesk('show');
}

Bemærk: Status-egenskaber opdateres automatisk. isVisible synkroniseres både med programmatiske kald (show/hide) og brugerinteraktioner (klik på launcher-ikon eller luk-knap).

Herodesk('boot', {});

Brug den globale Herodesk-funktion til at starte widgetten med kontaktens oplysninger. Placer dette før Herodesk chat-scriptet indlæses:

<script>
 // Kø-stub — skal placeres før widget-scriptet
 // Hvorfor bruger vi Kø-stub? Fordi widgetten aldrig går igennem en "først anonym, 
 // så identificeret" overgang. Den starter med korrekt identitet fra første frame.
 window.Herodesk = window.Herodesk || function() {
   (window.Herodesk.q = window.Herodesk.q || []).push(arguments);
 };


 // Start med kontaktoplysninger og auth token fra Trin 1
 Herodesk('boot', {
   email: "john@example.com",
   firstname: "John",
   lastname: "Doe",
   auth_token: "a1b2c3d4e5f6..."  // auth_token fra Trin 1
 });
</script>


<!-- Indlæs Herodesk chat-widget EFTER at HerodeskSettings er sat -->
<script src="https://cdn.herodesk.io/livechat.js?wid=YOUR_WIDGET_ID"></script>

Boot-parametre

ParameterTypePåkrævetBeskrivelse
emailStringJaKontaktens e-mailadresse
firstnameStringNejKontaktens fornavn
lastnameStringNejKontaktens efternavn
auth_tokenStringNej*HMAC-SHA256 auth token fra API'et (se ovenfor)
messageStringNejForudfyld chat-input med en besked
languageStringNejOverskriver sprog fra besøgendes browser. Sæt fx: da-DK
z_indexStringNejBrugerdefineret z-index for widget iframe (standard: auto)

* Hvis auth_token udelades eller er ugyldig, vil kontakten ikke blive verificeret automatisk. De vil i stedet gennemgå standard e-mail verifikationsflow.

Forudfyldning af en besked

Du kan forudfylde chat-inputfeltet med forudautentificering:

<script src="https://cdn.herodesk.io/livechat.js?wid=YOUR_WIDGET_ID"></script>
<script>
 Herodesk('boot', {
   email: "john@example.com",
   firstname: "John",
   auth_token: "a1b2c3d4e5f6...",
   message: "Jeg har brug for hjælp med ordre #12345"
 });
</script>

Brugerdefineret z-index

<script src="https://cdn.herodesk.io/livechat.js?wid=YOUR_WIDGET_ID"></script>
<script>
 Herodesk('boot', {
   z_index: 500
 });
</script>

Herodesk('show');

Åbner chat-widgetten programmatisk.

Herodesk('show');

Herodesk('hide');

Lukker chat-widgetten programmatisk.

Herodesk('hide');

Herodesk('showConversation', id);

Åbner en specifik samtale via dens ID. Samtalen skal tilhøre den aktuelle kontakt.

Herodesk('showConversation', 231);

Bemærk: Denne metode virker kun efter widgetten er indlæst og kontakten er identificeret. Samtale-ID'et skal tilhøre den aktuelle kontakt — forsøg på at åbne en anden kontakts samtale vil blive afvist.

Herodesk('setLanguage', language);

Skift sproget i live chat efter indlæsning. Dette genindlæser livechatten.

Herodesk('showConversation', 'da-DK');

Herodesk('prefillMessage', message);

Indsæt tekst i chat-input på en allerede indlæst widget.

Herodesk('prefillMessage', 'Hvor meget koster forsendelse?');

Herodesk('hideButton');

Skjuler live chat launcher-knappen. Brug dette, hvis du vil bygge din egen brugerdefinerede launcher-knap (for eksempel for at matche et mørkt tema) i stedet for at vise Herodesk's egen knap.

Herodesk('hideButton');

Bemærk: Dette gælder kun for den aktuelle sideindlæsning — det huskes ikke mellem sideindlæsninger, og knappen vises ikke automatisk igen, når en ny besked ankommer. Lyt til onUnreadCountChange (se nedenfor), hvis du vil afspejle ulæste beskeder på din egen knap.

Herodesk('showButton');

Viser live chat launcher-knappen igen efter den er blevet skjult med hideButton().

Herodesk('showButton');

Herodesk('position', side);

Flytter live chat launcher-knappen og chat-panelet til venstre eller højre side af skærmen. Top/bund-kanten forbliver som konfigureret i dine Live chat kanalindstillinger — kun venstre/højre side ændres.

Herodesk('position', 'left');

Du kan også skubbe launcheren med en pixel-offset — for eksempel for at rydde en cookie-banner eller et andet fast element på din side — ved at sende et objekt i stedet for en simpel side-streng:

Herodesk('position', { side: 'left', x: 24, y: 90 });
ParameterTypePåkrævetBeskrivelse
sideStringJaleft eller right
xNumberNejHorisontal offset i pixels, lagt oveni sideplaceringen (standard: 0)
yNumberNejVertikal offset i pixels, lagt oveni den konfigurerede top/bund-kant (standard: 0)

Bemærk: Offset gælder kun sammen med en side. At kalde Herodesk('position', side) igen med en simpel streng fjerner tidligere sat offset.

Herodesk('openHelpArticle', id);

Åbner widgetten direkte på en specifik hjælpecenterartikel via dens numeriske artikel-ID.

Herodesk('openHelpArticle', 53);

Herodesk('openOnFaq', id);

Åbner widgetten direkte på et specifikt spørgsmål fra dit hjælpecenters FAQ-sektion via dets numeriske ID — på samme måde som openHelpArticle åbner en specifik artikel.

Herodesk('openOnFaq', 12);
ParameterTypePåkrævetBeskrivelse
idNumberJaDet numeriske ID for FAQ-spørgsmålet i dit hjælpecenter

Event Callbacks

Registrer callbacks for at reagere på widget-events.

Herodesk('onShow', callback);

Udløses når chat-widgetten åbnes (ved brugerklik eller programmatisk show).

Herodesk('onShow', function() {
 console.log('Chat-widget åbnet');
});

Herodesk('onHide', callback);

Udløses når chat-widgetten lukkes (ved brugerklik eller programmatisk hide).

Herodesk('onHide', function() {
 console.log('Chat-widget lukket');
});

Herodesk('onUnreadCountChange', callback);

Udløses når antallet af ulæste samtaler ændres. Modtager det nye antal som parameter.

Herodesk('onUnreadCountChange', function(count) {
 console.log('Ulæste samtaler:', count);
});

Herodesk('onUserEmailSupplied', callback);

Udløses når en kontakts e-mail identificeres — enten gennem forudautentificering (boot med auth_token) eller når brugeren manuelt indtaster sin e-mail i widgetens kontaktformular.

Herodesk('onUserEmailSupplied', function() {
 console.log('Brugerens e-mail er angivet');
});