Voltar ao Painel

Documentação

Aprenda a usar o Asyntai

Primeiros Passos
Instalação Base de Conhecimento Teste Sua IA Gerenciar Sites
Personalização
Cores do Widget Nome do Assistente de IA Mensagem Inicial Posição do Widget Abertura Automática Balão de saudação Emblema de Não Lidas Modo de Instrução Fazer Perguntas Usar Emoji Coletar Emails Coletar Números de Telefone Captura Inteligente de Leads Localização Ocultar Marca Link de Privacidade Aviso Personalizado Download da Transcrição Nova Conversa Histórico de Conversas Slogan e Indicador de Status Fala para Texto Ícone do Chat Logotipo da Empresa Limite de Caracteres Temperatura
Dicas de Instruções para IA Comparar Planos
Recursos
Rastreamento do Site Lacunas de Conhecimento Cartões de Produto Cartões de Produto Dinâmicos Dynamic Images Contexto do Usuário Monitoramento em Tempo Real Controle Humano Escalação Notificações IA Relatório Diário Feed de Dados em Tempo Real Feed de Dados em Tempo Real Max Membros da Equipe Single Sign-On Incluir Imagens Visão de Imagem Widget de Tradução Localização Leads Captura Inteligente de Leads Tickets de Suporte Agendamentos Incorporações Excluir Páginas IPs bloqueados Modelo mais Inteligente Ativar Raciocínio Sugestões de Resposta Mensagens de Acompanhamento Fala para Texto Download da Transcrição Chat Incorporado
Análises
Análise de Chat Registros de Chat
Integrações
REST API Instagram Messenger WhatsApp Zapier Email Aplicativos Móveis
Outro
Adicionar à Tela Inicial Botão de Abertura Personalizado
Perguntar à IA

Como Adicionar o Chatbot IA Asyntai ao DatoCMS

Guia passo a passo para sites baseados em DatoCMS

Obter Código de Incorporação
Plataforma:
HTML HTML/Custom WordPress WordPress Shopify Shopify WooCommerce WooCommerce BigCommerce BigCommerce Ecwid Ecwid Wix Wix Squarespace Squarespace Webflow Webflow Weebly Weebly HubSpot HubSpot Tilda Tilda Adobe Experience Manager Adobe Experience Manager Duda Duda Google Sites Google Sites Bludit Bludit Plesk Plesk Concrete CMS Concrete CMS Craft CMS Craft CMS Contentful Contentful Docusaurus Docusaurus Strapi Strapi Joomla Joomla Kentico Kentico Drupal Drupal Magento Magento Blogger Blogger Bitrix Bitrix TYPO3 TYPO3 PrestaShop PrestaShop OpenCart OpenCart Ghost Ghost Hugo Hugo Statamic Statamic Umbraco Umbraco Volusion Volusion Moodle Moodle SilverStripe SilverStripe Grav Grav October CMS October CMS ProcessWire ProcessWire Sanity Sanity ExpressionEngine ExpressionEngine Sylius Sylius Backdrop CMS Backdrop CMS MODX MODX Bagisto Bagisto PayloadCMS PayloadCMS e107 e107 CrafterCMS CrafterCMS Kirby Kirby MedusaCMS MedusaCMS DatoCMS DatoCMS GoDaddy GoDaddy Framer Framer Bubble Bubble Carrd Carrd Jimdo Jimdo Strikingly Strikingly Kajabi Kajabi Teachable Teachable Thinkific Thinkific ClickFunnels ClickFunnels Hostinger Hostinger Unbounce Unbounce Leadpages Leadpages Systeme.io Systeme.io Instapage Instapage

CMS Headless: O DatoCMS é um CMS headless que entrega conteúdo via APIs. O código do chatbot precisa ser adicionado à sua aplicação frontend (Next.js, Gatsby, Nuxt, etc.), não ao painel do DatoCMS.

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)

O Next.js é o framework de frontend mais popular usado com o DatoCMS. Adicione o chatbot usando o componente Script:

App Router (app/layout.tsx):

  1. Abra seu arquivo de layout raiz: app/layout.tsx
  2. 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="afterInteractive"
            />
          </body>
        </html>
      )
    }
  3. Substitua YOUR_WIDGET_ID pelo seu ID de widget real
  4. Salve o arquivo e reinicie seu servidor de desenvolvimento

Pages Router (pages/_app.tsx):

  1. Abra seu arquivo pages/_app.tsx
  2. Adicione o componente Script:
    import Script from 'next/script'
    import type { AppProps } from 'next/app'

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

Dica: Usar strategy="afterInteractive" garante que o chatbot carregue logo após a página se tornar interativa, proporcionando um bom equilíbrio entre desempenho e disponibilidade.

Método Alternativo 1: Frontend Gatsby

Para sites Gatsby que extraem conteúdo do DatoCMS via gatsby-source-datocms:

  1. 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"
        />
      ])
    }
  2. Substitua YOUR_WIDGET_ID pelo seu ID de widget real
  3. Reinicie seu servidor de desenvolvimento Gatsby

Método Alternativo 2: Frontend Nuxt.js

Para aplicações Nuxt.js consumindo conteúdo do DatoCMS:

  1. 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'
            }
          ]
        }
      }
    })
  2. Substitua YOUR_WIDGET_ID pelo seu ID de widget real
  3. Reinicie seu servidor de desenvolvimento Nuxt

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

Se você está usando a Content Delivery API do DatoCMS com um site HTML estático ou gerador de sites estáticos:

  1. 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>
  2. Substitua YOUR_WIDGET_ID pelo seu ID de widget real
  3. Salve o arquivo e envie para sua hospedagem

Método Alternativo 4: React (Vite/CRA)

Para apps React padrão (Create React App, Vite) consumindo a API do DatoCMS:

Opção A: Adicionar ao public/index.html

  1. Abra seu arquivo public/index.html (CRA) ou index.html (Vite)
  2. Adicione o código de incorporação antes da tag de fechamento </body>:
    <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
  3. Salve o arquivo

Opção B: useEffect no Componente Raiz

  1. Crie um componente de chatbot ou adicione ao seu componente raiz:
    // 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
    }
  2. Importe e renderize o componente no seu App.jsx ou layout raiz

Etapa 3: Implantar e Verificar

Após adicionar o código do chatbot ao seu site baseado em DatoCMS, 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 ou VITE_ASYNTAI_ID para Vite) em vez de codificá-lo diretamente.