Chattwidget #

Integrationsguide för chattwidget på webbplats #

Lägg till en användarvänlig chattwidget på din webbplats som gör det möjligt för besökare att kommunicera direkt via webbplatsens gränssnitt. Integrationsprocessen är enkel och ger din webbplats inbyggda meddelandefunktioner.

Skapa och konfigurera chattwidgeten #

Så här hittar du hit:

1. Klicka på Inställningar nära botten av den vänstra sidomenyn. (På en telefon, tryck först på menyikonen ☰ i det övre hörnet för att öppna sidomenyn.)
2. I inställningsmenyn till vänster, under Kanaler, klicka på Kanaler.
3. Leta upp kortet Webbplatsens chattwidget.
4. Om du inte har en widget än, klicka på Anslut för att skapa en med ett visningsnamn och ett välkomstmeddelande.
5. När den väl är skapad kan du när som helst klicka på Hantera för att öppna hela konfigurationspanelen.

Ändringar du sparar tillämpas automatiskt på din aktiva widget — du behöver inte klistra in installationskoden på nytt efter att du gjort en ändring.

En Live-förhandsgranskning finns precis bredvid inställningarna: en exempelwebbsida med din faktiska widget körandes på den, som visar dina färger, position, logotyp, startikon och proaktiva popup precis som besökarna kommer att se dem. Den följer dina ändringar medan du gör dem, så du behöver inte spara för att se hur en färg- eller temaändring ser ut. Du kan till och med klicka på chattknappen inuti förhandsgranskningen för att öppna widgeten och prova den.

Vad du kan anpassa #

Hantera-panelen är organiserad i fyra sektioner.

Utseende #

• Stiltema: Ändra utseendet på hela widgeten med ett klick. Sex teman sätter utseende, färger, hörn och typsnitt samtidigt: Classic (det ursprungliga solida utseendet — en färgad rubrikrad på en platt panel), Glass (en frostad, genomskinlig panel som mjukt suddar ut sidan bakom den, där rubriken och meddelanderutan flyter som rundade kort inuti), Midnight (Glass i mörka färger), Bloom (mjukrosa, extra rundad), Ember (varmorange Glass) och Mono (svartvitt, skarpa hörn). Ett tema är en startpunkt — efter att du valt ett kan du fortfarande ändra vilken färg eller inställning som helst individuellt. Nya widgets startar med Glass; bytet sker omedelbart överallt där widgeten är inbäddad, utan att du behöver ändra någon kod på din webbplats.
• Hörn och typsnitt: Två oberoende stilinställningar. Hörn anger hur rundade panelen, pratbubblorna och knapparna är (Runda, Mjuka eller Skarpa), och Typsnitt väljer det typsnitt besökarna ser (Standard, Serif, Rundat eller Mono) — typsnitten hämtas från vad som redan finns på besökarens enhet, så inget extra laddas på din webbplats.
• Visningsnamn: Visas i widgetens rubrik.
• Logotyp: Ladda upp en bild som visas högst upp i chatten. Använd din företagslogotyp eller ett vänligt porträttfoto.
• Startikon: Ikonen på själva den flytande chattknappen. Välj en av de inbyggda ikonerna (chattbubbla, pappersflygplan, frågetecken med mera), återanvänd din uppladdade logotyp eller ladda upp en separat egen bild — praktiskt om du vill ha ett foto på en verklig teammedlem som hälsar besökare välkomna.
• Färger: Fem färger, där var och en anger vilken del av widgeten den färgar. Varumärkesfärg är den flytande knappen, rubriken och besökarens egna meddelanden, med Varumärkestext för texten som ligger ovanpå. Bot-bubbla är bakgrunden för din bots svar och för skrivindikatorn, med Bot-bubblans text för orden inuti dem och de animerade skrivpunkterna. Chattfönster är panelen bakom alla meddelanden. Välj en färg för Bot-bubblan som tydligt skiljer sig från din Varumärkesfärg — om de två matchar får båda sidor av konversationen samma färg och besökare kan inte skilja din bots svar från sina egna. En ljusgrå bot-bubbla med mörk text bredvid din varumärkesfärg är en säker kombination.
• Position: Placera den flytande chattknappen i det nedre högra eller nedre vänstra hörnet, med horisontell och vertikal förskjutning (i pixlar) om den överlappar något annat på din sida.
• Startfrågor: Förslag på snabbsvar (klickbara knappar) som visas i chatten så att besökare kan komma igång med ett tryck istället för att skriva — till exempel “Vad har ni för priser?” eller “Erbjuder ni support?” — upp till 10 stycken.

