Cómo integrar una función de chat en vivo en una aplicación React usando Chatwoot

2023/02/09

Imagínese esto: alguien que usa uno de sus productos encuentra un problema. Hay algunos canales que podrían usar para informar el problema e intentar resolverlo.

Entre ellos, podrían optar por correo electrónico o una llamada. Pero estos canales de comunicación no garantizan respuestas rápidas y mucho menos en tiempo real. Pero un chat interactivo en vivo con un profesional de atención al cliente puede resultar invaluable.

Una función de chat en vivo ha demostrado ser una herramienta de comunicación muy útil. Esto se debe a que le permite interactuar mejor con los usuarios, mejorar la experiencia del usuario y solucionar problemas rápidamente y en tiempo real.

¿Qué es el chat en vivo y por qué es importante?

Una función de chat en vivo se incluye comúnmente como un widget en el costado de una página web, o una ventana emergente que aparece después de que se carga el sitio. Proporciona comunicación en tiempo real entre usuarios y representantes de servicio al cliente o equipos de soporte, directamente dentro de la aplicación.

Agente de atención al cliente en una llamada trabajando en una PC

Los usuarios de la función de chat en vivo pueden hacer preguntas urgentes sobre el producto, preguntar sobre áreas que no entienden o informar un problema y solicitar soluciones. Mientras tanto, sus equipos de atención al cliente pueden proporcionar comentarios detallados y en tiempo real, personalizados para el usuario.

Los beneficios de integrar una función de chat en vivo

La integración de una función de chat en vivo puede traer varios beneficios:

Mejorar los esfuerzos de servicio al cliente . Un gran producto es tan bueno como su uso. La integración de una función de chat en vivo ayuda a mejorar significativamente la experiencia de un usuario al proporcionar una manera fácil de obtener ayuda y respuestas rápidamente. En última instancia, esto lo ayudará a ofrecer mejores servicios que agilicen el uso de su producto.
Aumentar el compromiso del cliente . Un chat en vivo permite a los usuarios interactuar con su aplicación en tiempo real, haciéndolos sentir valorados. Esto los impulsa a participar más, registrarse y probar más funciones.
Genere más clientes potenciales y aumente las ventas . Este canal de comunicación proporciona una vía para interactuar personalmente con sus usuarios. Puede aprovechar esta oportunidad para capturar clientes potenciales y convertirlos en clientes. También puede proporcionar recomendaciones de productos y venderlas en paquetes específicos de su producto.
Fuente de los datos del usuario . En la economía digital, tener acceso a datos precisos sobre los usuarios puede ponerlo significativamente por delante de la competencia. Cuando los usuarios le informan sobre errores u otros problemas del producto, esa retroalimentación es muy valiosa. Puede obtener más información sobre cómo interactúan con su servicio y utilizarlo para mejorar su producto.

¿Qué es Chatwoot?

Chawoot es una plataforma de servicio al cliente de código abierto que brinda una forma personalizada de interactuar con sus usuarios. También proporciona una plataforma simplificada para que responda a las consultas de los usuarios y brinde comentarios a través de múltiples canales en tiempo real.

Puede usar sus herramientas de automatización, análisis e informes para analizar la participación de los usuarios y administrar de manera fácil y efectiva las operaciones de servicio al cliente.

Con esta guía, puede integrar Chatwoot con su aplicación y probar su función de chat en vivo con un cliente React y un panel de atención al cliente.

Configuración del proyecto Chatwoot

Chawoot proporciona un complemento de chat en vivo personalizable que puede integrar fácilmente en su aplicación. Puede personalizarlo tanto como sea posible para satisfacer sus necesidades de servicio al cliente.

Una vez que inserta el código del complemento en su aplicación, un usuario puede comunicarse con sus equipos de atención al cliente y pueden administrar esas conversaciones desde el panel del agente de Chatwoot.

Dirígete al sitio web de Chatwoot , regístrate para obtener una cuenta y navega hasta el panel de usuario.
Para administrar las conversaciones de sus usuarios, primero debe configurar una bandeja de entrada y personalizarla según sus necesidades. Haga clic en el botón Nueva bandeja de entrada para comenzar.
Ahora, seleccione el canal en el que desea integrar Chatwoot. Para esta guía, seleccione Sitio web ya que lo está integrando en una aplicación React.
A continuación, complete los detalles de su sitio web. Para el desarrollo local, puede probar la función con una URL de dominio de host local; sin embargo, una vez que implemente en producción, recuerde actualizar el dominio con la URL activa.
Finalmente, agregue un agente para administrar las conversaciones en esta bandeja de entrada. Este puede ser un miembro de su equipo de atención al cliente.

Ha configurado con éxito el chat en vivo de Chawoot con su sitio web configurado como un canal de comunicación. Chawoot generará el código que necesita incrustar en su aplicación para agregar el widget de la función de chat en vivo. Este código es muy flexible, ya que lo integra fácilmente en un cliente web creado con cualquiera de los marcos frontend de JavaScript.

Código del complemento Chatwoot Livechat

Si desea personalizar aún más la configuración, haga clic en el botón Más configuraciones .

Configuración del proyecto React

Cree una aplicación React e incruste el complemento de chat en vivo de Chatwoot para probar la función. Cree una aplicación React y cree un archivo ENV en el directorio raíz de la carpeta de su proyecto para almacenar el token de su sitio web.

REACT_APP_WEBSITE_TOKEN = token

A continuación, en el directorio src , cree una nueva carpeta y asígnele el nombre componentes. En esta carpeta crea un nuevo archivo: Livechat.js .

Agregue el siguiente código a este archivo:

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;

Este código integra la función de chat en vivo de Chawoot en su aplicación React. El gancho useEffect ejecuta el código dentro de la devolución de llamada una vez cuando se monta el componente. Primero, inicializa la configuración de Chatwoot para la función. Luego ejecuta la función de complemento, proporcionada por Chatwoot, que configura el widget de chat en vivo en la página.

Pasa el token del sitio web como parámetro a la función chatwootSDK.run que conecta la aplicación con su cuenta de Chatwoot. Finalmente, la función de chat en vivo devuelve un valor nulo ya que no es necesario que represente ningún elemento HTML.

Pruebe la función de chat en vivo

Importe este componente en su archivo app.js y active el servidor de desarrollo para actualizar los cambios realizados. Debería ver el widget de chat en vivo en su React ejecutándose en el navegador.
Para probar la función de chat en vivo, haga clic en el widget para abrir el muro de conversación y escriba un mensaje.
Ahora, dirígete a tu panel de usuario de Chatwoot y navega a tu bandeja de entrada, deberías ver un nuevo mensaje. De forma predeterminada, Chatwoot generará algunos mensajes y responderá automáticamente inmediatamente después de que un usuario envíe un mensaje, como los que ves a continuación. Escriba una respuesta al mensaje y haga clic en enviar. Vuelva al panel de chat del widget en su aplicación para ver la respuesta.

Ha integrado con éxito una función de chat en vivo en su aplicación con muy pocas líneas de código.

¿Vale la pena una función de chat en vivo?

Una función de chat en vivo es una excelente manera de brindar servicio al cliente, aumentar la satisfacción del cliente y mejorar la experiencia del usuario.

Proporciona un canal de comunicación con el potencial de aumentar el compromiso, reducir el tiempo de respuesta y personalizar la atención al cliente. En última instancia, debería ayudarlo a mejorar las operaciones de servicio al cliente con poco esfuerzo.