Comment installer le widget de chat en direct Chatim sur Next.js

Étape 1 : Générer et copier le code du widget

1. Connectez-vous à votre tableau de bord Chatim.Chatim dashboard.
2. Sélectionnez votre projet et cliquez sur Installer dans le menu de navigation.
3. Notez votre ID de projet à partir de l'extrait de code affiché sur la page.

Étape 2 : Ajouter le widget à votre layout racine (App Router)

Ouvrez app/layout.tsx et ajoutez deux balises next/script avant la balise de fermeture </body> : un script en ligne avec vos paramètres Chatim et un autre qui charge le widget. Le layout racine englobe toutes les routes, le widget apparaît donc sur chaque page.

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>
  );
}

Remplacez YOUR_PROJECT_ID par votre identifiant de projet réel depuis le tableau de bord Chatim. strategy="afterInteractive" est la valeur par défaut : le widget se charge côté client après l'hydratation de la page, ne rend rien côté serveur (pas d'erreur d'hydratation) et n'ajoute rien à votre bundle Next.js. Si vous préférez le charger pendant les temps d'inactivité du navigateur, utilisez strategy="lazyOnload" sur les deux balises. Aucun useEffect ni composant client n'est nécessaire : le widget attend window.chatim.settings jusqu'à 10 secondes, l'ordre des deux scripts n'a donc pas d'importance.

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

Si votre projet utilise le Pages Router, ajoutez les deux mêmes balises dans pages/_app.tsx à côté de <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"
      />
    </>
  );
}

Le layout racine et _app.tsx restent montés lors de la navigation côté client : le widget se charge une seule fois et reste ouvert quand les utilisateurs changent de page.

React (Create React App / Vite)

Si vous utilisez React pur (pas Next.js), vous pouvez ajouter le widget comme suit :

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

Pour les projets 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>

Étape 4 : Tester le widget

1. Lancez votre serveur de développement et ouvrez votre site dans un navigateur.
2. Le widget Chatim devrait apparaître dans le coin de votre page.
3. Testez les fonctionnalités de chat en direct et de chatbot pour vous assurer qu'elles fonctionnent correctement.

Étape 5 : Ajuster les paramètres et surveiller les performances

Retournez sur votre tableau de bord Chatim pour suivre les interactions avec les clients, consulter les analyses et apporter les ajustements nécessaires au comportement, à l'apparence ou aux réponses du widget en fonction des retours et de l'engagement des utilisateurs.

Besoin d'aide ?

Si vous rencontrez des problèmes lors du processus d'installation, contactez-nous.