Beteende #

• Öppningsmeddelande: Det första meddelandet besökare ser när de öppnar chatten (till exempel “Hur kan jag hjälpa dig?”).
• Ljud: Spela upp ett ljud när ett nytt meddelande anländer i chatten.
• Fråga om aviseringsbehörighet: Uppmana besökare att tillåta webbläsaraviseringar, så att de blir meddelade om svar även när de har bytt flik.
• Proaktiv popup-bubbla: En valfri liten bubbla som dyker upp bredvid chattknappen för att bjuda in besökare. Aktivera den för att ställa in dess meddelande, texten på acceptera/avböj-knappen och hur många sekunder det ska dröja innan den visas. Bubblan döljer sig själv efter 20 sekunder om ingen klickar på den (det antalet är fast), och när en besökare klickar på Inte nu förblir den dold under resten av besöket. Själva chattfönstret öppnas aldrig av sig självt: det öppnas när besökaren klickar på chattknappen eller bubblan, och förblir öppet tills de stänger det.
• AI-svarshastighet: Ett reglage mellan Långsammare (mer mänsklig — AI:n tar en paus innan den svarar) och Maxhastighet (mer robotlik — svaren kommer så snabbt som möjligt). Balanserad ligger i mitten.

Språk #

Widgeten är i sig flerspråkig — det finns inget som behöver aktiveras.

• Det väljer besökarens språk automatiskt. Först tittar det på språket som din sida anger i sin HTML (<html lang="it">), sedan återgår det till besökarens webbläsarspråk. Om inget av dessa är ett språk vi stöder, visas widgetens egna etiketter på engelska och ditt välkomstmeddelande, popup-bubbla och startfrågor visas exakt som du skrev dem.
• Eller välj ett själv. Fältet Widgetspråk i avsnittet Beteende är inställt på Auto som standard, vilket är detekteringen ovan. Välj ett språk där så förblir widgetens egna etiketter (besökarformulärets fält för förnamn, e-post och telefon samt deras exempeltext, integritetsmeddelandet, knapparna) på det språket oavsett vad sidan eller webbläsaren säger. Använd detta när din webbplatsbyggare inte anger rätt språk, eller när du vill ha ett fast språk för alla besökare.
• Språk som stöds: Engelska, nederländska, tyska, franska, spanska, italienska, portugisiska, rumänska, polska, arabiska, finska, filippinska, slovenska, thailändska, bengaliska och japanska. Detta är listan för widgetens egna knappar och etiketter.
• Dina meddelanden översätts åt dig. Varje gång du sparar översätts ditt välkomstmeddelande, proaktiva popup-bubbla och startfrågor till alla sexton språk ovan. Du skriver dem bara en gång, på det språk du föredrar: språket du skrev på känns igen från själva texten, den versionen behålls ord för ord, och alla andra språk är en översättning av den. Det spelar ingen roll vilket språk ditt konto är inställt på.
• Skriv varje meddelande på endast ett språk. Om du lägger in två språk i samma fält – till exempel en engelsk rad och en italiensk rad – behandlas hela innehållet som ett enda meddelande och översätts som det står, vilket gör att en italiensk besökare får se samma mening två gånger. Skriv det en gång, på det språk du föredrar.
• AI:n svarar på besökarens språk. Oavsett vilket språk någon skriver på, svarar din agent på samma språk, oavsett vilket språk widgetens etiketter visas på. Om du hellre vill att den alltid svarar på ett fast språk, ange det i din agents instruktioner.

Tips: om din webbplats inte anger ett lang-attribut i sin <html>-tagg, lägg till ett. Det är den starkaste signalen vi har för att välja rätt språk, särskilt för besökare som surfar från utlandet.

Lead-insamling & Integritet #

