Cómo instalar el widget de chat en vivo Chatim en Next.js

Paso 1: Generar y copiar el código del widget

Inicie sesión en su panel de Chatim.Chatim dashboard.
Seleccione su proyecto y haga clic en Instalar en el menú de navegación.
Anote su ID de proyecto del fragmento de código mostrado en la página.

Paso 2: Crear un componente de widget de chat

Cree un nuevo archivo de componente (por ejemplo, components/ChatWidget.tsx) con el siguiente código:

'use client';

import { useEffect } from 'react';
import Script from 'next/script';

export default function ChatWidget() {
  useEffect(() => {
    window.chatim = window.chatim || {};
    window.chatim.cmd = window.chatim.cmd || [];
    window.chatim.settings = { projectId: 'YOUR_PROJECT_ID' };
  }, []);

  return (
    <Script
      src="https://widget.chatim.app/widget.js"
      strategy="lazyOnload"
    />
  );
}

Reemplace YOUR_PROJECT_ID con su ID de proyecto real del panel de Chatim.

Paso 3: Agregar el componente a su diseño

Importe y agregue <ChatWidget /> a su archivo de diseño raíz (por ejemplo, app/layout.tsx):

import ChatWidget from '../components/ChatWidget';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <ChatWidget />
      </body>
    </html>
  );
}

React (Create React App / Vite)

Si está usando React puro (no Next.js), puede agregar el widget de la siguiente manera:

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    window.chatim = window.chatim || {};
    window.chatim.cmd = window.chatim.cmd || [];
    window.chatim.settings = { projectId: 'YOUR_PROJECT_ID' };

    const script = document.createElement('script');
    script.src = 'https://widget.chatim.app/widget.js';
    script.async = true;
    document.body.appendChild(script);

    return () => document.body.removeChild(script);
  }, []);

  return <div>{/* Your app */}</div>;
}

Vue.js

Para proyectos Vue.js:

<script>
export default {
  mounted() {
    window.chatim = window.chatim || {};
    window.chatim.cmd = window.chatim.cmd || [];
    window.chatim.settings = { projectId: 'YOUR_PROJECT_ID' };

    const script = document.createElement('script');
    script.src = 'https://widget.chatim.app/widget.js';
    script.async = true;
    document.body.appendChild(script);
  }
}
</script>

Paso 4: Probar el widget

Ejecute su servidor de desarrollo y abra su sitio en un navegador.
El widget Chatim debería aparecer en la esquina de su página.
Pruebe las funcionalidades de chat en vivo y chatbot para asegurarse de que funcionan correctamente.

Paso 5: Ajustar configuración y monitorear rendimiento

Vuelva a su panel de Chatim para monitorear las interacciones con los clientes, ver análisis y realizar los ajustes necesarios en el comportamiento, apariencia o respuestas del widget según los comentarios y la participación de los usuarios.

¿Necesita ayuda?

Si encuentra algún problema durante el proceso de instalación, contáctenos.

Centro de ayuda de Chatim