Как установить виджет живого чата 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 для отслеживания взаимодействий с клиентами, просмотра аналитики и внесения необходимых изменений в поведение, внешний вид или ответы виджета на основе отзывов и вовлечённости пользователей.

Нужна помощь?

Если у вас возникли проблемы в процессе установки, свяжитесь с нами.