• Samla in besökarinformation: Avstängd som standard. När den är påslagen ombeds besökare att ange namn och e-post (och valfritt telefonnummer) innan konversationen börjar, så att du fångar upp leadet även om de lämnar chatten mitt i.
• Formulärtitel och Formulärunderskrift: Anpassa rubriken och den korta förklaringen som visas ovanför formuläret.
• Samla in telefonnummer: Slå på för att även be om ett telefonnummer; avstängd samlar endast in namn och e-post.

En besökare lämnade ett telefonnummer och har lämnat din webbplats — kan jag fortsätta på WhatsApp? Ja. Öppna deras chatt och välj Fortsätt på WhatsApp från menyn med de tre prickarna (WhatsApp Web eller WhatsApp Business måste vara anslutet). DM Champ skapar en länkad WhatsApp-konversation för samma person, kopierar deras namn, e-post och uppgifter, och AI:n för över vad de sa på din webbplats, så att ingen behöver upprepa sig. Webbplatschatten stannar där den är och båda chattarna pekar på varandra under Länkade konversationer i kontaktpanelen. Se Chattgränssnitt.

Kan AI-agenten själv föreslå att byta till WhatsApp? Ja, och det krävs ingen extra funktion — en rad i agentens instruktioner räcker. Skapa en kortlänk för ditt WhatsApp-nummer med ett förifyllt meddelande som “Hej, jag chattade på er webbplats och vill fortsätta här”, och berätta sedan för agenten när den ska skickas, till exempel: “Om besökaren behöver gå, vill fortsätta senare eller frågar efter WhatsApp, erbjud att fortsätta där och skicka den här länken: (din kortlänk)”. Länkar i widgeten är klickbara, så besökaren hamnar i WhatsApp med ditt nummer valt och meddelandet förifyllt, och deras första meddelande öppnar en WhatsApp-konversation i din inkorg. Om besökaren lämnade telefonnumret de skriver från (med landsnummer) i widgetformuläret, länkar DM Champ automatiskt de två konversationerna och AI:n på WhatsApp känner redan till webbplatschatten, precis som med Fortsätt på WhatsApp. Om inget telefonnummer samlades in länkas inte de två chattarna, så se till att det förifyllda meddelandet är tillräckligt specifikt för att WhatsApp-agenten ska veta var personen kom ifrån.

• Kräv godkännande av integritetspolicy: Kräv valfritt att besökare godkänner din integritetspolicy innan de chattar, och ange URL:en den pekar till.

Vad lagrar widgeten i en besökares webbläsare, och behöver jag placera den bakom en cookie-banner? Ingenting lagras bara genom att en sida laddas. Widgeten skriver inga cookies och använder ingen webbläsarlagring förrän besökaren väljer att chatta: skickar ett första meddelande, fyller i formuläret för besökarinformation eller godkänner din integritetspolicy. Från det ögonblicket sparar den ett slumpmässigt konversations-ID och en kopia av konversationen i webbläsaren, som förstapartslagring på din egen domän, så att chatten finns kvar när de kommer tillbaka. Den laddar inga analys- eller spårningsskript och sätter inga tredjepartscookies. Eftersom ingenting skrivs förrän besökaren ber om att få chatta, faller det under lagring som är absolut nödvändig för en tjänst som besökaren har efterfrågat, så du kan ladda den utan att placera den bakom en samtyckesbanner. Om din webbplats ändå använder ett verktyg för samtycke går det bra att behålla widgeten bakom det; chatten visas helt enkelt när besökaren har gett sitt samtycke.

Kanaler & Inbäddning #

