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

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

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

Paso 2: Agregar el widget a su layout raíz (App Router)

Abra app/layout.tsx y agregue dos etiquetas next/script antes de la etiqueta de cierre </body>: un script en línea con su configuración de Chatim y otro que carga el widget. El layout raíz envuelve todas las rutas, por lo que el widget aparece en cada página.

import Script from 'next/script';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script id="chatim-settings" strategy="afterInteractive">
          {`
            window.chatim = window.chatim || {};
            window.chatim.cmd = window.chatim.cmd || [];
            window.chatim.settings = { projectId: "YOUR_PROJECT_ID" };
          `}
        </Script>
        <Script
          src="https://chatimwidget.com/widget.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Reemplace YOUR_PROJECT_ID con su ID de proyecto real del panel de Chatim. strategy="afterInteractive" es el valor por defecto: el widget se carga en el cliente después de la hidratación de la página, no renderiza nada en el servidor (sin errores de hidratación) y no agrega nada a su bundle de Next.js. Si prefiere cargarlo cuando el navegador está inactivo, use strategy="lazyOnload" en ambas etiquetas. No se necesita useEffect ni un componente de cliente: el widget espera window.chatim.settings hasta 10 segundos, así que el orden de los dos scripts no importa.

Paso 3: Pages Router (`pages/_app.tsx`)

Si su proyecto usa el Pages Router, agregue las mismas dos etiquetas en pages/_app.tsx junto a <Component />:

import type { AppProps } from 'next/app';
import Script from 'next/script';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script id="chatim-settings" strategy="afterInteractive">
        {`
          window.chatim = window.chatim || {};
          window.chatim.cmd = window.chatim.cmd || [];
          window.chatim.settings = { projectId: "YOUR_PROJECT_ID" };
        `}
      </Script>
      <Script
        src="https://chatimwidget.com/widget.js"
        strategy="afterInteractive"
      />
    </>
  );
}

El layout raíz y _app.tsx permanecen montados durante la navegación en el cliente, por lo que el widget se carga una vez y sigue abierto mientras los usuarios cambian de página.

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://chatimwidget.com/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://chatimwidget.com/widget.js';
    script.async = true;
    document.body.appendChild(script);
  }
}
</script>

Paso 4: Probar el widget

1. Ejecute su servidor de desarrollo y abra su sitio en un navegador.
2. El widget Chatim debería aparecer en la esquina de su página.
3. 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.