Chat-widget #

Integrationsvejledning til chat-widget på hjemmeside #

Tilføj en brugervenlig chat-widget til din hjemmeside, der gør det muligt for besøgende at kommunikere direkte via din sides grænseflade. Integrationsprocessen er ligetil og vil give din hjemmeside indbyggede beskedfunktioner.

Oprettelse og konfiguration af chat-widgetten #

Sådan kommer du dertil:

1. Klik på Indstillinger nær bunden af venstre sidepanel. (På en telefon skal du først trykke på menuikonet ☰ i det øverste hjørne for at åbne sidepanelet.)
2. I venstre sidepanel under Indstillinger, under Kanaler, skal du klikke på Kanaler.
3. Find kortet Website chat widget.
4. Hvis du ikke har en widget endnu, skal du klikke på Opret forbindelse for at oprette en med et vist navn og en velkomstbesked.
5. Når den er oprettet, kan du når som helst klikke på Administrer for at åbne det fulde konfigurationspanel.

Ændringer, du gemmer, anvendes automatisk på din live-widget — der er ingen grund til at indsætte installationskoden igen, efter du har foretaget en ændring.

En Live-forhåndsvisning findes lige ved siden af indstillingerne: en eksempel-webside med din faktiske widget kørende, som viser dine farver, placering, logo, launcher-ikon og proaktiv pop op præcis som de besøgende vil se dem. Den følger dine redigeringer, mens du foretager dem, så du behøver ikke at gemme for at se, hvordan en farve- eller temaændring ser ud. Du kan endda klikke på chatknappen inde i forhåndsvisningen for at åbne widgeten og prøve den af.

Hvad du kan tilpasse #

Administrer-panelet er organiseret i fire sektioner.

Udseende #

• Stiltema: Omdesign hele widgeten med ét klik. Seks temaer definerer udseende, farver, hjørner og skrifttype samlet: Classic (det originale solide udseende — en farvet overskriftslinje på et fladt panel), Glass (et frostet, gennemsigtigt panel, der slører siden bagved en smule, hvor overskriften og beskedfeltet svæver som afrundede kort indeni), Midnight (Glass i mørke farver), Bloom (blød pink, ekstra afrundet), Ember (varm orange Glass) og Mono (sort-hvid, skarpe hjørner). Et tema er et udgangspunkt — efter at have valgt et, kan du stadig ændre enhver farve eller indstilling individuelt. Nye widgets starter på Glass; skift sker øjeblikkeligt overalt, hvor widgeten er indlejret, uden kodeændringer på dit websted.
• Hjørner og skrifttype: To uafhængige stilindstillinger. Hjørner bestemmer, hvor afrundede panelet, boblerne og knapperne er (Runde, Bløde eller Skarpe), og Skrifttype vælger den skrifttype, de besøgende ser (Standard, Serif, Afrundet eller Mono) — skrifttyper hentes fra det, der allerede findes på den besøgendes enhed, så intet ekstra indlæses på dit websted.
• Visningsnavn: Vises i widgetens overskrift.
• Logo: Upload et billede, der vises øverst i chatten. Brug dit firmalogo eller et venligt portrætfoto.
• Startikon: Ikonet på selve den flydende chatknap. Vælg et af de indbyggede ikoner (chatboble, papirflyver, spørgsmålstegn og mere), genbrug dit uploadede logo, eller upload et separat billede — praktisk, hvis du vil have et billede af et rigtigt teammedlem, der hilser på de besøgende.
• Farver: Fem farver, hvor hver især angiver den del af widgeten, den farver. Brandfarve er den flydende knap, overskriften og den besøgendes egne beskeder, med Brandtekst til teksten ovenpå. Bot-boble er baggrunden for din bots svar og skriveindikatoren, med Bot-bobletekst til ordene indeni og de animerede skriveprikker. Chatvindue er panelet bag alle beskederne. Vælg en Bot-boblefarve, der er tydeligt forskellig fra din Brandfarve — hvis de to matcher, får begge sider af samtalen samme farve, og de besøgende kan ikke kende forskel på din bots svar og deres egne. En lysegrå bot-boble med mørk tekst ved siden af din brandfarve er den sikre kombination.
• Placering: Placer den flydende chatknap i nederste højre eller nederste venstre hjørne, med vandret og lodret forskydning (i pixels), hvis den overlapper noget andet på din side.
• Startspørgsmål: Hurtige svarforslag (klikbare chips), der vises i chatten, så de besøgende kan komme i gang med et enkelt tryk i stedet for at skrive — for eksempel “Hvad er jeres priser?” eller “Tilbyder I support?” — op til 10.

Adfærd #

