Your AI Connector Docs

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 look — en farvet overskriftslinje på et fladt panel), Glass (et frostet, halvgennemsigtigt panel, der slører siden bagved, med overskriften og beskedfeltet svævende 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 — når du har valgt et, kan du stadig ændre enhver farve eller indstilling individuelt. Nye widgets starter på Glass; skift sker øjeblikkeligt alle steder, hvor widgeten er indlejret, uden ændringer i koden 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, som de besøgende ser (Standard, Serif, Afrundet eller Mono) — skrifttyper hentes fra det, der allerede findes på den besøgendes enhed, så der indlæses ikke noget ekstra 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, papirfly, 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 til at hilse på de besøgende.
  • Farver: Fem farver, hvor hver især navngiver den del af widgeten, den farver. Brandfarve er den flydende knap, overskriften og den besøgendes egne beskeder, med Brandtekst til teksten, der ligger 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 knapper), der vises i chatten, så 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.
  • Sidefod: En valgfri lille linje med din egen tekst under beskedfeltet, for eksempel “Powered by Your Agency”. Den er slået fra som standard, og der vises intet under beskedfeltet, mens den er slået fra. Slå den til, skriv din tekst (op til 40 tegn) og tilføj eventuelt et link, der starter med https://; besøgende, der klikker på teksten, åbner den side i en ny fane. Bureauer bruger den til at sætte deres eget navn på de widgets, de bygger til kunder.

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 notifikationstilladelse: Bed eventuelt besøgende om at tillade browser-notifikationer, 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/afvis, og hvor mange sekunder der skal gå, før den vises. Boblen lukker sig selv efter 20 sekunder, hvis den besøgende ikke klikker på den. Det er den eneste tekst, widgetten viser ved siden af chatknappen: der er ingen indstilling for en permanent etiket ved siden af knappen.
  • AI-svarhastighed: En skyder mellem Langsommere (mere menneskelig – AI’en tager sig et øjeblik før den svarer) og Maks. hastighed (mere robotagtig – svar kommer tilbage så hurtigt som muligt). Balanceret ligger i midten. Den første del af et svar ankommer med den forsinkelse, skyderen angiver, og skriveindikatoren vises kort før.
  • Vis en travl-note, mens AI’en arbejder: Slået fra som standard. Når et svar tager mere end et par sekunder, for eksempel fordi din agent slår noget op i et andet system, ser de besøgende en kort linje ved siden af skrive-prikkerne: “Arbejder på dit svar” efter 5 sekunder, “Slår det op for dig” efter 15, derefter “Arbejder stadig på det, næsten færdig” og en undskyldning for ventetiden, hvis det tager længere tid. Hurtige svar viser stadig kun prikkerne. Linjen følger widget-sproget, og den vises kun, mens din AI rent faktisk arbejder på et svar, aldrig når AI’en er slået fra for den chat, eller en person har overtaget.

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 angiver 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 widgetens egne etiketter på det sprog, du skrev din åbningsbesked på, og din åbningsbesked, popup-boble og startspørgsmål vises præcis, som du skrev dem.

  • Et sidesprog, der modstrider din hilsen, er ikke tillid værd. Nogle sidebyggere indsætter lang="en" på alle sider, uanset hvilket sprog siden er på. Når siden angiver ét sprog, og du har skrevet din åbningsbesked på et andet, behandler widgeten sideværdien som en standardindstilling fra byggeren: den følger i stedet den besøgendes browsersprog, og hvis det ikke er et sprog, vi understøtter, bruger den det sprog, du skrev på. En side, der skifter sin lang-værdi, når den besøgende vælger et sprog på din side, følges altid. Hvis du foretrækker ikke at afhænge af noget af dette, kan du låse sproget i sektionen Adfærd.

  • Eller vælg selv et. Feltet Widget-sprog i sektionen Adfærd er som standard sat til Auto, hvilket er den ovennævnte detektering. Vælg et sprog der, og widgetens egne etiketter (den besøgendes formularfelter for fornavn, e-mail og telefon samt deres eksempeltekst, privatlivsmeddelelsen, knapperne) forbliver på det sprog, uanset hvad siden eller browseren siger. Brug dette, når din sidebygger ikke angiver 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, bengali, japansk, norsk (bokmål) og tyrkisk. Dette er listen for widgetens egne knapper og etiketter.

  • Højre-til-venstre-sprog er layoutet fra højre mod venstre. For arabiske, hebraiske, persiske og urdu-talende besøgende spejles hele chatvinduet: overskriften, beskedboblerne, skrive-prikkerne, den besøgendes formular og beskedfeltet starter alle fra højre. Bobleknappen bliver i det hjørne, du har valgt. Hebraiske, persiske og urdu-talende besøgende ser etiketterne på engelsk (eller det sprog, du har låst), men layoutet følger stadig deres sprog. En besked skrevet i en anden retning, såsom et engelsk svar i en arabisk chat, læses stadig i den rigtige rækkefølge.

  • Dine beskeder oversættes for dig. Hver gang du gemmer, oversættes din åbningsbesked, proaktive popup-boble og startspørgsmål til alle atten sprog ovenfor. 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 din egen version for et sprog. Sektionen Oversættelser i panelet Administrer, lige under Adfærd, lader dig erstatte den automatiske oversættelse med din egen ordlyd, for eksempel formelt spansk (“usted”), hvor den automatiske er uformel. Vælg et sprog under Sprog, og udfyld derefter et af følgende: Åbningsbesked, Popup-besked, popup-vinduets Acceptér-tekst og Afvis-tekst (vist mens popup-boblen er aktiv) og Startspørgsmål. Hvert felt viser den automatiske oversættelse med gråt; Start fra den automatiske oversættelse kopierer den ind, så du kan redigere derfra. Alt, hvad du lader stå tomt, beholder den automatiske oversættelse. Sprog, du selv har skrevet, er listet først, markeret med Din egen ordlyd, og Fjern min (sprog)-ordlyd går tilbage til den automatiske oversættelse for det sprog. Din egen ordlyd bevares, når du senere redigerer den originale tekst; kun de automatiske oversættelser bliver lavet om.

  • Popup-knapperne oversættes også. Acceptér- og Afvis-knapperne i den proaktive popup-boble oversættes sammen med dine andre beskeder, så en spansk besøgende ikke længere ser engelske knapper.

  • 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 widgetens etiketter viser. Hvis du foretrækker, at den altid svarer på ét fast sprog, så angiv det i din agents instruktioner.

  • Indstil sproget pr. side i indlejringskoden. Kører du én widget på en engelsk side og en oversat kopi af den? Tilføj data-lang til widgetens script-tag på hver side. data-lang="es" viser widgeten på spansk på den side, uanset hvad browseren siger; data-lang="page" får den til at følge sidens egen <html lang="...">-værdi (så lang="es-MX" giver spansk), selv når din åbningsbesked er skrevet på et andet sprog. Den vinder over feltet Widget-sprog, som igen vinder over automatisk detektion. For eksempel:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" data-lang="page" defer></script>

