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

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

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

Étape 2 : Créer un composant de widget de chat

Créez un nouveau fichier de composant (par exemple, components/ChatWidget.tsx) avec le code suivant :

'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"
    />
  );
}

Remplacez YOUR_PROJECT_ID par votre identifiant de projet réel depuis le tableau de bord Chatim.

Étape 3 : Ajouter le composant à votre mise en page

Importez et ajoutez <ChatWidget /> à votre fichier de mise en page racine (par exemple, 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 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://widget.chatim.app/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://widget.chatim.app/widget.js';
    script.async = true;
    document.body.appendChild(script);
  }
}
</script>

Étape 4 : Tester le widget

Lancez votre serveur de développement et ouvrez votre site dans un navigateur.
Le widget Chatim devrait apparaître dans le coin de votre page.
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.

Centre d'aide Chatim