• Velkomstbesked: Den første besked, som besøgende ser, når de åbner chatten (f.eks. “Hvordan kan jeg hjælpe dig?”).
• Lyd: Afspil en lyd, når en ny besked ankommer i chatten.
• Anmod om tilladelse til notifikationer: Bed eventuelt besøgende om at tillade browsernotifikationer, så de får besked om svar, selv når de har skiftet faneblad.
• Proaktiv pop op-boble: En valgfri lille boble, der dukker op ved siden af chatknappen for at invitere folk indenfor. Slå den til for at indstille dens besked, teksten på knapperne for accept/afvisning, og hvor mange sekunder der skal gå, før den vises. Boblen skjuler sig selv igen efter 20 sekunder, hvis ingen klikker på den (det tal er fastlåst), og når en besøgende klikker på Ikke nu, forbliver den skjult resten af deres besøg. Selve chatvinduet åbner aldrig af sig selv: Det åbner, når den besøgende klikker på chatknappen eller boblen, og forbliver åbent, indtil de lukker det.
• AI-svarhastighed: En skyder mellem Langsommere (mere menneskelig — AI’en tager sig en pause, før den svarer) og Maks. hastighed (mere robotagtig — svar kommer tilbage så hurtigt som muligt). Balanceret ligger i midten.

Sprog #

Widgetten er i sig selv flersproget — der er intet, der skal aktiveres.

• Det vælger automatisk den besøgendes sprog. Først kigger det på det sprog, din side erklærer i sin HTML (<html lang="it">), og derefter falder det tilbage på den besøgendes browsersprog. Hvis ingen af delene er et sprog, vi understøtter, vises widgettens egne etiketter på engelsk, og din åbningsbesked, pop-up-boble og startspørgsmål vises præcis, som du har skrevet dem.
• Eller vælg selv et. Feltet Widget-sprog i sektionen Adfærd er som standard sat til Auto, hvilket er den ovennævnte registrering. Vælg et sprog der, så forbliver widgettens egne etiketter (den besøgendes formularfelter for fornavn, e-mail og telefon samt deres eksempeltekst, fortrolighedsmeddelelsen, knapperne) på det sprog, uanset hvad siden eller browseren siger. Brug dette, når din sidebygger ikke erklærer det rigtige sprog, eller når du ønsker ét fast sprog for alle besøgende.
• Understøttede sprog: Engelsk, hollandsk, tysk, fransk, spansk, italiensk, portugisisk, rumænsk, polsk, arabisk, finsk, filippinsk, slovensk, thai, bangla og japansk. Dette er listen for widgettens egne knapper og etiketter.
• Dine beskeder oversættes for dig. Hver gang du gemmer, bliver din åbningsbesked, proaktive pop-up-boble og startspørgsmål oversat til alle seksten ovennævnte sprog. Du skriver dem kun én gang, på det sprog du foretrækker: det sprog, du skrev på, genkendes fra selve teksten, den version bevares ord for ord, og alle andre sprog er en oversættelse af den. Det betyder ikke noget, hvilket sprog din konto er indstillet til.
• Skriv hver besked på kun ét sprog. Hvis du indsætter to sprog i det samme felt — f.eks. en engelsk linje og en italiensk linje — behandles det hele som en enkelt besked og oversættes, som det står, så en italiensk besøgende ender med at se den samme sætning to gange. Skriv den én gang, på det sprog du foretrækker.
• AI’en svarer på den besøgendes sprog. Uanset hvilket sprog nogen skriver på, svarer din agent på det samme sprog, uanset hvilket sprog widgettens etiketter viser. Hvis du hellere vil have, at den altid svarer på ét fast sprog, så angiv det i din agents instruktioner.

Tip: Hvis dit websted ikke angiver en lang-attribut på sit <html>-tag, bør du tilføje en. Det er det stærkeste signal, vi har til at vælge det rigtige sprog, især for besøgende, der browser fra udlandet.

Leadgenerering & Privatliv #

• Indsaml besøgsoplysninger: Deaktiveret som standard. Når den er aktiveret, bliver besøgende bedt om deres navn og e-mail (og eventuelt telefonnummer), før samtalen begynder, så du indfanger emnet, selvom de forlader chatten undervejs.
• Formularoverskrift og Formularundertekst: Tilpas overskriften og den korte forklaring, der vises over formularen.
• Indsaml telefonnummer: Aktiver for også at bede om et telefonnummer; deaktiveret indsamler kun navn og e-mail.

