Como Adicionar o Chatbot IA Asyntai ao Strapi

Guia passo a passo para sites com Strapi

Plataforma:

CMS Headless: O Strapi é um CMS headless que fornece conteúdo via API, mas não inclui um frontend integrado. A instalação do chatbot depende de qual framework frontend você está usando para renderizar o conteúdo do Strapi. Escolha o método abaixo que corresponda à 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 Strapi (Recomendado)

Se você está usando Next.js como frontend do Strapi (a configuração mais comum), 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 para o seu site com Strapi.

Método 2: Gatsby com Strapi

Para sites Gatsby usando gatsby-source-strapi:

Crie ou edite gatsby-ssr.js na raiz do seu projeto:
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" /> ]) }
Substitua YOUR_WIDGET_ID pelo seu ID de widget real
Reinicie seu servidor de desenvolvimento Gatsby

Método 3: Nuxt.js com Strapi

Para aplicações Nuxt.js usando @nuxtjs/strapi:

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' } ] } } })

Nuxt 2:

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

Método 4: React com Strapi

For standard React apps (Create React App, Vite) consuming Strapi API:

Abra seu arquivo public/index.html (CRA) ou index.html (Vite)
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 crie um componente React:

// 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 5: SvelteKit com Strapi

Para aplicações SvelteKit consumindo conteúdo do Strapi:

Edite seu arquivo src/app.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

Método 6: Site Estático com API do Strapi

If you're using Strapi's REST or GraphQL API with a static HTML site:

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 com Strapi, 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 verificar se 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 ou VITE_ASYNTAI_ID para Vite) em vez de codificá-lo diretamente.

Documentação