Come integrare una funzionalità di chat dal vivo in un’app React utilizzando Chatwoot

2023/02/09

Immagina questo: qualcuno che utilizza uno dei tuoi prodotti incontra un problema. Ci sono alcuni canali che potrebbero utilizzare per segnalare il problema e provare a risolverlo.

Tra questi, potrebbero optare per l’e-mail o una chiamata. Ma questi canali di comunicazione non garantiscono risposte rapide, figuriamoci in tempo reale. Ma una chat dal vivo e interattiva con un professionista dell’assistenza clienti può rivelarsi preziosa.

Una funzione di chat dal vivo si è rivelata uno strumento di comunicazione molto utile. Questo perché ti consente di interagire meglio con gli utenti, migliorare l’esperienza utente e risolvere i problemi rapidamente e in tempo reale.

Che cos’è la chat dal vivo e perché è importante?

Una funzione di chat dal vivo è comunemente inclusa come widget sul lato di una pagina Web o una finestra pop-up che appare dopo il caricamento del sito. Fornisce comunicazioni in tempo reale tra utenti e rappresentanti del servizio clienti o team di supporto, direttamente all’interno dell’applicazione.

Agente dell'assistenza clienti su una chiamata che lavora su un PC

Gli utenti della funzione di chat dal vivo possono porre domande urgenti sul prodotto, informarsi su aree che non comprendono o segnalare un problema e richiedere soluzioni. Nel frattempo, i tuoi team di assistenza clienti possono fornire feedback dettagliati e in tempo reale, personalizzati per l’utente.

I vantaggi dell’integrazione di una funzione di chat dal vivo

L’integrazione di una funzione di live chat può portare diversi vantaggi:

Migliorare gli sforzi del servizio clienti . Un ottimo prodotto è buono quanto il suo utilizzo. L’integrazione di una funzione di chat dal vivo aiuta a migliorare in modo significativo l’esperienza di un utente fornendo un modo semplice per ottenere rapidamente aiuto e risposte. In definitiva, questo ti aiuterà a offrire servizi migliori che semplificano l’utilizzo del tuo prodotto.
Aumentare il coinvolgimento del cliente . Una live chat consente agli utenti di interagire con la tua applicazione in tempo reale, facendoli sentire apprezzati. Questo li spinge a impegnarsi di più, registrarsi e testare più funzionalità.
Genera più contatti e aumenta le vendite . Questo canale di comunicazione fornisce una via per interagire personalmente con i tuoi utenti. Puoi sfruttare questa opportunità per acquisire lead e trasformarli in clienti. Puoi anche fornire consigli sui prodotti e venderli su pacchetti specifici del tuo prodotto.
Fonte dei dati dell’utente . Nell’economia digitale, avere accesso a dati accurati sugli utenti può metterti in vantaggio rispetto alla concorrenza. Quando gli utenti ti parlano di bug o altri problemi del prodotto, quel feedback è molto prezioso. Puoi saperne di più su come interagiscono con il tuo servizio e usarlo per migliorare il tuo prodotto.

Che cos’è Chatwoot?

Chatwoot è una piattaforma di servizio clienti open source che fornisce un modo personalizzato di interagire con i tuoi utenti. Fornisce inoltre una piattaforma semplificata per rispondere alle domande degli utenti e fornire feedback su più canali in tempo reale.

Puoi utilizzare i suoi strumenti di automazione, analisi e reporting per analizzare il coinvolgimento degli utenti e gestire in modo semplice ed efficace le operazioni del servizio clienti.

Usando questa guida, puoi integrare Chatwoot con la tua applicazione e testare la sua funzione di live chat con un client React e una dashboard dell’assistenza clienti.

Configurazione del progetto Chatwoot

Chatwoot fornisce un plug-in di live chat personalizzabile che puoi facilmente integrare nella tua applicazione. Puoi personalizzarlo il più possibile per soddisfare le tue esigenze di servizio clienti.

Una volta incorporato il codice del plug-in nella tua applicazione, un utente può comunicare con i tuoi team di assistenza clienti e possono gestire tali conversazioni dalla dashboard dell’agente di Chatwoot.