En besøgende har efterladt et telefonnummer og har forladt dit websted — kan jeg fortsætte på WhatsApp? Ja. Åbn deres chat og vælg Fortsæt på WhatsApp fra menuen med de tre prikker (WhatsApp Web eller WhatsApp Business skal være forbundet). DM Champ opretter en linket WhatsApp-samtale for den samme person, kopierer deres navn, e-mail og detaljer, og AI’en overfører, hvad de sagde på dit websted, så ingen behøver at gentage sig selv. Webstedschatten bliver, hvor den er, og begge chats peger på hinanden under Linkede samtaler i kontaktpanelet. Se Chatgrænseflade.

Kan AI-agenten selv tilbyde at skifte til WhatsApp? Ja, og det kræver ingen ekstra funktion — én linje i agentens instruktioner er nok. Opret et Short Link til dit WhatsApp-nummer med en forudfyldt besked såsom “Hej, jeg chattede på jeres hjemmeside og vil gerne fortsætte her”, og fortæl derefter agenten, hvornår den skal sende det, for eksempel: “Hvis den besøgende har brug for at gå, ønsker at fortsætte senere eller spørger efter WhatsApp, så tilbyd at fortsætte der og send dette link: (dit short link)”. Links i widgetten kan trykkes på, så den besøgende lander i WhatsApp med dit nummer valgt og beskeden forudindtastet, og deres første besked åbner en WhatsApp-samtale i din indbakke. Hvis den besøgende har efterladt det telefonnummer, de skriver fra (med landekode), i widget-formularen, linker DM Champ automatisk de to samtaler, og AI’en på WhatsApp kender allerede webstedschatten, præcis som med Fortsæt på WhatsApp. Hvis der ikke blev indsamlet noget telefonnummer, er de to chats ikke linkede, så sørg for, at den forudindtastede besked er specifik nok til, at WhatsApp-agenten ved, hvor personen kom fra.

• Kræv accept af privatlivspolitik: Kræv eventuelt, at besøgende accepterer din privatlivspolitik, før de chatter, og angiv den URL, den peger på.

Hvad gemmer widgetten i en besøgendes browser, og skal jeg placere den bag et cookiebanner? Der gemmes intet blot ved at indlæse en side. Widgetten skriver ingen cookies og bruger ingen browserlagring, før den besøgende vælger at chatte: sender en første besked, udfylder formularen med besøgsoplysninger eller accepterer din privatlivspolitik. Fra det øjeblik gemmer den et tilfældigt samtale-id og en kopi af samtalen i den pågældende browser som førstepartslagring på dit eget domæne, så chatten stadig er der, når de vender tilbage. Den indlæser ingen analyse- eller sporingsscripts og sætter ingen tredjepartscookies. Da intet skrives, før den besøgende anmoder om at chatte, falder det under den lagring, der er strengt nødvendig for en tjeneste, som den besøgende har anmodet om, så du kan indlæse den uden at placere den bag et samtykkebanner. Hvis dit websted alligevel bruger et samtykkeværktøj, er det fint at beholde widgetten bag det; chatten vises blot, når den besøgende giver sit samtykke.

Kanaler & Integrering #

• Vedhæftningsknap: Giver besøgende mulighed for at sende billeder og filer i chatten.
• Emoji-vælger: Tilføjer en emoji-vælger ved siden af beskedfeltet.
• Kanallinks: Inkluder eventuelt links til WhatsApp, Instagram eller Messenger, så besøgende kan fortsætte samtalen på den platform, de foretrækker. Dette vises kun, når du har forbundet et WhatsApp-nummer, Instagram eller Messenger.
• Handlingsknapper: En række genveje øverst i chatten, der fører den besøgende et andet sted hen i stedet for ind i en samtale — se Handlingsknapper nedenfor.
• Domæne-whitelist: Begræns hvilke hjemmesider der må indlejre din widget. Tilføj de domæner, hvor du har installeret den (f.eks. example.com eller *.example.com); lad feltet stå tomt for at tillade alle domæner.
• Blokerede lande: Hold widgetten væk fra besøgende i lande, du ikke betjener. Besøgende, hvis netværksplacering er i et land, du vælger, ser aldrig widgetten, og enhver chat, de forsøger at starte, afvises. Lad feltet stå tomt for at tillade alle. Se Hold bots og kreditforbrug ude nedenfor.
• Rute disse chats til: Vælg den kampagne eller agent, der skal håndtere chats, der kommer fra den kode, du er ved at kopiere. Lad den stå på Konto-standard for at bruge din normale chat-widget-routing. Se Send forskellige sider til forskellige kampagner nedenfor.
• Indlejringskode: Vælg Flydende boble eller Indlejret og kopier installationskoden (se nedenfor).
• Klient-demolink: Indsæt en hvilken som helst hjemmesideadresse for at få et link, der kan deles, som åbner den side med din widget kørende ovenpå — intet skal installeres hos dem. Se Vis widgetten på en andens hjemmeside nedenfor.