Behold indlejringskoden fra panelet Administrer, som den er, og tilføj kun data-lang-attributten. For et indlejret chatpanel skal du indsætte data-lang på <div data-chat-widget="…"> i stedet.

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øgendes info: Slået fra som standard. Når den er slået til, bliver besøgende bedt om deres navn og e-mail (og eventuelt telefonnummer), før samtalen begynder, så du fanger leadet, selvom de forlader chatten midtvejs.
  • Formular-titel og Formular-undertitel: Tilpas overskriften og den korte forklaring, der vises over formularen.
  • Indsaml telefonnummer: Slå til for også at bede om et telefonnummer; slået fra indsamles kun navn og e-mail.
  • Indsaml efternavn: Slået fra som standard. Slå til for at tilføje et obligatorisk Efternavn-felt lige efter Fornavn. Det gemmes på kontakten som deres efternavn, så din AI og alt, hvad den slår op i dine egne systemer, har det fulde navn fra den første besked. Besøgende, der allerede har udfyldt formularen, før du slog dette til, bliver ikke spurgt igen.
  • E-mails med ulæste svar til besøgende: en besøgende, der har efterladt en e-mailadresse og ikke har set dit svar efter 15 minutter, får en e-mail, der henviser dem tilbage til chatten. Slå det fra under Indstillinger → Notifikationer → Chat-widget-besøgende. Se E-mails til chat-widget-besøgende.

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). Your AI Connector 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.

