Cum să instalezi widgetul de chat live Chatim pe Next.js

Pasul 1: Generați și copiați codul widgetului

1. Conectați-vă la panoul de control Chatim.Chatim dashboard.
2. Selectați proiectul dvs. și faceți clic pe Instalare în meniul de navigare.
3. Notați ID-ul proiectului din fragmentul de cod afișat pe pagină.

Pasul 2: Adăugați widgetul în layout-ul principal (App Router)

Deschideți app/layout.tsx și adăugați două etichete next/script înainte de eticheta de închidere </body>: un script inline cu setările Chatim și unul care încarcă widgetul. Layout-ul principal cuprinde toate rutele, așa că widgetul apare pe fiecare pagină.

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

Înlocuiți YOUR_PROJECT_ID cu ID-ul real al proiectului dvs. din panoul de control Chatim. strategy="afterInteractive" este valoarea implicită: widgetul se încarcă pe client după hidratarea paginii, nu randează nimic pe server (fără erori de hidratare) și nu adaugă nimic la bundle-ul Next.js. Dacă preferați să îl încărcați când browserul este inactiv, folosiți strategy="lazyOnload" pe ambele etichete. Nu este nevoie de useEffect sau de o componentă client: widgetul așteaptă window.chatim.settings până la 10 secunde, deci ordinea celor două scripturi nu contează.

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

Dacă proiectul folosește Pages Router, adăugați aceleași două etichete în pages/_app.tsx lângă <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"
      />
    </>
  );
}

Layout-ul principal și _app.tsx rămân montate la navigarea pe client, așa că widgetul se încarcă o singură dată și rămâne deschis când utilizatorii trec de la o pagină la alta.

React (Create React App / Vite)

Dacă folosiți React simplu (nu Next.js), puteți adăuga widgetul astfel:

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

Pentru proiecte 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>

Pasul 4: Testați widgetul

1. Porniți serverul de dezvoltare și deschideți site-ul într-un browser.
2. Widgetul Chatim ar trebui să apară în colțul paginii dvs.
3. Testați funcționalitățile de chat live și chatbot pentru a vă asigura că funcționează corect.

Pasul 5: Ajustați setările și monitorizați performanța

Reveniți la panoul de control Chatim pentru a monitoriza interacțiunile cu clienții, a vizualiza analizele și a face ajustările necesare comportamentului, aspectului sau răspunsurilor widgetului pe baza feedback-ului și implicării utilizatorilor.

Aveți nevoie de ajutor?

Dacă întâmpinați probleme în timpul procesului de instalare, contactați-ne.