Nederst i panelet fjerner handlingen Slet chat-widget widgetten fra din hjemmeside med det samme — dette kan ikke fortrydes, og besøgende vil ikke længere se chat-boblen.

Handlingsknapper #

Nogle besøgende ønsker ikke at chatte. De vil have dit telefonnummer, din adresse eller din e-mail, og de vil have det med ét tryk. Handlingsknapper er en række genveje øverst i chatpanelet til netop dette formål.

Tilføj op til seks. Hver knap har en etiket (teksten på knappen) og en destination, og destinationen afhænger af, hvilken handling du vælger:

Disse knapper bruger ikke kreditter. At trykke på en knap sender ikke en besked og starter ikke en samtale – den fører blot den besøgende derhen, hvor de bad om at komme. Kun en reel samtale med din AI-agent bruger kreditter, præcis som før.

Et par ting, der er værd at vide:

• Knapperne forbliver synlige, mens den besøgende chatter. Man kan stille to spørgsmål og stadig trykke på Rutevejledning bagefter uden at genindlæse siden.
• Dine etiketter vises præcis, som du skrev dem. I modsætning til din velkomstbesked og startspørgsmål bliver knap-etiketter ikke automatisk oversat, så hvis du betjener besøgende på flere sprog, bør du holde etiketterne korte og tydelige (eller skrive dem på dit hovedsprog).
• Udfyld en knap korrekt, ellers gemmes den ikke. Hvis et telefonnummer, en e-mailadresse eller et link ikke er gyldigt, giver panelet besked om det og blokerer Gem ændringer i stedet for at publicere en knap, der ikke ville gøre noget på din side.
• Det er ikke FAQ-svar. Handlingsknapper sender kun folk videre; de svarer ikke med forudindstillet tekst. Spørgsmål er din AI-agents opgave, og den besvarer dem ud fra din vidensbase. Hvis du vil foreslå, hvad man kan spørge om, skal du bruge startspørgsmål under Udseende.

Hvad du ikke kan tilpasse #

Administrationspanelet er det samlede sæt af muligheder. Specifikt:

• Ingen brugerdefineret CSS eller stylesheet. Styling er det, som tema-, hjørne-, skrifttype- og farvevælgerne tilbyder — du kan ikke indsætte din egen CSS i widgetten, og regler på din side vil ikke nå ind i den.
• Ingen brugerdefineret pladsholdertekst i beskedfeltet.
• Ingen videoindlejring inde i chatten.
• Ingen auto-skjul-timer. Invitationsboblen forsvinder af sig selv efter 20 sekunder, og det tal kan ikke ændres; det åbne chatvindue lukker aldrig sig selv. Hvis boblen ligger oven på dit sideindhold, skal du flytte widgetten med Position-forskydninger eller slå boblen fra og kun beholde startknappen.

Hvis en af disse ting er en hindring for dig, giver inline-indlejring dig mest kontrol: widgetten placeres i en container på din egen side, som du selv tilpasser størrelsen og placeringen af.

Hold bots og kreditforbrug ude #

Hvert AI-svar koster kreditter, så et script (eller en person, der keder sig), der åbner chat efter chat på din hjemmeside, er den ene ting, en offentlig widget skal beskytte sig imod. Widgetten håndterer det meste af dette selv, og to indstillinger i Administrationspanelet lader dig stramme op for din side.

• Domæne-whitelist. Kun de hjemmesider, du angiver, kan vise widgetten. Enhver, der kopierer din indlejringskode til en anden side, får intet.
• Blokerede lande. Besøgende, hvis netværksplacering er i et land, du blokerer, ser aldrig widgetten, og en chat, de alligevel forsøger at starte, afvises. Placeringen kommer fra den besøgendes forbindelse: en person på en VPN vises som VPN’ens land, og en besøgende, hvis placering ikke kan bestemmes, bliver lukket igennem frem for at blive udelukket. Din egen forhåndsvisning inde i appen bliver ved med at virke, selvom du blokerer det land, du sidder i.
• Nye samtaler pr. forbindelse. Én forbindelse (i praksis én husstand eller kontoradresse) kan åbne 20 nye samtaler pr. dag på en widget. Tilbagevendende besøgende, der fortsætter deres eksisterende chat, tæller ikke med, kun helt nye samtaler gør, så et script, der bliver ved med at starte friske chats for at høste AI-svar, løber tør efter 20, mens rigtige besøgende aldrig bemærker det. Hvis mange mennesker deler én forbindelse på din side (et campus, et callcenter), kan du øge tallet via REST API med max_new_chats_per_ip_daily; 0 slår kontrollen fra.
• Indbyggede begrænsninger. Oven i det er hver browsersession begrænset i, hvor mange beskeder den kan sende pr. minut og pr. dag, og agenten, der besvarer chatten, stopper med at svare en besøgende, når den når Maks. AI-beskeder pr. chat, der er indstillet under dens Svarsbegrænsninger.

