Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Tänk dig det här: någon som använder en av dina produkter stöter på ett problem. Det finns några kanaler de kan använda för att rapportera problemet och försöka lösa det.

Bland dem kunde de välja e-post eller ett samtal. Men dessa kommunikationskanaler garanterar inte snabba, än mindre realtidssvar. Men en live, interaktiv chatt med en kundsupportpersonal kan visa sig vara ovärderlig.

En livechattfunktion har visat sig vara ett mycket användbart kommunikationsverktyg. Detta beror på att det gör att du kan engagera dig bättre med användarna, förbättra användarupplevelsen och felsöka problem snabbt och i realtid.

Vad är livechatt och varför är det viktigt?

En livechatt-funktion ingår vanligtvis som en widget på sidan av en webbsida, eller ett popup-fönster som visas efter att webbplatsen har laddats. Det ger realtidskommunikation mellan användare och kundtjänstrepresentanter eller supportteam, direkt i applikationen.

instagram viewer

Användare av livechattfunktionen kan ställa pressande frågor om produkten, fråga om områden de inte förstår, eller rapportera ett problem och begära lösningar. Under tiden kan dina kundsupportteam ge detaljerad feedback i realtid, anpassad till användaren.

Fördelarna med att integrera en livechattfunktion

Att integrera en livechattfunktion kan ge flera fördelar:

  • Förbättra kundserviceinsatser. En bra produkt är bara så bra som dess användning. Att integrera en livechattfunktion hjälper till att avsevärt förbättra en användares upplevelse genom att tillhandahålla ett enkelt sätt att få hjälp och svar snabbt. I slutändan kommer detta att hjälpa dig att erbjuda bättre tjänster som effektiviserar användningen av din produkt.
  • Öka kundernas engagemang. En livechatt gör det möjligt för användare att interagera med din applikation i realtid, vilket får dem att känna sig uppskattade. Detta uppmanar dem att engagera sig mer, registrera sig och testa fler funktioner.
  • Generera fler leads och öka försäljningen. Denna kommunikationskanal ger en möjlighet att interagera med dina användare personligen. Du kan använda denna möjlighet för att fånga potentiella kunder och förvandla dem till kunder. Du kan också ge produktrekommendationer och merförsälja dem på specifika förpackningar av din produkt.
  • Källa för användardata. I den digitala ekonomin kan du ha tillgång till korrekt data om användare avsevärt före konkurrenterna. När användare berättar om buggar eller andra produktproblem är den feedbacken mycket värdefull. Du kan lära dig mer om hur de interagerar med din tjänst och använder den för att förbättra din produkt.

Vad är Chatwoot?

Chatwoot är en kundtjänstplattform med öppen källkod som ger ett personligt sätt att engagera sig med dina användare. Det ger också en förenklad plattform för dig att svara på användarnas frågor och ge feedback över flera kanaler i realtid.

Du kan använda dess automatiserings-, analys- och rapporteringsverktyg för att analysera användarengagemang och enkelt och effektivt hantera kundtjänstverksamheten.

Med hjälp av den här guiden kan du integrera Chatwoot med din applikation och testa dess livechattfunktion med en React-klient och en kundsupportinstrumentpanel.

Chatwoot Project Setup

Chatwoot tillhandahåller ett anpassningsbart livechattplugin som du enkelt kan integrera i din applikation. Du kan anpassa den så mycket som möjligt för att passa dina kundservicebehov.

När du bäddar in pluginkoden i din applikation kan en användare kommunicera med dina kundsupportteam och de kan hantera dessa konversationer från Chatwoots agents instrumentpanel.

  1. Gå över till Chatwoots hemsida, registrera dig för ett konto och navigera till användaröversikten.
  2. För att hantera dina användares konversationer måste du först skapa en inkorg och anpassa den utifrån vad du behöver. Klicka på Ny inkorg knappen för att börja.
  3. Välj nu kanalen där du vill integrera Chatwoot. För den här guiden, välj Hemsida eftersom du integrerar den i en React-app.
  4. Fyll sedan i din webbplatsinformation. För lokal utveckling kan du testa funktionen med en lokal värddomän-URL, men kom ihåg att uppdatera domänen med den aktiva URL-adressen när du har distribuerat den till produktion.
  5. Lägg slutligen till en agent/er för att hantera konversationerna i den här inkorgen. Detta kan vara en medlem av ditt kundsupportteam.