En besøgende efterlod sin e-mail og bookede aldrig – kan jeg følge op via e-mail? Ja, med en automatisering. Et Opret kontakt-trin med Kanal sat til E-mail gør den adresse, den besøgende efterlod, til en e-mailkontakt på din tilsluttede E-mail-kanal, og et Send besked-trin efterfølgende sendes som en e-mail; svar kommer tilbage til Chats til din e-mailagent. Den fulde opskrift, inklusive hvordan du stopper sekvensen, når de siger, de har booket, findes i Automatiseringer → Eksempel: e-mail-opfølgning for leads fra website-chat.

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 Your AI Connector 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 valgfrit 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 (WhatsApp Business eller WhatsApp Web), Instagram eller Messenger. Når du aktiverer WhatsApp-linket, udfyldes dit forbundne nummer automatisk; linket forbliver redigerbart, så du kan indtaste et nyt nummer, hvis du skifter.
  • 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, vil aldrig se widgetten, og enhver chat, de forsøger at starte, bliver afvist. Lad feltet stå tomt for at tillade alle. Se Hold bots og kreditforbrug ude nedenfor.
  • Rute disse chats til: Vælg den 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-ruting. Se Send forskellige sider til forskellige agenter nedenfor.
  • Indlejringskode: Vælg Flydende boble eller Indlejret og kopiér installationskoden (se nedenfor).
  • Klient-demolink: Indsæt en hvilken som helst hjemmesideadresse og klik på Opret link for at få et link, der kan deles, som åbner den side med din widget kørende ovenpå, uden at modtageren behøver at installere noget. Hvert link, du opretter, bliver listet, og du kan deaktivere dem hver især. Se Vis widgetten på en andens hjemmeside nedenfor.
  • Delingslink: Et færdigt link, der åbner din assistent på sin egen side i fuld skærm, uden at der kræves en hjemmeside. Kopiér det og send det hvor som helst. Se Del et direkte link til chatten 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:

Handling Hvad den besøgende får Hvad du udfylder
Opkald Deres telefonopkaldsfunktion åbner med dit nummer klar Dit telefonnummer, f.eks. +1 555 123 4567
SMS Deres besked-app åbner en ny besked til dig Dit telefonnummer
WhatsApp WhatsApp åbner en chat med dig Dit WhatsApp-nummer eller et wa.me-link, du allerede har
E-mail Deres mail-app åbner en ny e-mail til dig Din e-mailadresse
Rutevejledning Google Maps åbner med din lokation Din adresse eller et kortlink, du allerede har
Link Siden åbner i en ny fane Enhver fuld webadresse, der starter med https://

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 begrænset til 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 trænge ind i den.
  • Ingen brugerdefineret pladsholdertekst i meddelelsesfeltet.
  • Ingen videoindlejring i chatten.

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 websteder, du angiver, kan vise widgetten. Enhver, der kopierer din indlejringskode til et andet websted, får intet vist.
  • 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 værende i 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 fungere, selvom du blokerer det land, du befinder dig 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 nye 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å dit websted (et campus, et callcenter), kan du øge antallet via REST API med max_new_chats_per_ip_daily; 0 slår kontrollen fra.
  • Menneskelig kontrol (valgfri). Besøgende gennemgår en hurtig Cloudflare Turnstile-kontrol, før deres første besked sendes, så et script kan slet ikke starte chats. De fleste mennesker skal aldrig klikke på noget; Cloudflare viser kun et afkrydsningsfelt, når de er i tvivl. Det bruger dine egne gratis Turnstile-nøgler, se Tilføj en menneskelig kontrol nedenfor.
  • 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 vedkommende når Maks. AI-beskeder pr. chat, der er indstillet under 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).

Tilføj en menneskelig kontrol (Cloudflare Turnstile)