Intet af dette identificerer enheder eller personer: widgetten gemmer intet i en besøgendes browser, før de vælger at chatte (se ovenfor), og der foretages ingen fingeraftryk (fingerprinting).

Installationsvejledning #

For at tilføje chat-widgetten til din hjemmeside skal du tilføje én linje kode til din sides HTML.

1. Åbn din hjemmesides HTML-fil i en teksteditor.
2. Find det afsluttende </body>-tag — dette er normalt helt i slutningen af filen.
3. Indsæt denne kodelinje lige før </body>-tagget, så resten af din side indlæses først:

<script src="https://api.dmchamp.com/v1/chat-widget/CONFIG_ID"></script>

4. Erstat CONFIG_ID med din unikke konfigurationsidentifikator, som vises i sektionen Kanaler & Integrering (Channels & Embed) i Administrationspanelet. Denne identifikator er specifik for din konto og forbinder widgetten med dit besked-system.

Kodestumpen vil ikke gøre dit websted langsommere: det er en lille loader, og selve widgetten downloades i baggrunden uden at blokere siden. Hvis du stadig ønsker, at widgetten skal vente, indtil din side er færdig med at indlæse, kan du i stedet omslutte den samme URL på denne måde:

<script>
window.addEventListener('load', function () {
  var s = document.createElement('script');
  s.src = 'https://api.dmchamp.com/v1/chat-widget/CONFIG_ID';
  s.async = true;
  document.body.appendChild(s);
});
</script>

Og hvis det, du ønsker at forsinke, er den lille invitationsboble frem for indlæsningen af widgetten, så er det forsinkelsen for Proaktiv pop op-boble i afsnittet Adfærd ovenfor — der kræves ingen kode.

Her er et komplet eksempel på, hvordan din HTML-fil bør se ud med chat-widgeten implementeret:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your existing website content would be here -->

    <!-- Chat Widget Integration -->
    <script src="https://api.dmchamp.com/v1/chat-widget/CONFIG_ID"></script>
</body>
</html>

Integrer inline på en side (avanceret) #

Hvis du hellere vil have, at chatten vises som en del af din side — for eksempel inde i en dedikeret “Kontakt os”-sektion, en hjælpefane eller en sidebjælke — i stedet for som en flydende boble i hjørnet, skal du skifte Integrerings-snippet (Embed snippet) til Inline i Administrationspanelet og kopiere inline-snippetet.

Det ser således ud:

<div data-chat-widget="CONFIG_ID" style="width:100%;height:600px;"></div>
<script src="https://api.dmchamp.com/v1/chat-widget/embed.js" async></script>

<div> er monteringspunktet – chatpanelet gengives indeni det og udfylder dets dimensioner. Style div’en, som du vil (giv den en fast højde, placer den i en flex-container, placer den i en grid-celle osv.), så vil chatpanelet følge med.

Du behøver kun ét <script>-tag på siden, selvom du indlejrer flere chat-widgets. Scriptet scanner siden for hvert <div data-chat-widget="…"> og monterer et chatpanel i hver.

Hvornår skal man vælge inline vs. flydende:

• Flydende boble er velegnet til en altid tilgængelig “Har du brug for hjælp?”-knap på hele websitet.
• Inline-indlejring er velegnet, når chatten skal ligge et specifikt sted – en supportside, en sidebjælke i vidensbasen, en hjælpefane i appen – og føles som en naturlig del af den side.

Inline-integreringen genbruger den samme konfiguration som den flydende boble (logo, åbningsbesked, lead-opsamling, startspørgsmål osv.), så du ikke behøver at opsætte noget to gange.

Vis widgetten på en andens hjemmeside #

Du kan vise din chat-widget kørende på en hjemmeside, du ikke kontrollerer — ingen kode, ingen adgang til deres side påkrævet. Det er den hurtigste måde at vise en potentiel kunde, hvordan assistenten ville se ud på deres egne sider.

1. Åbn panelet Administrer og rul til Kanaler & Indlejring.
2. I Klient-demolink skal du indtaste hjemmesideadressen (for eksempel www.theircompany.com).
3. Klik på Kopiér for at kopiere linket, eller Åbn for selv at se det først.
4. Send linket til den person, du ønsker at vise det til.