Du har framgångsrikt konfigurerat Chatwoots livechatt med din webbplats inställd som en kommunikationskanal. Chatwoot kommer att generera koden du behöver bädda in i din app för att lägga till widgeten för livechattfunktionen. Denna kod är mycket flexibel eftersom du enkelt integrerar den i en webbklient byggd med någon av de JavaScript frontend-ramverk.

Om du vill anpassa inställningen ytterligare klicka på Fler inställningar knapp.

Reager Project Setup

Skapa en React-applikation och bäddade in Chatwoots livechattplugin för att testa funktionen. Skapa en React-applikation och skapa en ENV-fil i rotkatalogen i din projektmapp för att hålla din webbplatstoken.

REACT_APP_WEBSITE_TOKEN = token

Nästa, i src katalog, skapa en ny mapp och namnge den komponenter. Skapa en ny fil i den här mappen: Livechat.js.

Lägg till följande kod till den här filen:

importera Reagera, {useEffect} från'reagera'
fungeraLivechatt () {
 useEffect(() => {
fönster.chatwootSettings = {
 hideMessageBubble: falsk,
 placera: "höger", 
 språk: "en", 
typ: "standard"
 };

 (fungera(d, t) {
var BASE_URL = " https://app.chatwoot.com";
var g = d.createElement (t), s = d.getElementsByTagName (t)[0];
 g.src = BASE_URL + "/packs/js/sdk.js";
 g.defer = Sann;
 g.async = Sann;
s.parentNode.insertBefore(g, s);


 g.onload = fungera() {
fönster.chatwootSDK.springa({
websiteToken: bearbeta.env.REACT_APP_WEBSITE_TOKEN,
 baseUrl: BASE_URL
 })
 }
 })(dokumentera, "manus");
 }, []);


lämna tillbakanull;
};
exporterastandard Livechatt;

Denna kod integrerar Chatwoots livechattfunktion i din React-app. UseEffect-kroken kör koden inuti återuppringningen en gång när komponenten monteras. Först initialiserar den Chatwoots inställningar för funktionen. Sedan kör den plugin-funktionen, tillhandahållen av Chatwoot, som ställer in livechattwidgeten på sidan.

Den skickar websiteToken som en parameter till chatwootSDK.run-funktionen som kopplar appen till ditt Chatwoot-konto. Slutligen returnerar livechattfunktionen null eftersom du inte behöver rendera några HTML-element.

Testa livechattfunktionen

  1. Importera den här komponenten i din app.js fil och snurra upp utvecklingsservern för att uppdatera de ändringar som gjorts. Du bör se livechattwidgeten på din React köra i webbläsaren.
  2. För att testa livechattfunktionen, klicka på widgeten för att öppna konversationschattväggen och skriva ett meddelande.
  3. Gå nu över till din Chatwoot-användarpanel och navigera till din inkorg, du bör se ett nytt meddelande. Som standard kommer Chatwoot att generera några meddelanden och automatiskt svara direkt efter att en användare skickat ett meddelande, som de du ser nedan. Skriv ett svar på meddelandet och klicka på skicka. Gå tillbaka till widgetchattväggen på din app för att se svaret.

Du har framgångsrikt integrerat en livechattfunktion i din applikation med väldigt få rader kod.

Är en livechatt-funktion värd det?

En livechattfunktion är ett utmärkt sätt att ge kundservice, öka kundnöjdheten och förbättra användarupplevelsen.

Det ger en kommunikationskanal med potential att öka engagemanget, minska svarstiden och anpassa kundsupporten. I slutändan bör det hjälpa dig att förbättra kundserviceverksamheten med liten ansträngning.