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`:

```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`:

```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`:

```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.