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 Bolha de Notificaçã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 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 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
Outros
Adicionar à Tela Inicial Botão de Abertura Personalizado

Como Adicionar o Chatbot de IA Asyntai a Qualquer Site

Guia universal para HTML, sites personalizados e geradores estaticos

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

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.

Passo 2: Adicionar ao Seu Arquivo HTML

A maneira mais simples de adicionar o chatbot e colar o codigo de incorporacao diretamente no seu arquivo HTML:

  1. Abra seu arquivo HTML em um editor de texto
  2. Encontre a tag de fechamento </body>
  3. Cole seu código de incorporação Asyntai logo antes da tag </body>
  4. Salve o arquivo
<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- Asyntai Chatbot - Add before closing body tag -->
  <script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>
</body>
</html>

Dica: Adicionar o script antes da tag de fechamento </body> garante que ele carregue apos o conteudo da pagina, o que e ideal para desempenho e nao desacelerara sua pagina.

Para Sites com Multiplas Paginas

Se seu site tem multiplas paginas HTML, voce tem varias opcoes:

Opcao A: Adicionar a Cada Pagina

Adicione o codigo de incorporacao a cada arquivo HTML onde deseja que o chatbot apareca.

Opcao B: Usar um Include de Rodape Comum

If you're using server-side includes (SSI), PHP includes, or similar:

  1. Crie um arquivo footer.html (ou footer.php)
  2. Adicione o codigo de incorporacao Asyntai a este arquivo
  3. Inclua este arquivo de rodape em todas as suas paginas:
    <!-- For PHP -->
    <?php include 'footer.php'; ?>

    <!-- For SSI -->
    <!--#include virtual="/footer.html" -->

Opcao C: Carregamento Dinamico com JavaScript

Create a single JavaScript file that loads the chatbot on all pages:

  1. Crie um arquivo chamado asyntai-loader.js:
    (function() {
      var script = document.createElement('script');
      script.async = true;
      script.src = 'https://asyntai.com/static/js/chat-widget.js';
      script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID');
      document.body.appendChild(script);
    })();
  2. Substitua YOUR_WIDGET_ID pelo seu ID de widget real
  3. Inclua este script em todas as suas paginas:
    <script src="/js/asyntai-loader.js"></script>

Para Geradores de Sites Estaticos

Se voce esta usando um gerador de sites estaticos, adicione o codigo de incorporacao ao seu layout ou template base:

Jekyll

Adicione a _includes/footer.html ou _layouts/default.html

Hugo

Adicione a layouts/partials/footer.html ou layouts/_default/baseof.html

Gatsby

Add to gatsby-browser.js or use gatsby-ssr.js

Next.js

Adicione a pages/_document.js ou use o componente next/script

Nuxt.js

Adicione a nuxt.config.js em head.script

Eleventy (11ty)

Adicione ao seu layout base em _includes/

Astro

Adicione a src/layouts/Layout.astro antes de </body>

VuePress

Adicione a .vuepress/config.js em head

Para Apps React / Vue / Angular

Para aplicacoes de pagina unica (SPAs), voce pode adicionar o script ao seu index.html ou carrega-lo dinamicamente:

React (metodo index.html)

<!-- In public/index.html, before </body> -->
<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

React (metodo useEffect)

// In your App.js or a component
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);
}, []);

Vue (em main.js ou App.vue)

// In mounted() or onMounted()
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);

Angular (em index.html)

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

Passo 3: Verifique a Instalação

Apos adicionar o codigo, abra seu site em uma nova aba do navegador ou janela anonima. Voce deve ver o botao do widget de chat no canto inferior direito. Clique nele para verificar se abre e funciona corretamente.

Não está vendo o widget? Verifique se o script esta posicionado corretamente antes da tag </body>. Certifique-se de que nao ha erros de JavaScript no console do navegador (pressione F12 para abrir as ferramentas de desenvolvedor). Tente limpar o cache do navegador ou visualizar em uma janela anonima.

Importante: O chatbot requer que seu site seja servido via HTTP ou HTTPS (nao aberto diretamente como arquivo). Se estiver testando localmente, use um servidor de desenvolvimento local.