Når linket åbnes, indlæses den hjemmeside med din chat-widget flydende ovenpå, præcis som den ville se ud, hvis den var installeret. Alle med linket kan åbne det — der er intet, man skal logge ind på.

Et par ting, der er værd at vide:

• Chats fra demoen er rigtige. Beskeder, som en besøgende sender i en demo, lander i din indbakke og besvares af din agent, og de bruger kreditter ligesom enhver anden samtale.
• Siden er uden branding. Den viser deres hjemmeside og din widget, og intet andet.
• Nogle hjemmesider kan ikke indrammes. En række sider (banker, store detailhandlere, alt bag strenge sikkerhedsindstillinger) blokerer andre sider fra at vise dem. Når det sker, virker linket stadig: det viser et neutralt mock-browservindue i stedet for den rigtige side, med din widget live ovenpå, så demoen stadig gør sit job.
• Det ændrer ikke deres hjemmeside. Intet bliver installeret, og intet bliver ændret — demoen eksisterer kun inde i det link.

Demolinket bruger altid din kontos standardrutning, uanset hvad Ruter disse chats til er indstillet til. Hvis du vil have, at demo-chats håndteres af en specifik agent, skal du først indstille denne agent som standard for din chat-widget.

Send forskellige sider til forskellige kampagner #

Som standard håndteres hver chat, der kommer ind via din widget, af den samme kampagne eller agent. Du kan tilsidesætte dette pr. side, så besøgende på din prisside taler med din salgskampagne, mens besøgende på din hjælpeside taler med din supportagent — alt sammen fra den samme chat-widget.

Der er to måder at få koden på:

• Fra kampagnen eller agenten. På siden Kampagner skal du åbne menuen ⋮ ud for en kampagne og vælge Tilføj til websted. På siden Agenter skal du klikke på knappen </> på rækken eller åbne agenten og gå til fanen Indgangspunkter. Uanset hvad får du et uddrag, der er klar til at blive indsat, og som allerede peger på den pågældende kampagne eller agent.

  En agents fane Indgangspunkter har også et panel til Chat-widget til websted, der viser, hvor mange websted-chats den pågældende agent allerede håndterer. Chats fra et indlejret element når direkte frem til agenten, så du behøver ikke at oprette en indgangspunktsregel for dem – en agent uden nogen regler besvarer stadig sit indlejrede element.

  Tilføj til hjemmeside vises kun på kampagner, der er aktive og konfigureret til at håndtere indgående chats. En kladdekampagne kan endnu ikke modtage besøgende, så indstillingen er skjult, indtil du publicerer den. På siden Agenter vises den for aktive agenter. En pauset agent ville modtage chatten, men aldrig svare, så indstillingen er skjult, indtil du slår den til igen. Der er ingen kanal, der skal konfigureres for en agent – en agent kan besvare en chat fra enhver kanal.

• Fra widget-indstillingerne. I Indstillinger → Kanaler → Administrer på din chat-widget skal du indstille Ruter disse chats til og kopiere kodestumpen nedenunder. Ændring af rullemenuen omskriver kodestumpen.

Det flydende kodestykke bærer destinationen i adressen:

<script src="https://api.dmchamp.com/v1/chat-widget/CONFIG_ID?campaign=CAMPAIGN_ID"></script>

Det indlejrede kodestykke bærer den i stedet på <div>, så én side kan indeholde flere chats, der går til forskellige steder:

<div data-chat-widget="CONFIG_ID" data-campaign="CAMPAIGN_ID" style="width:100%;height:600px;"></div>
<script src="https://api.dmchamp.com/v1/chat-widget/embed.js" async></script>

For en agent ændres ordlyden til ?agent=AGENT_ID eller data-agent="AGENT_ID".

Et par ting, der er værd at vide:

• Brug kopier-knappen i stedet for at indtaste ID’et manuelt. Hvis ID’et ikke matcher en kampagne eller agent på din konto, fungerer chatten stadig, men falder tilbage på din standard-routing.
• En person, der allerede er midt i en samtale, bliver hos den, de startede med, selvom de senere lander på en side, der peger et andet sted hen. Dette forhindrer, at en samtale skifter personlighed midtvejs.
• En sidespecifik destination har prioritet over din kontostandard og over søgeordsudløsere.

Fortæl widgetten, hvem den besøgende er (Avanceret) #

Hvis du placerer chat-widgetten i et medlemsområde, en kundeportal eller en app, hvor folk allerede er logget ind, ved din side allerede, hvem de er. Du kan give disse oplysninger videre til widgetten, så den besøgende ikke bliver bedt om detaljer, de allerede har givet dig, og så din AI kan bruge det, du allerede ved om dem.

