Chattbot på webbplatsen för kundtjänst: widgetar, överlämning och tillgänglighet
Av Roman Zakharenko · Faktagranskad
En chattbot på webbplatsen för kundtjänst är en chattwidget på din webbplats eller i ditt hjälpcenter där en bot besvarar vanliga frågor, samlar in uppgifter och lämnar över samtalet till en agent i realtid när den inte kan hjälpa till. De flesta helpdeskar har en egen widget, så det verkliga arbetet ligger i att konfigurera botflödena, överlämningen, beteendet utanför öppettiderna och tillgängligheten.
I korthet
- Zendesks Web Widget för meddelanden installeras genom att ett kodstycke läggs till på varje sida där den ska visas.
- Zendesk Messaging kan visa olika svar under och utanför öppettiderna.
- Freshdesks AI-agenter kan ställas in så att de samlar in kunduppgifter innan de för över till en människa.
- WCAG 2.2 kräver att all funktionalitet går att använda via tangentbord (2.1.1, nivå A).
- W3C:s teknik med role="log" gör att skärmläsare läser upp nya chattmeddelanden när de kommer in.
Helpdeskens egen widget eller en egen lösning?
Om du redan använder en helpdesk, börja med dess widget. Chattarna hamnar i samma kö som e-post och sociala meddelanden, agenterna svarar från en och samma arbetsyta, och leverantören underhåller widgetkoden.
- Zendesk Web Widget (messaging): i Admin Center går du till Channels > Messaging and social > Messaging, öppnar widgeten och kopierar koden från avsnittet ”Installation”. Lägg till den i källkoden på varje sida där widgeten ska visas, och se till att din brandvägg tillåter widgeten.
- Freshchats webbwidget (Freshdesk): kopiera inbäddningskoden från inställningarna för webbchattkanalen och lägg till den på varje sida där widgeten ska visas. Freshworks dokumenterar också installation i WordPress, Shopify och Squarespace samt i iOS- och Android-appar.
| Alternativ | Passar bra när | Se upp med |
|---|---|---|
| Helpdeskens egen widget | Du vill ha chattar, ärenden och rapportering på ett ställe | Utseende och botlogik är begränsade till det leverantören stöder |
| Helpdeskens widget med en egen bot | Du behöver logik eller integrationer som den inbyggda boten saknar | Överlämning och överföring av sammanhang måste kopplas ihop och testas |
| Helt egenutvecklad widget | Chatten är en del av din produkts gränssnitt | Du ansvarar själv för tillgänglighet, drifttid och integrationen på agentsidan |
Utforma överlämningen från bot till människa
Det är i överlämningen som de flesta webbplatsbottar fallerar. En bra överlämning för kunden vidare till en person utan att hen behöver upprepa sig. Båda de stora helpdeskarna stöder det här mönstret:
- Zendesk: när en AI-agent läggs till i en meddelandekanal ersätts standardsvaret för meddelanden med AI-agentens egna svar. I Zendesks arbetsflödesrecept hälsar AI-agenten på kunden, visar ett formulär för att samla in det agenterna behöver, berättar för kunden att förfrågan skickas till teamet och vidarebefordrar sedan konversationen till en agent, som får en avisering och ser uppgifterna när hen accepterar den. Receptet använder ett kortare formulär för inloggade kunder, utan namn och e-postadress.
- Freshchat och Freshdesk: botflöden lämnar över med åtgärder som ”Assign to group” eller ”Make available for assignment”, och Freshdesks inställningar för överlämning från AI-agenter innehåller ett alternativ för att samla in kunduppgifter före överföringen.
Bestäm vad som ska samlas in utifrån vad dina agenter frågar först. Typiska fält är namn och e-postadress för besökare som inte är inloggade, ett order- eller kontonummer, ärendetypen vald med knappar, en kort beskrivning med kundens egna ord och sidan kunden befann sig på.
Täckning utanför öppettiderna
En widget som lovar ”en agent är strax hos dig” klockan 2 på natten gör mer skada än ingen chatt alls. Planera vad som händer när ingen är online:
- Ställ in öppettider: meddelandekanaler i Zendesk kan använda ett schema för öppettider och visa olika svar under och utanför dessa tider.
- Gör chattar till ärenden: i Zendesks recept eskalerar AI-agenten till en agent i realtid under öppettiderna, och utanför dem samlar den in kundens uppgifter och eskalerar förfrågan som ett e-postärende för uppföljning.
- Låt boten svara på det den kan: svar på vanliga frågor, uppslag av orderstatus och länkar till hjälpcentret fungerar dygnet runt.
- Säg när du svarar: berätta för kunden om dina öppettider och var svaret kommer att komma, till exempel via e-post.
Grundläggande tillgänglighet för chattwidgetar
En chattwidget är interaktivt innehåll som ligger ovanpå din webbplats, så den måste hålla samma tillgänglighetsnivå som resten av sidan. WCAG 2.2 är den aktuella versionen från W3C, och följande framgångskriterier är särskilt relevanta för chatt:
| Kriterium | Nivå | Vad det innebär för en chattwidget |
|---|---|---|
| 2.1.1 Keyboard | A | Att öppna widgeten, skriva, välja knappar och stänga den fungerar utan mus |
| 2.4.7 Focus Visible | AA | Användarna kan se vilken knapp eller vilket fält som har tangentbordsfokus |
| 2.4.11 Focus Not Obscured (Minimum) | AA | Startknappen eller den öppna chattpanelen döljer inte helt det element på sidan som har fokus |
| 4.1.2 Name, Role, Value | A | Anpassade knappar, menyer och startknappen exponerar sina namn och tillstånd för hjälpmedel |
| 4.1.3 Status Messages | AA | Uppdateringar som ”Meddelandet har skickats” läses upp utan att fokus flyttas |
För själva konversationen markerar W3C-tekniken ARIA23 chatthistoriken med role="log": nya meddelanden läggs till i slutet av regionen och skärmläsare läser upp dem när de dyker upp. Med en widget från en leverantör bör du testa din egen konfiguration med tangentbord och skärmläsare, eftersom anpassade färger och botinnehåll fortfarande kan skapa problem.
Så kan TascaLab hjälpa till
TascaLab sätter upp chattbottar på webbplatser ovanpå den helpdesk du redan använder, till exempel Zendesk eller Freshdesk, eller kopplar en egen bot till Jira, Slack eller interna verktyg via API:er, webhooks och Make eller n8n. En Starter Chat Bot (4 000 kr) täcker en eller två kanaler med vanliga frågor och enkel insamling av uppgifter; en Standard Chat Bot (5 700 kr) täcker tre till fem kanaler med mer komplexa samtal och smidigare överlämningar. Varje projekt omfattar 30 dagars support efter lansering och grundläggande dokumentation, utan dolda avgifter, och de flesta uppsättningar tar 1–3 veckor. Börja med ett kostnadsfritt Health Check-samtal på 30 minuter.
Vanliga frågor
Behöver jag ett separat chattbotverktyg om min helpdesk har en widget?
Inte nödvändigtvis. Både Zendesk och Freshdesk låter dig koppla en bot eller AI-agent till sin webbwidget. Ett separat verktyg är motiverat när du behöver logik eller integrationer som den inbyggda boten inte erbjuder.
Vad ska boten samla in innan den lämnar över till en agent?
Det som dina agenter frågar först: oftast kontaktuppgifter för anonyma besökare, ett order- eller kontonummer, ärendetyp och en kort beskrivning. Både Zendesk och Freshdesk stöder insamling av uppgifter före överföringen.
Vad ska en chattbot på webbplatsen göra utanför öppettiderna?
Svara på det den kan, förklara dina öppettider och göra resten till ett ärende. Zendesks dokumenterade recept samlar in kundens uppgifter utanför öppettiderna och eskalerar förfrågan som ett e-postärende.
Vilken tillgänglighetsstandard gäller för en chattwidget?
WCAG 2.2 är den aktuella versionen från W3C. Tangentbordsanvändning (2.1.1), synligt fokus (2.4.7), namn och roller för kontroller (4.1.2) och statusmeddelanden (4.1.3) är särskilt relevanta för chatt.
Vill du ha det här på plats i ditt team?
Boka en kostnadsfri Health Check: ett samtal på 30 minuter och en skriftlig rapport med 2–3 konkreta rekommendationer, ett fast pris och uppskattade driftskostnader. Ingen säljpitch.
Källor
- Zendesk Help Center — Installing the Web Widget for messaging
- Zendesk Help Center — Configuring messaging responses and business hours
- Zendesk Help Center — Workflow recipe: Using an AI agent to collect customer info and immediately escalate to a human agent
- Freshworks Support — Install Freshchat on your web/apps
- Freshworks Support — Gracefully handover conversations from bots to your Freshchat agents
- Freshdesk Support — Configure handover settings for AI Agents
- W3C — Web Content Accessibility Guidelines (WCAG) 2.2
- W3C — ARIA23: Using role=log to identify sequential information updates