Vai al sito Web di Chatwoot , registrati per un account e vai alla dashboard dell’utente.
Per gestire le conversazioni dei tuoi utenti, devi prima configurare una casella di posta e personalizzarla in base alle tue esigenze. Fare clic sul pulsante Nuova posta in arrivo per iniziare.
Ora seleziona il canale in cui desideri integrare Chatwoot. Per questa guida, seleziona Sito Web poiché lo stai integrando in un’app React.
Quindi, inserisci i dettagli del tuo sito web. Per lo sviluppo locale puoi testare la funzionalità con un URL di dominio host locale, tuttavia, una volta eseguito il deployment in produzione, ricordati di aggiornare il dominio con l’URL attivo.
Infine, aggiungi uno o più agenti per gestire le conversazioni in questa casella di posta. Questo può essere un membro del tuo team di assistenza clienti.

Hai impostato correttamente la live chat di Chatwoot con il tuo sito web impostato come canale di comunicazione. Chatwoot genererà il codice che devi incorporare nella tua app per aggiungere il widget della funzione di chat dal vivo. Questo codice è molto flessibile poiché lo integri facilmente in un client Web creato con uno qualsiasi dei framework di frontend JavaScript.

Se desideri personalizzare ulteriormente la configurazione, fai clic sul pulsante Altre impostazioni .

Configurazione del progetto React

Crea un’applicazione React e incorpora il plug-in di chat dal vivo di Chatwoot per testare la funzionalità. Crea un’applicazione React e crea un file ENV nella directory principale della cartella del tuo progetto per contenere il token del tuo sito web.

REACT_APP_WEBSITE_TOKEN = token

Successivamente, nella directory src , crea una nuova cartella e chiamala componenti. In questa cartella crea un nuovo file: Livechat.js .

Aggiungi il seguente codice a questo file:

import React, {useEffect} from 'react'

function Livechat () { useEffect(() => { window.chatwootSettings = { hideMessageBubble: false, position: "right", locale: "en", type: "standard" };


    (function(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 = true;
      g.async = true;
      s.parentNode.insertBefore(g, s);
      g.onload = function() {
        window.chatwootSDK.run({
          websiteToken: process.env.REACT_APP_WEBSITE_TOKEN,
          baseUrl: BASE_URL
        })
      }
    })(document, "script");
  }, []);
  return null;
};

export default Livechat;

Questo codice integra la funzione di chat dal vivo di Chatwoot nella tua app React. L’hook useEffect esegue il codice all’interno del callback una volta quando il componente viene montato. Innanzitutto, inizializza le impostazioni di Chatwoot per la funzione. Quindi esegue la funzione plug-in, fornita da Chatwoot, che imposta il widget della chat dal vivo sulla pagina.

Passa il websiteToken come parametro alla funzione chatwootSDK.run che connette l’app con il tuo account Chatwoot. Infine, la funzione Live chat restituisce null poiché non è necessario eseguire il rendering di alcun elemento HTML.

Prova la funzione di chat dal vivo

Importa questo componente nel tuo file app.js e avvia il server di sviluppo per aggiornare le modifiche apportate. Dovresti vedere il widget della chat dal vivo sul tuo React in esecuzione sul browser.
Per testare la funzione di chat dal vivo, fai clic sul widget per aprire il wall della chat di conversazione e digita un messaggio.
Ora vai alla dashboard utente di Chatwoot e vai alla tua casella di posta, dovresti vedere un nuovo messaggio. Per impostazione predefinita, Chatwoot genererà alcuni messaggi e risponderà automaticamente subito dopo che un utente invia un messaggio, come quelli che vedi qui sotto. Digitare una risposta al messaggio e fare clic su Invia. Torna alla bacheca della chat del widget sulla tua app per visualizzare la risposta.

Hai integrato con successo una funzione di live chat nella tua applicazione con pochissime righe di codice.

Vale la pena utilizzare una funzione di chat dal vivo?

Una funzione di chat dal vivo è un ottimo modo per fornire un servizio clienti, aumentare la soddisfazione del cliente e migliorare l’esperienza dell’utente.

Fornisce un canale di comunicazione con il potenziale per aumentare il coinvolgimento, ridurre i tempi di risposta e personalizzare l’assistenza clienti. In definitiva, dovrebbe aiutarti a migliorare le operazioni del servizio clienti con poco sforzo.