Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Kuvittele tämä: joku tuotettasi käyttävä kohtaa ongelman. On olemassa muutamia kanavia, joiden avulla he voivat ilmoittaa ongelmasta ja yrittää ratkaista sen.

He saattoivat valita sähköpostin tai puhelun. Mutta nämä viestintäkanavat eivät takaa nopeita, puhumattakaan reaaliaikaisia ​​vastauksia. Mutta live, interaktiivinen chat asiakastuen ammattilaisen kanssa voi osoittautua korvaamattomaksi.

Live-chat-ominaisuus on osoittautunut erittäin hyödylliseksi viestintävälineeksi. Tämä johtuu siitä, että sen avulla voit olla paremmin yhteydessä käyttäjiin, parantaa käyttökokemusta ja tehdä vianmäärityksen nopeasti ja reaaliajassa.

Mikä on live-chat ja miksi se on tärkeää?

Live-chat-ominaisuus sisällytetään yleensä widgetiksi verkkosivun reunaan tai ponnahdusikkunana, joka tulee näkyviin sivuston latautumisen jälkeen. Se tarjoaa reaaliaikaisen viestinnän käyttäjien ja asiakaspalvelun edustajien tai tukitiimien välillä suoraan sovelluksen sisällä.

Live-chat-ominaisuuden käyttäjät voivat esittää kiireellisiä kysymyksiä tuotteesta, tiedustella alueita, joita he eivät ymmärrä, tai ilmoittaa ongelmasta ja pyytää ratkaisuja. Samaan aikaan asiakastukitiimisi voivat antaa reaaliaikaista, yksityiskohtaista palautetta, joka on räätälöity käyttäjälle.

Live-chat-ominaisuuden integroinnin edut

Live-chat-ominaisuuden integroiminen voi tuoda useita etuja:

  • Paranna asiakaspalvelutyötä. Hyvä tuote on juuri niin hyvä kuin sen käyttö on. Live-chat-ominaisuuden integrointi auttaa parantamaan merkittävästi käyttökokemusta tarjoamalla helpon tavan saada apua ja vastauksia nopeasti. Viime kädessä tämä auttaa sinua tarjoamaan parempia palveluita, jotka virtaviivaistavat tuotteesi käyttöä.
  • Lisää asiakkaiden sitoutumista. Live-chatin avulla käyttäjät voivat olla vuorovaikutuksessa sovelluksesi kanssa reaaliajassa, mikä saa heidät tuntemaan itsensä arvostetuiksi. Tämä kehottaa heitä aktivoimaan enemmän, rekisteröitymään ja testaamaan lisää ominaisuuksia.
  • Luo lisää liidejä ja lisää myyntiä. Tämä viestintäkanava tarjoaa mahdollisuuden olla vuorovaikutuksessa käyttäjien kanssa henkilökohtaisesti. Voit hyödyntää tätä tilaisuutta kerätä liidejä ja tehdä niistä asiakkaita. Voit myös antaa tuotesuosituksia ja myydä niitä tuotteesi tietyissä pakkauksissa.
  • Käyttäjätietojen lähde. Digitaalisessa taloudessa tarkat käyttäjätiedot voivat nostaa sinut huomattavasti kilpailijoiden edellä. Kun käyttäjät kertovat sinulle virheistä tai muista tuoteongelmista, palaute on erittäin arvokasta. Voit oppia lisää siitä, kuinka he ovat vuorovaikutuksessa palvelusi kanssa, ja käyttää sitä tuotteesi parantamiseen.

Mikä on Chatwoot?

Chatwoot on avoimen lähdekoodin asiakaspalvelualusta, joka tarjoaa yksilöllisen tavan olla yhteydessä käyttäjiisi. Se tarjoaa myös yksinkertaistetun alustan, jonka avulla voit vastata käyttäjien kyselyihin ja antaa palautetta useiden kanavien kautta reaaliajassa.

Sen automaatio-, analytiikka- ja raportointityökalujen avulla voit analysoida käyttäjien sitoutumista ja hallita asiakaspalvelutoimintoja helposti ja tehokkaasti.

Tämän oppaan avulla voit integroida Chatwootin sovellukseesi ja testata sen live-chat-ominaisuutta React-asiakassovelluksella ja asiakastuen hallintapaneelilla.

Chatwoot-projektin asetukset

Chatwoot tarjoaa mukautettavan live-chat-laajennuksen, jonka voit helposti integroida sovellukseesi. Voit muokata sitä niin paljon kuin mahdollista vastaamaan asiakaspalvelutarpeitasi.