Slå dette til, når bots bliver ved med at åbne chats på dit websted, og ovenstående indstillinger ikke er nok. Kontrollen kører én gang, lige før en besøgendes første besked sendes. En besøgende, der består, kan fortsætte med at chatte i 24 timer uden at se den igen, og alle, der vender tilbage til en tidligere samtale, kan stadig læse den før kontrollen.

  1. Log ind på din Cloudflare-konto (en gratis konto er nok) og åbn Turnstile.
  2. Klik på Add widget, giv den et navn, og tilføj hvert domæne, din chat-widget kører på (for eksempel yourshop.com). Lad widget-tilstanden stå på Managed.
  3. Kopiér Site key og Secret key, som Cloudflare viser dig.
  4. I appen skal du åbne din chat-widgets Manage-panel, slå Human check before chatting til, indsætte begge nøgler og gemme.

Hvad kan du forvente:

  • Kontrollen forbliver slået fra, indtil begge nøgler er udfyldt, så at slå den til uden nøgler låser aldrig besøgende ude.
  • Hvis en besøgende ikke består kontrollen eller lader den stå uløst, sendes deres besked ikke, og de får en Retry-knap.
  • Kontrollen vises kun på de domæner, du har tilføjet i Cloudflare. På ethvert andet domæne afviser Cloudflare den, og ingen på det websted kan sende en besked, så tilføj alle domæner, før du slår den til.
  • Hvis dit websted bruger en Content Security Policy, skal du tillade https://challenges.cloudflare.com for scripts og frames, ellers kan kontrollen ikke indlæses.
  • Nøglerne tilhører din egen Cloudflare-konto, og den hemmelige nøgle sendes aldrig til dine besøgendes browsere.

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.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>
  1. 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.youraiconnector.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.

Installation på Shopify

  1. Gå til Onlinebutik > Temaer i din Shopify-administrator.
  2. Klik på knappen … ud for det tema, der er markeret som dit nuværende (publicerede) tema, og vælg Rediger kode. Redigering af et kladde- eller kopitema ændrer intet i din live-butik.
  3. Åbn layout/theme.liquid og rul ned til det afsluttende </body>-tag nær bunden.
  4. Indsæt din installationslinje lige over </body> og klik på Gem:
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

