Como instalar o chat em app Next.js

Use este guia para instalar o widget de chat da IAra em uma aplicação Next.js.

Antes de começar

• Crie uma caixa de entrada do tipo Site na IAra.
• Copie o websiteToken.
• Confirme a URL base da instalação.
• Defina se seu projeto usa App Router ou Pages Router.

App Router

Crie um componente de cliente, por exemplo components/IaraWidget.jsx:

'use client';

import { useEffect } from 'react';

export default function IaraWidget() {
  useEffect(() => {
    window.chatwootSettings = {
      hideMessageBubble: false,
      position: 'right',
      locale: 'pt_BR',
      type: 'standard',
      darkMode: 'auto',
    };

    const baseUrl = 'https://app.digi2b.com';
    const script = document.createElement('script');
    script.src = baseUrl + '/packs/js/sdk.js';
    script.async = true;
    script.onload = () => {
      window.chatwootSDK.run({
        websiteToken: 'SEU_WEBSITE_TOKEN',
        baseUrl,
      });
    };

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return null;
}

Depois, importe em app/layout.jsx:

import IaraWidget from '@/components/IaraWidget';

export default function RootLayout({ children }) {
  return (
    <html lang="pt-BR">
      <body>
        {children}
        <IaraWidget />
      </body>
    </html>
  );
}

Pages Router

Se o projeto usa pages/, importe o componente em pages/_app.jsx:

import IaraWidget from '../components/IaraWidget';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <IaraWidget />
    </>
  );
}

Observação técnica

Os objetos window.chatwootSettings e window.chatwootSDK podem manter esse nome por compatibilidade com o SDK herdado. Não renomeie esses objetos no código.

Como testar

1. Rode o projeto localmente.
2. Abra uma página pública.
3. Envie uma mensagem pelo widget.
4. Confira se a conversa entrou na caixa certa da IAra.