• Bifoga-knapp: Låter besökare skicka bilder och filer i chatten.
• Emoji-väljare: Lägger till en emoji-väljare bredvid meddelanderutan.
• Kanallänkar: Inkludera valfritt WhatsApp-, Instagram- eller Messenger-länkar så att besökare kan fortsätta konversationen på den plattform de föredrar. Detta visas endast när du har anslutit ett WhatsApp-nummer, Instagram eller Messenger.
• Åtgärdsknappar: En rad genvägar högst upp i chatten som tar besökaren någonstans istället för in i en konversation – se Åtgärdsknappar nedan.
• Domän-vitlista: Begränsa vilka webbplatser som får bädda in din widget. Lägg till de domäner där du har installerat den (t.ex. example.com eller *.example.com); lämna tomt för att tillåta alla domäner.
• Blockerade länder: Håll widgeten borta från besökare i länder du inte betjänar. Besökare vars nätverksplats finns i ett land du valt ser aldrig widgeten, och alla chattar de försöker starta nekas. Lämna tomt för att tillåta alla. Se Håll bottar och kreditförbrukning borta nedan.
• Dirigera dessa chattar till: Välj den kampanj eller agent som ska hantera chattar som kommer från koden du snart ska kopiera. Lämna den på Kontostandard för att använda din vanliga chattwidget-dirigering. Se Skicka olika sidor till olika kampanjer nedan.
• Inbäddningskod: Välj Flytande bubbla eller Inline och kopiera installationskoden (se nedan).
• Demolänk för klient: Klistra in valfri webbadress för att få en delbar länk som öppnar den webbplatsen med din widget körandes ovanpå – inget behöver installeras hos dem. Se Visa widgeten på någon annans webbplats nedan.

Längst ner i panelen tar åtgärden Ta bort chattwidget bort widgeten från din webbplats omedelbart — detta kan inte ångras, och besökare kommer inte längre att se chattbubblan.

Åtgärdsknappar #

Vissa besökare vill inte chatta. De vill ha ditt telefonnummer, din adress eller din e-post, och de vill ha det med ett tryck. Åtgärdsknappar är en rad genvägar högst upp i chattpanelen för just detta.

Lägg till upp till sex stycken. Varje knapp har en etikett (texten på knappen) och en destination, och destinationen beror på vilken åtgärd du väljer:

Dessa knappar använder inte krediter. Att trycka på en knapp skickar inget meddelande och startar ingen konversation – den tar bara besökaren dit de bad om att få gå. Endast en faktisk konversation med din AI-agent använder krediter, precis som tidigare.

Några saker som är bra att veta:

• Knapparna förblir synliga medan besökaren chattar. Någon kan ställa två frågor och ändå trycka på Vägbeskrivning efteråt utan att ladda om sidan.
• Dina etiketter visas exakt som du skrev dem. Till skillnad från ditt välkomstmeddelande och dina startfrågor översätts inte knappetiketter automatiskt, så om du har besökare på flera språk, håll etiketterna korta och tydliga (eller skriv dem på ditt huvudspråk).
• Fyll i en knapp korrekt annars sparas den inte. Om ett telefonnummer, en e-postadress eller en länk inte är giltig, meddelar panelen detta och blockerar Spara ändringar istället för att publicera en knapp som inte skulle göra något på din webbplats.
• De är inte FAQ-svar. Åtgärdsknappar skickar bara folk vidare; de svarar inte med förskriven text. Frågor är din AI-agents uppgift, och den svarar på dem utifrån din kunskapsbas. Om du vill föreslå vad besökaren kan fråga om, använd startfrågor under Utseende istället.

Vad du inte kan anpassa #

Panelen Hantera innehåller hela uppsättningen alternativ. I synnerhet:

• Ingen anpassad CSS eller stilmall. Styling är vad tema-, hörn-, typsnitts- och färgväljarna erbjuder – du kan inte injicera din egen CSS i widgeten, och regler på din sida når inte in i den.
• Ingen anpassad platshållartext i meddelanderutan.
• Ingen videoinbäddning i chatten.
• Ingen timer för automatisk döljning. Inbjudningsbubblan försvinner av sig själv efter 20 sekunder och det antalet kan inte ändras; det öppna chattfönstret stängs aldrig av sig självt. Om bubblan ligger över ditt sidinnehåll, flytta widgeten med Position-förskjutningar eller stäng av bubblan och behåll bara startknappen.

Om något av detta är ett hinder för dig, ger inline-inbäddning dig mest kontroll: widgeten ligger i en behållare på din egen sida, som du själv storleksanpassar och placerar.

Håll bottar och kreditförbrukning borta #

Varje AI-svar kostar krediter, så ett skript (eller en uttråkad person) som öppnar chatt efter chatt på din webbplats är den enda sak en publik widget måste försvara sig mot. Widgeten hanterar det mesta av detta på egen hand, och två inställningar på Hantera-panelen låter dig strama åt det för din webbplats.