Hvis du installerede widgetten, før installationslinjen indeholdt defer, viser Shopifys kodeditor en rød understregning under den. Den understregning er en advarsel fra Shopifys kodekontrol angående scriptlinjer uden defer eller async, ikke en fejl: temaet gemmes stadig, og widgetten fungerer stadig. Tilføjelse af defer som vist ovenfor får understregningen til at forsvinde og ændrer intet ved, hvordan widgetten opfører sig, så der er ingen grund til at geninstallere på andre sider.

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.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></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.youraiconnector.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 & Integrering.
  2. I Klient-demolink skal du indtaste webstedsadressen (for eksempel www.theircompany.com).
  3. Valgfrit: Under feltet skal du vælge den Agent, der skal svare i denne demo, for eksempel en agent, du har bygget ud fra kundens eget websted, så den taler om deres tjenester, priser og ofte stillede spørgsmål. Lad den stå på Konto-standard for at bruge din normale chat-widget-routing.
  4. Klik på Opret link. Linket kopieres til dig og vises på listen under feltet med knapperne Kopiér og Åbn samt den agent, det bruger.
  5. 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 ægte. 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 websted og din widget, og intet andet.
  • Nogle websteder kan ikke indrammes. En række websteder (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 det rigtige websted, med din widget kørende ovenpå, så demoen stadig gør sit job.
  • Det ændrer ikke deres websted. Intet installeres, og intet ændres – demoen eksisterer kun inde i det link.
  • Deaktiver et link, når demoen er slut. Klik på Deaktiver ud for linket på listen og bekræft. Fra det øjeblik ser alle, der åbner det, en side, der siger, at linket er blevet deaktiveret. Din widget og dine andre demolinks fortsætter med at fungere. Et link, der er deaktiveret, kan ikke slås til igen; opret et nyt i stedet.
  • Links kopieret før 25. september 2026. Demolinks oprettet før listen eksisterede, er ikke på den. De fortsætter med at fungere, indtil du klikker på Deaktiver dem under listen, hvilket slår dem alle fra på én gang (og Slå dem til igen fortryder dette).

Et demolink, der er oprettet uden en agent, bruger din kontos standard-routing, uanset hvad Send disse chats til er indstillet til. Når en agent er valgt, tildeles hver chat fra det link til den agent og besvares af den. Widgetten beholder sit eget udseende, navn og åbningsbesked. Linket bærer det som &agent=AGENT_ID; at tilføje det manuelt til et ældre link virker også (brug &, ikke ?, da linket allerede indeholder et ?).

Hvis du senere sletter den agent, et demolink bruger, fortsætter linket med at fungere: dets chats går i stedet til din kontos standard-routing, og listen viser “slettet agent, bruger standard” ved siden af. Sletning af den agent, der er din chat-widget-standard, påvirker ikke links, der er knyttet til en anden agent.

Nogle gange er der ingen hjemmeside at placere widgetten på – du vil måske give nogen et link, så de kan tale med din assistent med det samme. Hver chat-widget har et:

  1. Åbn panelet Administrer og rul til Kanaler & Indlejring.
  2. Find Delingslink (det ligger lige under Klient-demolinket).
  3. Klik på Kopier for at tage linket, eller Åbn for at prøve det selv.

Når det åbnes, vises intet andet end din assistent, der fylder hele skærmen – ingen hjemmeside bagved, ingen boble der skal klikkes på først, intet der skal installeres. Sæt det i din Instagram-biografi, en QR-kode på en flyer, en e-mail-signatur eller en WhatsApp-besked til en potentiel kunde.

Delingslinket følger din chat-widgets standard-routing. For at åbne en specifik agent i stedet, skal du tilføje ?agent=AGENT_ID til slutningen af linket; hver chat fra det link tildeles derefter til den agent og besvares af den, mens siden beholder din widgets navn og åbningsbesked.

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

  • Chats fra linket er ægte. De ankommer til din indbakke, din agent besvarer dem, og de bruger kreditter ligesom enhver anden samtale.
  • Siden bærer intet af vores branding. Den viser din assistent og intet andet, og den holdes ude af søgeresultater.
  • Det fungerer på din egen adresse. Hvis din udbyder kører appen på deres eget domæne, bruger linket også den adresse, så intet ukendt vises i det.
  • Én besøgende pr. link, pr. browser. Den, der åbner det, beholder den samme identitet i den browser, så hvis de kommer tilbage senere, fortsætter den samme samtale i stedet for at starte en fremmeds. En anden browser eller et andet link til en widget er en anden besøgende.

Send forskellige sider til forskellige agenter

Som standard håndteres hver chat, der kommer ind via din widget, af den samme agent. Du kan tilsidesætte dette pr. side, så besøgende på din prisside taler med din salgsagent, 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 agenten. På siden AI-agenter skal du klikke på </>-knappen på rækken eller åbne agenten og gå til fanen Indgangspunkter. Uanset hvad får du et snippet, der er klar til at blive indsat, og som allerede peger på den pågældende 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.

    </>-knappen vises kun på aktive agenter. En sat på pause-agent ville modtage chatten, men aldrig svare, så muligheden er skjult, indtil du slår den til igen. Der er ingen kanal, der skal opsættes for en agent — en agent kan tage imod en chat fra enhver kanal.

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

Det flydende kodestykke bærer destinationen i adressen:

<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID?agent=AGENT_ID" defer></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-agent="AGENT_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Snippets kopieret før kampagner blev udfaset, indeholder ?campaign= eller data-campaign= i stedet. De fortsætter med at fungere, så der er ikke noget, der skal indsættes igen.

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

  • Brug kopieringsknappen i stedet for at indtaste ID’et manuelt. Hvis ID’et ikke matcher en 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 konto-standard 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.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

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

For også at gemme et efternavn, tilføj last_name ved siden af name i visitor-blokken (data-visitor-last-name på et inline-embed). Det er valgfrit: et navn og en e-mail er stadig nok til at springe formularen over, uanset om Indsaml efternavn er slået til eller ej.

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.youraiconnector.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 Your AI Connector 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.
  1. 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()
  1. 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.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></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.youraiconnector.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 konfigurations-id.
  2. Sørg for, at script-tagget er placeret før det afsluttende </body>-tag.
  3. Tjek koden for tastefejl.
  4. På Shopify skal du sikre dig, at du har redigeret det publicerede tema og klikket på Gem. En redigering foretaget i et kladde- eller duplikeret tema når aldrig din live-butik.

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.youraiconnector.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.