Como Adicionar o Chatbot IA Asyntai ao PayloadCMS

Guia passo a passo para sites com PayloadCMS

Plataforma:

Importante: PayloadCMS é um CMS headless. O código do chatbot precisa ser adicionado à sua aplicação frontend, não ao painel admin do Payload.

Passo 1: Obtenha Seu Código de Incorporação

Primeiro, acesse seu Dashboard Asyntai e role para baixo até a seção "Embed Code". Copie seu código de incorporação exclusivo que se parecerá com isto:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Nota: O código acima é apenas um exemplo. Você deve copiar seu próprio código de incorporação exclusivo do seu Dashboard, pois ele contém seu ID de widget pessoal.

Etapa 2: Adicionar ao Frontend Next.js (Mais Comum)

PayloadCMS geralmente usa Next.js como framework frontend. Adicione o chatbot ao seu layout raiz:

App Router (Next.js 13+)

Abra app/layout.tsx e adicione o componente Script:

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://asyntai.com/static/js/chat-widget.js"
          data-asyntai-id="YOUR_WIDGET_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Pages Router

Se estiver usando o Pages Router, abra pages/_app.tsx:

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://asyntai.com/static/js/chat-widget.js"
        data-asyntai-id="YOUR_WIDGET_ID"
        strategy="afterInteractive"
      />
    </>
  )
}

Dica: A opção strategy="afterInteractive" garante que o chatbot carregue após a página ficar interativa, proporcionando a melhor experiência do usuário sem afetar o desempenho de carregamento da página.

Método Alternativo 1: Frontend React Personalizado

Se seu projeto PayloadCMS usa um frontend React personalizado em vez do Next.js, você pode carregar o chatbot dinamicamente com um hook useEffect:

// App.tsx or App.jsx
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://asyntai.com/static/js/chat-widget.js';
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
    script.async = true;
    document.body.appendChild(script);

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

  return (
    // ... your app content
  );
}

Nota: Substitua YOUR_WIDGET_ID pelo seu ID de widget real do painel. A função de limpeza no return garante que o script seja removido se o componente for desmontado.

Método Alternativo 2: Usando Componentes Personalizados do Payload (Apenas Painel Admin)

Se você deseja que o chatbot apareça dentro do próprio painel admin do Payload (para suporte interno), pode registrar um componente personalizado no seu payload.config.ts:

// payload.config.ts
import { buildConfig } from 'payload/config';

export default buildConfig({
  admin: {
    components: {
      afterDashboard: ['/components/AsyntaiChatbot'],
    },
  },
  // ... rest of your config
})

Em seguida, crie o arquivo do componente:

// components/AsyntaiChatbot.tsx
'use client'
import { useEffect } from 'react';

const AsyntaiChatbot = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://asyntai.com/static/js/chat-widget.js';
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
    script.async = true;
    document.body.appendChild(script);

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

  return null;
};

export default AsyntaiChatbot;

Dica: Este método é apenas para adicionar o chatbot ao painel admin do Payload. Para o seu site público, use o Passo 2 ou o Método Alternativo 1.

Método Alternativo 3: HTML Puro/Site Estático

Se o seu site com PayloadCMS usa um frontend HTML puro ou estático consumindo a API do Payload, adicione o código de incorporação diretamente ao seu HTML:

Abra seu arquivo HTML principal (geralmente index.html)
Adicione o código de incorporação logo antes da tag de fechamento </body>:

    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  </body>
</html>

Etapa 3: Implantar e Verificar

Após adicionar o código à sua aplicação frontend:

Implante seu frontend no seu provedor de hospedagem (Vercel, Netlify, etc.)
Abra seu site ao vivo em uma nova aba do navegador
Você deverá ver o botão do widget de chat no canto inferior direito
Clique nele para garantir que abre e funciona corretamente

Não está vendo o widget? Certifique-se de que substituiu YOUR_WIDGET_ID pelo seu ID de widget real do painel. Verifique se o script está carregando na aba Network do navegador (F12 > Network). Confirme que o frontend foi reimplantado após adicionar o código. Para Next.js, certifique-se de usar o componente Script de next/script, não uma tag <script> comum. Limpe o cache do navegador ou teste no modo anônimo.

Documentação