Як встановити віджет живого чату Chatim на Next.js

Крок 1: Згенеруйте та скопіюйте код віджета

1. Увійдіть у свою панель керування Chatim.Chatim dashboard.
2. Виберіть свій проєкт і натисніть Встановити у меню навігації.
3. Запишіть свій ID проєкту з фрагмента коду, показаного на сторінці.

Крок 2: Додайте віджет до кореневого макета (App Router)

Відкрийте app/layout.tsx і додайте два теги next/script перед закриваючим тегом </body>: один вбудований скрипт з налаштуваннями Chatim і один, що завантажує віджет. Кореневий макет охоплює всі маршрути, тому віджет з'являється на кожній сторінці.

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

Замініть YOUR_PROJECT_ID на фактичний ID вашого проєкту з панелі керування Chatim. strategy="afterInteractive" є значенням за замовчуванням: віджет завантажується на клієнті після гідратації сторінки, нічого не рендерить на сервері (без помилок гідратації) і нічого не додає до вашого бандла Next.js. Якщо хочете завантажувати його під час простою браузера, використовуйте strategy="lazyOnload" на обох тегах. useEffect або клієнтський компонент не потрібні: віджет чекає на window.chatim.settings до 10 секунд, тому порядок двох скриптів не має значення.

Крок 3: Pages Router (`pages/_app.tsx`)

Якщо ваш проєкт використовує Pages Router, додайте ті самі два теги в pages/_app.tsx поруч із <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"
      />
    </>
  );
}

Кореневий макет і _app.tsx залишаються змонтованими під час навігації на клієнті, тому віджет завантажується один раз і залишається відкритим, коли користувачі переходять між сторінками.

React (Create React App / Vite)

Якщо ви використовуєте звичайний React (не Next.js), ви можете додати віджет наступним чином:

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

Для проєктів 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>

Крок 4: Протестуйте віджет

1. Запустіть сервер розробки та відкрийте свій сайт у браузері.
2. Віджет Chatim повинен з'явитися в кутку вашої сторінки.
3. Протестуйте функції живого чату та чат-бота, щоб переконатися, що вони працюють коректно.

Крок 5: Налаштуйте параметри та відстежуйте продуктивність

Поверніться до панелі керування Chatim, щоб відстежувати взаємодію з клієнтами, переглядати аналітику та вносити необхідні зміни в поведінку, зовнішній вигляд або відповіді віджета на основі відгуків та залученості користувачів.

Потрібна допомога?

Якщо у вас виникли проблеми під час процесу встановлення, зв'яжіться з нами.