Kun olet upottanut laajennuskoodin sovellukseesi, käyttäjä voi olla yhteydessä asiakastukitiimiisi, ja he voivat hallita näitä keskusteluja Chatwootin agentin hallintapaneelista.

  1. Suuntaa kohti Chatwootin verkkosivusto, rekisteröidy tilille ja siirry käyttäjän hallintapaneeliin.
  2. Jotta voit hallita käyttäjien keskusteluja, sinun on ensin määritettävä postilaatikko ja mukautettava se tarpeidesi mukaan. Klikkaa Uusi postilaatikko -painiketta aloittaaksesi.
  3. Valitse nyt kanava, johon haluat integroida Chatwootin. Valitse tätä opasta varten Verkkosivusto koska integroit sen React-sovellukseen.
  4. Täytä seuraavaksi verkkosivustosi tiedot. Paikallista kehitystä varten voit testata ominaisuutta paikallisella isäntäverkkotunnuksen URL-osoitteella, mutta kun otat sen käyttöön tuotantoon, muista päivittää verkkotunnus live-URL-osoitteella.
  5. Lisää lopuksi agentti/agentit, jotka hallitsevat tämän postilaatikon keskusteluja. Tämä voi olla asiakastukitiimisi jäsen.

Olet onnistuneesti määrittänyt Chatwootin live-chatin, jossa verkkosivustosi on asetettu viestintäkanavaksi. Chatwoot luo koodin, joka sinun on upotettava sovellukseesi, jotta voit lisätä live chat -ominaisuuden. Tämä koodi on erittäin joustava, koska voit helposti integroida sen web-asiakasohjelmaan, joka on rakennettu millä tahansa JavaScript-käyttöliittymäkehykset.

Jos haluat mukauttaa asetuksia edelleen, napsauta Lisää asetuksia -painiketta.

React Project Setup

Luo React-sovellus ja upotettu Chatwootin live-chat-laajennus testataksesi ominaisuutta. Luo React-sovellus ja luo ENV-tiedosto projektikansiosi juurihakemistoon verkkosivustosi tunnisteen säilyttämiseksi.

REACT_APP_WEBSITE_TOKEN = tunnus

Seuraavaksi vuonna src hakemistoon, luo uusi kansio ja nimeä sen komponentit. Luo tähän kansioon uusi tiedosto: Livechat.js.

Lisää seuraava koodi tähän tiedostoon:

tuonti Reagoi, {useEffect} alkaen'reagoi'
toimintoLivechat () {
 useEffect(() => {
ikkuna.chatwootSettings = {
 hideMessageBubble: väärä,
 asema: "oikea", 
 alue: "en", 
tyyppi: "standardi"
 };

 (toiminto(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.lykkäys = totta;
 g.async = totta;
s.parentNode.insertBefore(g, s);


 g.lataus = toiminto() {
ikkuna.chatwootSDK.juosta({
websiteToken: käsitellä asiaa.env.REACT_APP_WEBSITE_TOKEN,
 baseUrl: BASE_URL
 })
 }
 })(asiakirja, "käsikirjoitus");
 }, []);


palatatyhjä;
};
viedäoletuksena Livechat;

Tämä koodi integroi Chatwootin live-chat-ominaisuuden React-sovellukseesi. UseEffect-koukku suorittaa koodin takaisinkutsun sisällä kerran, kun komponentti asennetaan. Ensin se alustaa Chatwootin asetukset ominaisuudelle. Sitten se suorittaa Chatwootin tarjoaman laajennustoiminnon, joka määrittää live-chat-widgetin sivulle.

Se välittää websiteTokenin parametrina chatwootSDK.run-toiminnolle, joka yhdistää sovelluksen Chatwoot-tiliisi. Lopuksi Live chat -toiminto palauttaa nollan, koska sinun ei tarvitse hahmontaa HTML-elementtejä.

Testaa live-chat-ominaisuutta

  1. Tuo tämä komponentti omaan app.js tiedosto ja pyöritä kehityspalvelin päivittääksesi tehdyt muutokset. Sinun pitäisi nähdä Reactin live-chat-widget käynnissä selaimessa.
  2. Voit testata live-chat-ominaisuutta napsauttamalla widgetiä avataksesi keskustelun chat-seinän ja kirjoittamalla viestin.
  3. Siirry nyt Chatwoot-käyttäjän hallintapaneeliin ja siirry postilaatikkoosi, sinun pitäisi nähdä uusi viesti. Oletuksena Chatwoot luo joitakin viestejä ja vastaa automaattisesti heti, kun käyttäjä lähettää viestin, kuten alla näkyvät. Kirjoita vastaus viestiin ja napsauta Lähetä. Palaa sovelluksesi widget-chat-seinään nähdäksesi vastauksen.

Olet onnistuneesti integroinut live-chat-ominaisuuden sovellukseesi vain harvoilla koodiriveillä.

Onko live-chat-ominaisuus sen arvoinen?

Live-chat-ominaisuus on loistava tapa tarjota asiakaspalvelua, lisätä asiakastyytyväisyyttä ja parantaa käyttökokemusta.

Se tarjoaa viestintäkanavan, joka voi lisätä sitoutumista, lyhentää vastausaikaa ja personoida asiakastukea. Viime kädessä sen pitäisi auttaa sinua parantamaan asiakaspalvelutoimintoja pienellä vaivalla.