• Domän-vitlista. Endast de webbplatser du listar kan visa widgeten. Alla som kopierar din inbäddningskod till en annan webbplats får ingenting.
• Blockerade länder. Besökare vars nätverksplats finns i ett land du blockerar ser aldrig widgeten, och en chatt de försöker starta ändå nekas. Platsen kommer från besökarens anslutning: någon på en VPN visas som VPN-landets plats, och en besökare vars plats inte kan fastställas släpps igenom istället för att stängas ute. Din egen förhandsgranskning i appen fortsätter att fungera även om du blockerar landet du befinner dig i.
• Nya konversationer per anslutning. En anslutning (i praktiken ett hushåll eller en kontorsadress) kan öppna 20 nya konversationer per dag på en widget. Återkommande besökare som fortsätter sin befintliga chatt räknas inte, endast helt nya konversationer gör det, så ett skript som fortsätter starta nya chattar för att generera AI-svar tar slut efter 20 medan riktiga besökare aldrig märker något. Om många människor delar en anslutning på din webbplats (ett campus, ett callcenter), höj antalet via REST API med max_new_chats_per_ip_daily; 0 stänger av kontrollen.
• Inbyggda begränsningar. Utöver det är varje webbläsarsession begränsad i hur många meddelanden den kan skicka per minut och per dag, och agenten som svarar på chatten slutar svara en besökare när den når Max AI-meddelanden per chatt som ställts in under dess Svarsbegränsningar.

Inget av detta identifierar enheter eller personer: widgeten lagrar ingenting i en besökares webbläsare förrän de väljer att chatta (se ovan), och det sker ingen fingeravtrycksidentifiering.

Installationsinstruktioner #

För att lägga till chattwidgeten på din webbplats, lägg till en rad kod i din webbplats HTML.

1. Öppna din webbplats HTML-fil i en textredigerare.
2. Hitta den avslutande </body>-taggen — den finns vanligtvis längst ner i filen.
3. Klistra in denna kodrad precis före </body>-taggen, så att resten av din sida laddas först:

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

4. Ersätt CONFIG_ID med din unika konfigurationsidentifierare, som visas i avsnittet Kanaler & Inbäddning (Channels & Embed) i administrationspanelen. Denna identifierare är specifik för ditt konto och kopplar widgeten till ditt meddelandesystem.

Kodsnutten kommer inte att göra din webbplats långsammare: det är en liten inläsare, och själva widgeten laddas ner i bakgrunden utan att blockera sidan. Om du ändå vill att widgeten ska vänta tills din sida har laddats klart helt, kan du istället omsluta samma URL så här:

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

Och om det du vill fördröja är den lilla inbjudningsbubblan snarare än widgetinläsningen, så är det fördröjningen för Proaktiv popup-bubbla i avsnittet Beteende ovan — ingen kod behövs.

Här är ett komplett exempel på hur din HTML-fil bör se ut med chattwidgeten implementerad:

<!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>

Bädda in infogat på en sida (avancerat) #

Om du hellre vill att chatten ska visas som en del av din sida — till exempel inuti en dedikerad “Kontakta oss”-sektion, en hjälpflik eller ett sidofält — istället för som en flytande bubbla i hörnet, ändra Inbäddningskod (Embed snippet) till Inline i administrationspanelen och kopiera inline-koden.

Det ser ut så här:

<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> är monteringspunkten – chattpanelen renderas inuti den och fyller dess dimensioner. Styla div-elementet hur du vill (ge det en fast höjd, placera det i en flex-container, placera det i en rutnätscell, etc.) så kommer chattpanelen att följa med.

Du behöver bara en <script>-tagg på sidan, även om du bäddar in flera chattwidgetar. Skriptet skannar sidan efter varje <div data-chat-widget="…"> och monterar en chattpanel i varje.

När ska man välja inline kontra flytande:

• Flytande bubbla passar för en “Behöver du hjälp?”-knapp som alltid är tillgänglig på hela webbplatsen.
• Inline-inbäddning passar när chatten ska finnas på en specifik plats – en supportsida, ett sidofält i en kunskapsdatabas, en hjälpflik i en app – och kännas som en naturlig del av den sidan.

