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, med rubriken och meddelanderutan flytande som rundade kort inuti), Midnight (Glass i mörka färger), Bloom (mjuk rosa, extra rundad), Ember (varm orange Glass) och Mono (svartvitt, skarpa hörn). Ett tema är en startpunkt — när du har valt ett kan du fortfarande ändra vilken färg eller inställning som helst individuellt. Nya widgets startar med Glass; byte sker omedelbart överallt där widgeten är inbäddad, utan att kodändringar krävs på din webbplats.
• Hörn och typsnitt: Två oberoende stilinställningar. Hörn anger hur rundade panelen, bubblorna och knapparna är (Runda, Mjuka eller Skarpa), och Typsnitt väljer det typsnitt besökarna ser (Standard, Serif, Rundat eller Mono) — typsnitten kommer 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 flera), återanvänd din uppladdade logotyp eller ladda upp en separat egen bild — praktiskt om du vill ha ett foto av en verklig teammedlem som hälsar besökare välkomna.
• Färger: Fem färger, där var och en namnger den 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 Bot-bubblafärg 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: Snabbsvarsförslag (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 är era priser?” eller “Erbjuder ni support?” — upp till 10 stycken.
• Sidfotsrad: En valfri liten rad med din egen text under meddelanderutan, till exempel “Powered by Your Agency”. Den är avstängd som standard, och ingenting visas under meddelanderutan när den är avstängd. Slå på den, skriv din text (upp till 40 tecken) och lägg, om du vill, till en länk som börjar med https://; besökare som klickar på texten öppnar den sidan i en ny flik. Agenturer använder den för att sätta sitt eget namn på de widgets de bygger åt kunder.

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 meddelandebehörighet: Uppmana valfritt besökare att tillåta webbläsarmeddelanden, så att de blir varnade 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 folk. Aktivera den för att ställa in dess meddelande, texten för acceptera/avböj-knappen och hur många sekunder som ska gå innan den visas. Bubblan stängs av sig själv efter 20 sekunder om besökaren inte klickar på den. Det är den enda texten som widgeten visar bredvid chattknappen: det finns ingen inställning för en permanent etikett bredvid knappen.
• AI-svarshastighet: Ett reglage mellan Långsammare (mer mänsklig — AI:n tar en paus innan den svarar) och Maxhastighet (mer robotlik — svar kommer tillbaka så snabbt som möjligt). Balanserad ligger i mitten. Det första meddelandet i ett svar anländer med den fördröjning som reglaget ställer in, med skrivindikatorn visad strax innan.
• Visa en upptagen-notis medan AI:n arbetar: Avstängd som standard. När ett svar tar mer än några sekunder, till exempel för att din agent letar upp något i ett annat system, ser besökare en kort rad bredvid skrivprickarna: “Arbetar på ditt svar” efter 5 sekunder, “Letar upp det åt dig” efter 15, sedan “Jobbar fortfarande på det, nästan klar” och en ursäkt för väntetiden om det tar längre tid. Snabba svar visar fortfarande bara prickarna. Raden följer widgetens språk och visas bara medan din AI faktiskt arbetar på ett svar, aldrig när AI:n är avstängd för den chatten eller en person har tagit över.

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å det språk du skrev ditt välkomstmeddelande på, och ditt välkomstmeddelande, popup-bubbla och startfrågor visas precis som du skrev dem.

• Ett sid-språk som motsäger din hälsning ignoreras. Vissa webbplatsbyggare placerar lang="en" på varje sida oavsett vilket språk webbplatsen är på. När sidan anger ett språk och du skrev ditt välkomstmeddelande på ett annat, behandlar widgeten sidvärdet som en standardinställning från byggaren: den följer besökarens webbläsarspråk istället, och om det inte är ett språk vi stöder, använder den språket du skrev på. En sida som ändrar sitt lang-värde när besökaren väljer ett språk på din webbplats följs alltid. Om du hellre vill slippa förlita dig på detta, lås språket i avsnittet Beteende.

• 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 varje besökare.

• Språk som stöds: Engelska, nederländska, tyska, franska, spanska, italienska, portugisiska, rumänska, polska, arabiska, finska, filippinska, slovenska, thailändska, bengali, japanska, norska (bokmål) och turkiska. Detta är listan för widgetens egna knappar och etiketter.

• Höger-till-vänster-språk visas från höger till vänster. För arabiska, hebreiska, persiska och urdu-talande besökare speglas hela chattfönstret: rubriken, meddelandebubblorna, skrivindikatorn, besökarformuläret och meddelanderutan startar alla från höger. Bubbelknappen stannar i det hörn du valt. Hebreiska, persiska och urdu-talande besökare ser etiketterna på engelska (eller det språk du låst), men layouten följer fortfarande deras språk. Ett meddelande skrivet i en annan riktning, till exempel ett engelskt svar i en arabisk chatt, läses fortfarande i rätt ordning.

• Dina meddelanden översätts åt dig. Varje gång du sparar översätts ditt välkomstmeddelande, proaktiva popup-bubbla och startfrågor till alla arton språk ovan. Du skriver dem bara en gång, på vilket 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 din egen version för ett språk. Avsnittet Översättningar i hanteringspanelen, precis under Beteende, låter dig ersätta den automatiska översättningen med din egen formulering, till exempel formell spanska (“usted”) där den automatiska är informell. Välj ett språk under Språk, fyll sedan i något av följande: Välkomstmeddelande, Popup-meddelande, popup-fönstrets Acceptera-text och Avböj-text (visas medan popup-bubblan är aktiv) samt Startfrågor. Varje fält visar den automatiska översättningen i grått; Starta från den automatiska översättningen kopierar in den så att du kan redigera därifrån. Allt du lämnar tomt behåller den automatiska översättningen. Språk du har skrivit själv listas först, markerade med Din egen formulering, och Ta bort min (språk)-formulering återgår till den automatiska översättningen för det språket. Din egen formulering behålls när du senare redigerar originaltexten; endast de automatiska översättningarna görs om.

• Popup-knapparna översätts också. Knapparna Acceptera och Avböj i den proaktiva popup-bubblan översätts tillsammans med dina andra meddelanden, så att en spansk besökare inte längre ser engelska knappar.

• Skriv varje meddelande på endast ett språk. Om du lägger 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 ser samma mening två gånger. Skriv det en gång, på vilket 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 ska svara på ett fast språk, ange detta i din agents instruktioner.

• Ställ in språket per sida i inbäddningskoden. Kör du en widget på en engelsk webbplats och en översatt kopia av den? Lägg till data-lang i widgetens skript-tagg på varje sida. data-lang="es" visar widgeten på spanska på den sidan oavsett vad webbläsaren säger; data-lang="page" gör att den följer sidans eget <html lang="...">-värde (så lang="es-MX" ger spanska), även när ditt välkomstmeddelande är skrivet på ett annat språk. Det prioriteras över fältet Widgetspråk, som i sin tur prioriteras över automatisk detektering. Till exempel:

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

Behåll inbäddningskoden från Hantera-panelen som den är och lägg bara till data-lang-attributet. För en inbäddad chattpanel, placera data-lang på <div data-chat-widget="…"> istället.

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ökarinfo: Avstängd som standard. När den är på 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: Aktivera för att även be om ett telefonnummer; avstängd samlar endast in namn och e-post.
• Samla in efternamn: Avstängd som standard. Aktivera för att lägga till ett obligatoriskt fält för Efternamn direkt efter Förnamn. Det sparas på kontakten som deras efternamn, så att din AI och allt den letar upp i dina egna system har hela namnet från det första meddelandet. Besökare som redan fyllde i formuläret innan du slog på detta blir inte tillfrågade igen.
• E-postmeddelanden om olästa svar till besökare: en besökare som lämnat en e-postadress och inte har sett ditt svar efter 15 minuter får ett e-postmeddelande som hänvisar dem tillbaka till chatten. Stäng av det under Inställningar → Meddelanden → Chattwidget-besökare. Se E-postmeddelanden till chattwidget-besökare.

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

En besökare lämnade sin e-postadress men bokade aldrig – kan jag följa upp via e-post? Ja, med en automatisering. Ett Skapa kontakt-steg med Kanal inställd på E-post gör om adressen som besökaren lämnade till en e-postkontakt i din anslutna E-postkanal, och ett Skicka meddelande-steg efter det skickas som ett e-postmeddelande; svar kommer in i Chattar för din e-postagent. Hela receptet, inklusive hur du stoppar sekvensen när de väl har bokat, finns i Automatiseringar → Exempel: e-postuppföljning för leads från webbchatt.

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 Your AI Connector 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 #

• Bifogaknapp: 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 länkar till WhatsApp, Instagram eller Messenger så att besökare kan fortsätta konversationen på den plattform de föredrar. Detta visas först när du har anslutit ett WhatsApp-nummer (WhatsApp Business eller WhatsApp Web), Instagram eller Messenger. Om du aktiverar WhatsApp-länken fylls ditt anslutna nummer i; länken förblir redigerbar, så när du byter nummer kan du skriva in det nya där.
• Åtgärdsknappar: En rad genvägar högst upp i chatten som tar besökaren någon annanstans istället för in i en konversation – se Åtgärdsknappar nedan.
• Domänvitlista: 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 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 agenter nedan.
• Inbäddningskod: Välj Flytande bubbla eller Infogad och kopiera installationskoden (se nedan).
• Klientdemolänk: Klistra in valfri webbadress och klicka på Skapa länk för att få en delbar länk som öppnar den webbplatsen med din widget körandes ovanpå, utan att något behöver installeras hos dem. Varje länk du skapar listas, och du kan stänga av dem en och en. Se Visa widgeten på någon annans webbplats nedan.
• Dela länk: En färdig länk som öppnar din assistent på en egen sida, i helskärm, utan att någon webbplats behövs. Kopiera den och skicka den var som helst. Se Dela en direktlänk till chatten 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 begränsad till vad temat, hörnen, typsnitten och färgväljarna erbjuder – du kan inte injicera 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.

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 anger 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 baseras på besökarens anslutning: någon som använder VPN visas som VPN-tjänstens land, 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 i en widget. Återkommande besökare som fortsätter sin befintliga chatt räknas inte, endast helt nya konversationer räknas, så ett skript som fortsätter starta nya chattar för att utnyttja 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.
• Mänsklig kontroll (valfritt). Besökare klarar en snabb Cloudflare Turnstile-kontroll innan deras första meddelande skickas, så att ett skript inte kan starta chattar alls. De flesta behöver aldrig klicka på något; Cloudflare visar bara en kryssruta när de är osäkra. Den använder dina egna kostnadsfria Turnstile-nycklar, se Lägg till en mänsklig kontroll nedan.
• Inbyggda begränsningar. Utöver detta ä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.

Lägg till en mänsklig kontroll (Cloudflare Turnstile) #

Aktivera detta när robotar fortsätter att öppna chattar på din webbplats och inställningarna ovan inte räcker till. Kontrollen körs en gång, precis innan en besökares första meddelande skickas. En besökare som klarar kontrollen kan fortsätta chatta i 24 timmar utan att se den igen, och alla som återvänder till en tidigare konversation kan fortfarande läsa den innan kontrollen.

1. Logga in på ditt Cloudflare-konto (ett gratis konto räcker) och öppna Turnstile.
2. Klicka på Add widget, ge den ett namn och lägg till varje domän som din chatt-widget körs på (till exempel yourshop.com). Låt widget-läget vara inställt på Managed.
3. Kopiera Site key och Secret key som Cloudflare visar dig.
4. I appen, öppna din chatt-widgets Manage-panel, aktivera Human check before chatting, klistra in båda nycklarna och spara.

Vad du kan förvänta dig:

• Kontrollen förblir avstängd tills båda nycklarna har fyllts i, så att aktivera den utan nycklar låser aldrig ute besökare.
• Om en besökare misslyckas med kontrollen, eller lämnar den olöst, skickas inte deras meddelande och de får en Försök igen-knapp.
• Kontrollen visas endast på de domäner du lagt till i Cloudflare. På alla andra domäner nekar Cloudflare den och ingen på den webbplatsen kan skicka ett meddelande, så lägg till varje domän innan du aktiverar den.
• Om din webbplats använder en Content Security Policy, tillåt https://challenges.cloudflare.com för skript och ramar, annars kan kontrollen inte laddas.
• Nycklarna tillhör ditt eget Cloudflare-konto, och den hemliga nyckeln skickas aldrig till dina besökares webbläsare.

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

Installation på Shopify #

1. I din Shopify-admin, gå till Onlinebutik > Teman.
2. På temat som är markerat som ditt nuvarande (publicerade) tema, klicka på …-knappen och välj Redigera kod. Att redigera ett utkast eller en kopia av temat ändrar ingenting i din livebutik.
3. Öppna layout/theme.liquid och scrolla till den avslutande </body>-taggen nära botten.
4. Klistra in din installationsrad precis ovanför </body> och klicka på Spara:

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

Om du installerade widgeten innan installationsraden innehöll defer, visar Shopifys kodredigerare ett rött understreck under den. Det understrecket är en varning från Shopifys kodkontroll angående skriptrader utan defer eller async, inte ett fel: temat sparas fortfarande och widgeten fungerar som den ska. Att lägga till defer enligt ovan gör att understrecket försvinner och ändrar ingenting i hur widgeten beter sig, så det finns inget behov av att installera om på andra webbplatser.

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.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></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.youraiconnector.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. Valfritt: under fältet, välj den Agent som ska svara i denna demo, till exempel en agent du skapat utifrån kundens egen webbplats så att den pratar om deras tjänster, priser och vanliga frågor. Låt den stå på Kontots standard för att använda din vanliga chattwidget-dirigering.
4. Klicka på Skapa länk. Länken kopieras åt dig och visas i listan under fältet, med knapparna Kopiera och Öppna samt vilken agent den använder.
5. Skicka länken till vem 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 demon är verkliga. Meddelanden som en besökare skickar i en demo hamnar i din inkorg och besvaras av din agent, och de använder krediter precis som alla andra konversationer.
• Sidan är utan varumärke. 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 demon fortfarande gör sitt jobb.
• Det ändrar inte deras webbplats. Ingenting installeras och ingenting ändras — demon existerar bara inuti den länken.
• Stäng av en länk när demon är slut. Klicka på Stäng av bredvid länken i listan och bekräfta. Från och med då ser alla som öppnar den en sida som säger att länken har stängts av. Din widget och dina andra demolänkar fortsätter att fungera. En länk som har stängts av kan inte slås på igen; skapa en ny istället.
• Länkar kopierade före 25 september 2026. Demolänkar som skapades innan listan fanns finns inte med i den. De fortsätter att fungera tills du klickar på Stäng av dessa under listan, vilket stänger av alla på en gång (och Slå på dem igen återställer det).

En demolänk som skapas utan en agent använder ditt kontos standarddirigering, oavsett vad Dirigera dessa chattar till är inställt på. Med en agent vald tilldelas varje chatt från den länken till den agenten och besvaras av den. Widgeten behåller sitt eget utseende, namn och välkomstmeddelande. Länken bär den som &agent=AGENT_ID; att lägga till det manuellt till en äldre länk fungerar också (använd &, inte ?, eftersom länken redan innehåller ett ?).

Om du senare tar bort agenten som en demolänk använder, fortsätter länken att fungera: dess chattar går till kontots standarddirigering istället, och listan visar “borttagen agent, använder standard” bredvid den. Att ta bort agenten som är din chattwidget-standard påverkar inte länkar som är kopplade till en annan agent.

Dela en direktlänk till chatten #

Ibland finns det ingen webbplats att placera widgeten på – du vill ge någon en länk och låta dem prata med din assistent direkt. Varje chattwidget har en:

1. Öppna panelen Hantera och scrolla till Kanaler & Inbäddning.
2. Hitta Dela länk (den ligger precis under Klient-demolänken).
3. Klicka på Kopiera för att hämta länken, eller Öppna för att prova den själv.

När den öppnas visas inget annat än din assistent, som fyller hela skärmen – ingen webbplats bakom, ingen bubbla att klicka på först, inget att installera. Lägg den i din Instagram-bio, en QR-kod på en flygblad, en e-postsignatur eller ett WhatsApp-meddelande till en potentiell kund.

Delningslänken följer din chattwidgets standarddirigering. För att istället öppna en specifik agent, lägg till ?agent=AGENT_ID i slutet av länken; varje chatt från den tilldelas då till den agenten och besvaras av den, medan sidan behåller din widgets namn och välkomstmeddelande.

Några saker som är bra att veta:

• Chattar från länken är riktiga. De hamnar i din inkorg, din agent svarar på dem, och de använder krediter precis som alla andra konversationer.
• Sidan bär ingen av våra varumärken. Den visar din assistent och inget annat, och den hålls borta från sökresultat.
• Den fungerar på din egen adress. Om din leverantör kör appen på sin egen domän använder länken också den adressen, så inget okänt visas i den.
• En besökare per länk, per webbläsare. Den som öppnar den behåller samma identitet i den webbläsaren, så att återkomma senare fortsätter samma konversation istället för att starta en främlings. En annan webbläsare, eller en annan widgets länk, är en annan besökare.

Skicka olika sidor till olika agenter #

Som standard hanteras varje chatt som kommer in via din widget av samma agent. Du kan åsidosätta detta per sida, så att besökare på din prissida pratar med din säljagent 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 agenten. På sidan AI-agenter, klicka på </>-knappen på raden, eller öppna agenten och gå till fliken Startpunkter. Oavsett vilket får du ett färdigt kodfragment som redan är riktat mot den 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.

  </>-knappen visas endast för aktiva agenter. En pausad agent skulle ta emot chatten men aldrig svara, så alternativet är dolt tills du slår på den igen. Det finns ingen kanal att ställa in för en agent – en agent kan ta upp 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 kodfragmentet därunder. Att ändra i rullistan skriver om kodfragmentet.

Det flytande kodfragmentet bär destinationen i adressen:

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

Kodfragment som kopierats innan kampanjer togs ur bruk innehåller ?campaign= eller data-campaign= istället. De fortsätter att fungera, så det finns inget behov av att klistra in dem på nytt.

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 agent på ditt konto fungerar chatten fortfarande men faller tillbaka på 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.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>

Din sida bör fylla i dessa värden på serversidan, baserat på vem som är inloggad.

För att även spara ett efternamn, lägg till last_name bredvid name i blocket visitor (data-visitor-last-name på en inbäddad widget). Det är valfritt: ett namn och en e-postadress räcker fortfarande för att hoppa över formuläret, oavsett om Samla in efternamn är aktiverat eller inte.

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.youraiconnector.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 Your AI Connector 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.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></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.youraiconnector.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 för skrivfel.
4. På Shopify, se till att du har redigerat det publicerade temat och klickat på Spara. En ändring som görs i ett utkast eller ett duplicerat tema når aldrig din livebutik.

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