Tilføj en lille indstillingsblok før widget-scriptet:

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      name: "Maria",
      email: "maria@example.com",
      phone: "+391234567890"
    },
    data: {
      plan: "Professional",
      customer_since: "2024",
      last_order: "A-2291"
    }
  };
</script>
<script src="https://api.dmchamp.com/v1/chat-widget/CONFIG_ID"></script>

Din side bør udfylde disse værdier på serversiden ud fra, hvem der er logget ind.

To ting sker:

• Formularen “Inden vi starter…” springes over. Med et navn og en e-mail angivet går den besøgende direkte ind i samtalen, og disse detaljer gemmes på deres kontaktperson, præcis som hvis de selv havde indtastet dem.
• Alt under data videregives til din AI. Alt, hvad du placerer der — abonnement, ordrenummer, fornyelsesdato, kreditsaldo, hvor mange pladser de har — bliver en del af, hvad AI’en ved om den person, så den kan svare på “hvornår fornyes mit abonnement?” uden først at bede dem om at forklare, hvem de er. Brug de feltnavne, der giver mening for dig; de vises på kontakten under Brugerdefinerede felter. Op til 20 værdier sendes friskt med hver besked, så hvis abonnementet ændres midt i samtalen, ser AI’en det nye.

For inline-indlejringer kan du i stedet placere de samme oplysninger på <div>, hvilket er praktisk, når én side indeholder flere chats:

<div data-chat-widget="CONFIG_ID"
     data-visitor-name="Maria"
     data-visitor-email="maria@example.com"
     data-visitor-data='{"plan":"Professional"}'
     style="width:100%;height:600px;"></div>
<script src="https://api.dmchamp.com/v1/chat-widget/embed.js" async></script>

Hvis din side først ved, hvem den besøgende er, efter siden er indlæst — for eksempel i en single-page app, hvor login sker uden genindlæsning af siden — skal du kalde dette, når du har detaljerne, så widgetten opdaterer sig selv:

<script>
  window.chatWidget.setVisitor({
    visitor: { id: "12345", name: "Maria", email: "maria@example.com" },
    data: { plan: "Professional" }
  });
</script>

Et par ting, der er værd at vide:

• Hvis to forskellige personer logger ind på den samme computer, starter den anden person en ny samtale i stedet for at se den første persons chat. Widgetten registrerer skiftet af person og nulstiller sig selv.
• I sig selv er dette til kontekst, ikke til at logge nogen ind. Samtaler holdes stadig adskilt, som de altid har været, så videregivelse af en id lader ikke nogen åbne en andens chat, og en person, der bruger en anden enhed eller browser, starter en ny samtale der. For at føre samtalen videre på tværs af enheder, skal du signere id som beskrevet herunder.
• Det er valgfrit. En widget på en almindelig offentlig side behøver intet af dette og opfører sig præcis som før.

Genoptag den samme samtale på enhver enhed (signeret besøgende-id) #

Hvis dine kunder har konti, kan du få deres chat til at følge dem: log ind på en telefon, fortsæt på en bærbar computer, og det er den samme samtale med den samme kontakt i din indbakke, og AI’en ved stadig alt, hvad der blev sagt. Til det formål har DM Champ brug for bevis på, at den besøgende virkelig er den, din side siger, de er, ellers kunne hvem som helst indtaste et kundenummer i deres browser og læse kundens chat. Beviset er en signatur, som du beregner på din server.

1. I widget’ens Administrer-panel, under Kanaler & Integrering, find Logget ind-besøgende og klik på Generer hemmelighed. Kopiér identitetshemmeligheden. Opbevar den kun på din server; placer den aldrig direkte på selve siden.

2. Når din server gengiver en side for en logget ind-kunde, skal du beregne en HMAC-SHA256 af kundens ID ved hjælp af hemmeligheden som en hex-streng med små bogstaver:

// Node.js
const hash = require("crypto").createHmac("sha256", IDENTITY_SECRET).update(customerId).digest("hex");

// PHP
$hash = hash_hmac('sha256', $customerId, IDENTITY_SECRET);

# Python
import hmac, hashlib
hash = hmac.new(IDENTITY_SECRET.encode(), customer_id.encode(), hashlib.sha256).hexdigest()

3. Indsæt ID’et og hashen i indstillingsblokken ved siden af det navn og den e-mail, du allerede sender:

<script>
  window.chatWidgetSettings = {
    visitor: {
      id: "12345",
      hash: "3f2a…e91c",
      name: "Maria",
      email: "maria@example.com"
    }
  };
</script>
<script src="https://api.dmchamp.com/v1/chat-widget/CONFIG_ID"></script>