Inline-inbäddningen återanvänder samma konfiguration som den flytande bubblan (logotyp, välkomstmeddelande, lead-insamling, startfrågor, etc.), så du behöver inte ställa in något två gånger.

Visa widgeten på någon annans webbplats #

Du kan visa din chattwidget körandes på en webbplats du inte kontrollerar — ingen kod eller åtkomst till deras webbplats krävs. Det är det snabbaste sättet att visa en potentiell kund hur assistenten skulle se ut på deras egna sidor.

1. Öppna panelen Hantera och scrolla till Kanaler & Inbäddning.
2. I Klient-demolänk, skriv in webbadressen (till exempel www.theircompany.com).
3. Klicka på Kopiera för att kopiera länken, eller Öppna för att se den själv först.
4. Skicka länken till den du vill visa den för.

När länken öppnas laddas webbplatsen med din chattwidget flytande ovanpå, precis som den skulle se ut om den vore installerad. Alla med länken kan öppna den — det finns inget att logga in på.

Några saker som är bra att veta:

• Chattar från demot är verkliga. Meddelanden som en besökare skickar i ett demo hamnar i din inkorg och besvaras av din agent, och de använder krediter precis som alla andra konversationer.
• Sidan är utan varumärkesprofilering. Den visar deras webbplats och din widget, och inget annat.
• Vissa webbplatser kan inte ramas in. Ett antal webbplatser (banker, stora återförsäljare, allt bakom strikta säkerhetsinställningar) blockerar andra sidor från att visa dem. När det händer fungerar länken fortfarande: den visar ett neutralt simulerat webbläsarfönster istället för den riktiga webbplatsen, med din widget aktiv ovanpå så att demot fortfarande fyller sin funktion.
• Det ändrar inte deras webbplats. Ingenting installeras och ingenting ändras — demot existerar bara inuti den länken.

Demolänken använder alltid ditt kontos standarddirigering, oavsett vad Dirigera dessa chattar till är inställt på. Om du vill att demochattar ska hanteras av en specifik agent, ställ först in den agenten som standard för din chattwidget.

Skicka olika sidor till olika kampanjer #

Som standard hanteras varje chatt som kommer in via din widget av samma kampanj eller agent. Du kan åsidosätta detta per sida, så att besökare på din prissida pratar med din säljkampanj medan besökare på din hjälpsida pratar med din supportagent – allt från samma chattwidget.

Det finns två sätt att få koden:

• Från kampanjen eller agenten. På sidan Kampanjer, öppna menyn ⋮ för en kampanj och välj Lägg till på webbplats. På sidan Agenter, klicka på knappen </> på raden, eller öppna agenten och gå till fliken Ingångspunkter. Oavsett vilket får du ett kodavsnitt redo att klistras in som redan är kopplat till den kampanjen eller agenten.

  En agents flik Ingångspunkter har också en panel för Webbchatt-widget som visar hur många webbchattar agenten redan hanterar. Chattar från en inbäddning når agenten direkt, så du behöver inte skapa en ingångspunktsregel för dem — en agent utan några regler alls svarar fortfarande på sin inbäddning.

  Lägg till på webbplats visas endast för kampanjer som är aktiva och konfigurerade för att hantera inkommande chattar. En utkastkampanj kan ännu inte ta emot besökare, så alternativet är dolt tills du publicerar den. På sidan Agenter visas det för aktiva agenter. En pausad agent skulle ta emot chatten men aldrig svara, så alternativet är dolt tills du aktiverar agenten igen. Det finns ingen kanal att konfigurera för en agent – en agent kan ta emot en chatt från vilken kanal som helst.

• Från widgetinställningarna. I Inställningar → Kanaler → Hantera för din chattwidget, ställ in Dirigera dessa chattar till och kopiera kodsnutten därunder. Om du ändrar i rullistan skrivs kodsnutten om.

Det flytande kodfragmentet bär destinationen i adressen:

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

Det infogade kodfragmentet bär den istället på <div>, så att en sida kan innehålla flera chattar som går till olika ställen:

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

För en agent ändras formuleringen till ?agent=AGENT_ID eller data-agent="AGENT_ID".

Några saker som är bra att veta:

• Använd kopieringsknappen istället för att skriva in ID:t för hand. Om ID:t inte matchar en kampanj eller agent på ditt konto fungerar chatten fortfarande, men återgår till din standarddirigering.
• Någon som redan är mitt i en konversation stannar hos den de började med, även om de senare hamnar på en sida som pekar någon annanstans. Detta förhindrar att en konversation byter personlighet halvvägs.
• En sid-specifik destination har prioritet över din kontostandard och över nyckelordsutlösare.

Berätta för widgeten vem besökaren är (Avancerat) #

Om du placerar chattwidgeten i ett medlemsområde, en kundportal eller en app där användare redan är inloggade, vet din webbplats redan vilka de är. Du kan skicka vidare den informationen till widgeten så att besökaren slipper ange uppgifter de redan har gett dig, och så att din AI kan använda det du redan vet om dem.

Lägg till ett litet inställningsblock före widgetskriptet:

<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 sida bör fylla i dessa värden på serversidan, baserat på vem som är inloggad.

Två saker händer:

• Formuläret “Innan vi börjar…” hoppas över. Med ett namn och en e-postadress angivna går besökaren direkt in i konversationen, och dessa uppgifter sparas på deras kontakt precis som om de hade skrivit in dem själva.
• Allt under data skickas till din AI. Allt du placerar där — abonnemang, ordernummer, förnyelsedatum, kreditsaldo, hur många platser de har — blir en del av vad AI:n vet om personen, så att den kan svara på “när förnyas mitt abonnemang?” utan att först behöva fråga vem de är. Använd de fältnamn som är logiska för dig; de visas på kontakten under Anpassade fält. Upp till 20 värden skickas med varje meddelande, så om abonnemanget ändras mitt under en konversation ser AI:n det nya värdet.

För inbäddningar (inline embeds) kan du istället placera samma information på <div>, vilket är praktiskt när en sida innehåller flera chattar:

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

Om din webbplats bara vet vem besökaren är efter att sidan har laddats — till exempel i en enkelsidig app (SPA) där inloggning sker utan att sidan laddas om — anropa detta när du har uppgifterna, så uppdaterar widgeten sig själv:

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

Några saker som är bra att veta:

• Om två olika personer loggar in på samma dator startar den andra personen en ny konversation istället för att se den första personens chatt. Widgeten märker att personen har bytt och återställer sig själv.
• I sig själv är detta till för kontext, inte för att logga in någon. Konversationer hålls fortfarande separata på samma sätt som tidigare, så att skicka en id låter ingen öppna någon annans chatt, och någon som använder en annan enhet eller webbläsare startar en ny konversation där. För att fortsätta konversationen mellan enheter, signera id enligt beskrivningen nedan.
• Det är valfritt. En widget på en vanlig offentlig sida behöver inget av detta och beter sig precis som tidigare.

Återuppta samma konversation på vilken enhet som helst (signerat besökar-ID) #

Om dina kunder har konton kan du låta deras chatt följa med dem: logga in på en telefon, fortsätt på en bärbar dator, och det är samma konversation med samma kontakt i din inkorg, och AI:n vet fortfarande allt som har sagts. För detta behöver DM Champ bevis på att besökaren verkligen är den som din sida säger att de är, annars skulle vem som helst kunna skriva in ett kundnummer i sin webbläsare och läsa den kundens chatt. Beviset är en signatur som du beräknar på din server.

1. I widgetens Hantera-panel, under Kanaler & Inbäddning, leta upp Inloggade besökare och klicka på Generera hemlighet. Kopiera identitetshemligheten. Förvara den endast på din server; placera den aldrig på själva sidan.

2. När din server renderar en sida för en inloggad kund, beräkna en HMAC-SHA256 av kundens ID med hjälp av hemligheten, som en hex-sträng med gemener:

// 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. Placera ID:t och hashen i inställningsblocket, bredvid namnet och e-postadressen som du redan skickar med:

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

Den inbäddade widgeten tar samma värde som data-visitor-hash på <div>, och window.chatWidget.setVisitor({ visitor: { id, hash } }) fungerar för appar som loggar in användare utan att sidan laddas om.

Vad som händer när signaturen har verifierats:

