Como Adicionar o Chatbot IA Asyntai ao Contentful

Guia passo a passo para sites baseados em Contentful

Plataforma:

CMS Headless: O Contentful é um CMS headless, o que significa que fornece conteúdo via API, mas não inclui um frontend integrado. A instalação do chatbot depende de qual framework de frontend você está usando para renderizar o conteúdo do Contentful. Escolha o método abaixo que corresponde à sua configuração.

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.

Método 1: Next.js com Contentful (Recomendado)

Se você está usando o Next.js para renderizar o conteúdo do Contentful, adicione o chatbot usando o componente Script:

Abra seu arquivo de layout principal: app/layout.tsx (App Router) ou pages/_app.tsx (Pages Router)
Importe o componente Script e adicione o chatbot:
import Script from 'next/script' export default function RootLayout({ children }) { return ( <html> <body> {children} <Script src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" strategy="lazyOnload" /> </body> </html> ) }
Substitua YOUR_WIDGET_ID pelo seu ID de widget real
Salve o arquivo e reinicie seu servidor de desenvolvimento

Dica: Usar strategy="lazyOnload" garante que o chatbot carregue após a página estar totalmente interativa, proporcionando o melhor desempenho.

Método 2: Gatsby com Contentful

Para sites Gatsby que extraem conteúdo do Contentful:

Instale gatsby-plugin-load-script (opcional, mas recomendado):
npm install gatsby-plugin-load-script
Adicione ao seu gatsby-config.js:
module.exports = { plugins: [ { resolve: 'gatsby-plugin-load-script', options: { src: 'https://asyntai.com/static/js/chat-widget.js', attributes: { 'data-asyntai-id': 'YOUR_WIDGET_ID', async: true } } } ] }
Alternativamente, use gatsby-ssr.js:
// gatsby-ssr.js import React from 'react' export const onRenderBody = ({ setPostBodyComponents }) => { setPostBodyComponents([ <script key="asyntai-chatbot" async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID" /> ]) }
Reinicie seu servidor de desenvolvimento Gatsby

Método 3: React com Contentful

Para apps React padrão (Create React App, Vite, etc.) usando Contentful:

Abra seu arquivo public/index.html
Add the embed code before the closing </body> tag:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Salve o arquivo

Ou use um componente React com useEffect:

// components/Chatbot.jsx
import { useEffect } from 'react'

export default function Chatbot() {
  useEffect(() => {
    const script = document.createElement('script')
    script.src = 'https://asyntai.com/static/js/chat-widget.js'
    script.async = true
    script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID')
    document.body.appendChild(script)
    return () => document.body.removeChild(script)
  }, [])
  return null
}

Método 4: Vue/Nuxt com Contentful

Para aplicações Vue ou Nuxt.js usando Contentful:

Nuxt 3:

Adicione ao seu nuxt.config.ts:
export default defineNuxtConfig({ app: { head: { script: [ { src: 'https://asyntai.com/static/js/chat-widget.js', async: true, 'data-asyntai-id': 'YOUR_WIDGET_ID' } ] } } })

Vue 3:

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

Método 5: HTML Estático com API do Contentful

Se você está usando a Content Delivery API do Contentful com JavaScript puro:

Adicione o código de incorporação ao seu arquivo HTML antes da tag de fechamento </body>:
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
Salve o arquivo e envie para sua hospedagem

Etapa 2: Verificar Instalação

Após adicionar o código do chatbot ao seu site baseado em Contentful, faça o deploy ou execute seu servidor de desenvolvimento. Visite seu site em uma nova aba do navegador ou janela anônima. Você deverá ver o botão do widget de chat no canto inferior direito. Clique nele para confirmar que abre e funciona corretamente.

Não está vendo o widget? Certifique-se de ter adicionado o script ao arquivo correto para o seu framework. Verifique o console de desenvolvedor do navegador para ver se há erros. Se estiver usando renderização no lado do servidor, garanta que o script seja executado no lado do cliente. Tente limpar o cache do navegador ou visualizar em uma janela anônima.

Variáveis de Ambiente: Para maior segurança e flexibilidade, considere armazenar seu ID de widget em uma variável de ambiente (por exemplo, NEXT_PUBLIC_ASYNTAI_ID para Next.js) em vez de codificá-lo diretamente.

Documentação