Inline-integreringen tager den samme værdi som data-visitor-hash på <div>, og window.chatWidget.setVisitor({ visitor: { id, hash } }) fungerer til apps, der logger folk ind uden en sidegenindlæsning.

Hvad sker der, når signaturen er bekræftet:

• Kundens chat gemmes under deres konto i stedet for under browseren, så det er den samme samtale på enhver enhed og enhver browser, hvor de er logget ind, og én kontakt i din indbakke.
• Deres tidligere beskeder indlæses på den nye enhed, og AI’en fortsætter, hvor de slap.
• Hvis signaturen er forkert, opfører widgetten sig stille og roligt som før, som en normal browser-baseret chat, og udskriver årsagen i browserkonsollen, så en udvikler kan se den. Dine besøgende ser aldrig en fejl.
• ID’et sammenlignes præcis, som du sendte det, så signér den samme værdi, som du sender som id, og brug det samme ID for den samme person overalt.

To ting du skal vide:

• Gendan i Administrer-panelet giver dig en ny hemmelighed. Sider, der stadig signerer med den gamle, falder tilbage til normale browser-baserede chats, indtil din server bruger den nye hemmelighed. Eksisterende samtaler bevares; de er knyttet til kundens ID, ikke til hemmeligheden.
• En samtale, som nogen havde før de loggede ind, som en anonym besøgende, forbliver en separat chat. Den kontobaserede samtale starter med den første besked, de sender, mens de er logget ind.

Skift widget-indstillinger fra din egen kode (API) #

Alt på widgetens Administrer-panel kan også ændres via REST API, hvilket er praktisk, hvis du administrerer mange websteder eller ønsker at slå vedhæftningsknappen fra automatisk for en klient. Send en PATCH til https://api.dmchamp.com/v1/chat-widget-configs/CONFIG_ID med din API-nøgle og kun de felter, du vil ændre — for eksempel skjuler {"show_upload_button": false} vedhæftningsknappen, {"show_emoji_button": false} skjuler emoji-vælgeren, og {"launcher_icon": "chat-dots"} skifter startikonet. CONFIG_ID er den samme identifikator som i dit embed-script. Den fulde liste over accepterede felter (navn, åbningsbesked, farver, startikon, tilladte domæner, formular til besøgsoplysninger, fortrolighedsmeddelelse, tema, hjørne- og skrifttypestil) findes i API-referencen under Chat Widget. Websteder henter ændringen, næste gang siden indlæses.

Hvad kan du forvente efter installationen #

Når du har tilføjet scriptet til din hjemmeside, opretter chat-widgetten automatisk en chat-knap i hjørnet af din hjemmeside (nederst til højre som standard). Widgetten forbliver i en fast position, mens brugerne scroller gennem dine sider, hvilket sikrer, at den altid er tilgængelig.

Når besøgende klikker på denne knap, udvides den til et fuldt chatvindue, hvor de kan starte en samtale, og din åbningsbesked vises. Hvis Indsaml besøgsinfo er slået til, vises først en lille formular, der beder om deres navn og e-mail (og eventuelt telefonnummer), før de kan skrive.

Chat-grænsefladen tilpasser sig automatisk forskellige skærmstørrelser, så den fungerer problemfrit på både desktop- og mobilenheder.

Test af din implementering #

Når du har tilføjet widgetten til din side, skal du teste, at den virker:

1. Åbn din hjemmeside i en browser.
2. Klik på chat-knappen for at åbne widgetten.
3. Send en testbesked og bekræft, at du får et svar.
4. Gentag på en anden enhed eller browser for at bekræfte, at det virker overalt.

Hvis chat-widgetten ikke vises på din side, så tjek følgende:

1. Sørg for, at du har erstattet CONFIG_ID med din faktiske konfigurationsidentifikator.
2. Sørg for, at script-tagget er placeret før det afsluttende </body>-tag.
3. Tjek koden for tastefejl.

Bag en virksomheds-firewall #

Hvis widgetten indlæses for offentligheden, men ikke for medarbejdere på kontorets netværk, blokerer netværket næsten stensikkert det domæne, den indlæses fra. Bed dit IT-team om at tillade følgende via normal HTTPS på port 443:

• Domænet i din indlejringskode — adressen i <script src="...">-linjen, som du kopierede fra administrationspanelet.
• api.dmchamp.com — widgetten sender også sine beskeder hertil.

Intet andet behøver at blive åbnet: ingen ekstra porte og ingen indgående regler. Hvis widgetten stadig ikke vises efter dette, skal du åbne din browsers udviklerkonsol på siden og sende os, hvad den rapporterer — en blokeret anmodning navngiver det domæne, der blev afvist, hvilket normalt er hele svaret.