• Kundens chatt lagras under deras konto istället för under webbläsaren, så det är samma konversation på varje enhet och varje webbläsare där de är inloggade, och en kontakt i din inkorg.
• Deras tidigare meddelanden laddas på den nya enheten, och AI:n fortsätter där de slutade.
• Om signaturen är felaktig beter sig widgeten tyst som den gjorde tidigare, som en vanlig chatt per webbläsare, och skriver ut orsaken i webbläsarkonsolen så att en utvecklare kan upptäcka det. Dina besökare ser aldrig något felmeddelande.
• ID:t jämförs exakt som du skickade det, så signera samma värde som du skickar som id, och använd samma ID för samma person överallt.

Två saker att känna till:

• Återskapa i Hantera-panelen ger dig en ny hemlighet. Sidor som fortfarande signerar med den gamla återgår till vanliga chattar per webbläsare tills din server använder den nya hemligheten. Befintliga konversationer behålls; de är kopplade till kundens ID, inte till hemligheten.
• En konversation som någon hade innan de loggade in, som en anonym besökare, förblir en separat chatt. Den kontobaserade konversationen börjar med det första meddelandet de skickar medan de är inloggade.

Ändra widgetinställningarna från din egen kod (API) #

Allt på widgetens Hantera-panel kan även ändras via REST API, vilket är praktiskt om du hanterar många webbplatser eller vill att bifoga-knappen ska stängas av automatiskt för en kund. Skicka ett PATCH till https://api.dmchamp.com/v1/chat-widget-configs/CONFIG_ID med din API-nyckel och endast de fält du vill ändra – till exempel döljer {"show_upload_button": false} bifoga-knappen, {"show_emoji_button": false} döljer emoji-väljaren och {"launcher_icon": "chat-dots"} byter ut startikonen. CONFIG_ID är samma identifierare som i ditt inbäddningsskript. Den fullständiga listan över accepterade fält (namn, öppningsmeddelande, färger, startikon, tillåtna domäner, formulär för besökarinfo, integritetsmeddelande, tema, hörn- och typsnittsstil) finns i API-referensen under Chat Widget. Webbplatser hämtar ändringen nästa gång sidan laddas.

Vad du kan förvänta dig efter installationen #

När du har lagt till skriptet på din webbplats skapar chatt-widgeten automatiskt en chattknapp i hörnet av din webbplats (längst ner till höger som standard). Widgeten förblir i en fast position när användare rullar genom dina sidor, vilket säkerställer att den alltid är tillgänglig.

När besökare klickar på den här knappen expanderar den till ett fullständigt chattfönster där de kan starta en konversation, vilket visar ditt öppningsmeddelande. Om Samla in besökarinformation är aktiverat visas först ett litet formulär som frågar efter namn och e-post (och valfritt telefonnummer) innan de kan skriva.

Chattgränssnittet anpassar sig automatiskt till olika skärmstorlekar, så det fungerar sömlöst på både datorer och mobila enheter.

Testa din implementering #

När du har lagt till widgeten på din webbplats, testa att den fungerar:

1. Öppna din webbplats i en webbläsare.
2. Klicka på chattknappen för att öppna widgeten.
3. Skicka ett testmeddelande och bekräfta att du får ett svar.
4. Upprepa på en annan enhet eller webbläsare för att bekräfta att det fungerar överallt.

Om chattwidgeten inte visas på din webbplats, kontrollera följande:

1. Se till att du har ersatt CONFIG_ID med din faktiska konfigurationsidentifierare.
2. Se till att skripttaggen är placerad före den avslutande </body>-taggen.
3. Kontrollera koden efter skrivfel.

Bakom en företagsbrandvägg #

Om widgeten laddas för allmänheten men inte för personal på kontorsnätverket, blockerar nätverket nästan säkert domänen den laddas från. Be ditt IT-team att tillåta, via vanlig HTTPS på port 443:

• Domänen i din inbäddningskodsnutt — adressen i <script src="...">-raden som du kopierade från panelen Hantera.
• api.dmchamp.com — widgeten skickar även sina meddelanden hit.

Inget annat behöver öppnas: inga extra portar och inga inkommande regler. Om widgeten fortfarande inte visas efter det, öppna webbläsarens utvecklarkonsol på sidan och skicka oss vad den rapporterar — en blockerad begäran namnger domänen som nekades, vilket oftast är hela svaret.