Incorporação do Widget

Adicione seu chatbot de IA a qualquer site em segundos com nosso código de incorporação simples.

Início Rápido

Adicione este código antes da tag de fechamento </body>:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

É isso! Seu chatbot já está ativo em seu site.

Encontrando o ID do Seu Chatbot

1. Vá para as configurações do seu chatbot
2. Navegue até a aba Embed
3. Copie o código de incorporação (inclui seu ID)

Personalizando o Widget

A aparência e o comportamento do widget são configurados no seu painel — não no código de incorporação. Vá para Dashboard → Chatbots → [your chatbot] → Widget para ajustar:

• Posição — canto inferior direito, canto inferior esquerdo, ou inline
• Cores — cores primária, de fundo e de texto, além do raio da borda
• Tamanho — largura e altura do widget

Para abrir o chat automaticamente após um atraso configurável, ative Auto-Open na aba Behavior da mesma página de configurações.

As alterações aplicam-se ao seu site automaticamente — não é necessário atualizar o código de incorporação. Veja o guia Widget Customization para todas as opções disponíveis.

O idioma do widget é detectado automaticamente a partir do navegador de cada visitante, com base nos idiomas que você habilita na aba Languages do seu chatbot.

Widget de FAQ

Exiba FAQs como um acordeão em qualquer página:

<div id="chatreact-faq"></div>
<script 
  src="https://www.chatreact.ai/embed/faq-widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  async
></script>

O widget de FAQ mostra as FAQs publicadas do seu chatbot. Cores e estilo (primária, fundo e cores de texto, raio da borda) são configurados em Dashboard → FAQs → Settings.

Opções do Widget de FAQ

Exemplo de Filtro por Categoria

<script
  src="https://www.chatreact.ai/embed/faq-widget.js"
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-categories="shipping,returns"
  async
></script>

Otimização para Dispositivos Móveis

O widget de chat é totalmente otimizado para dispositivos móveis:

• Layout em largura total em telas pequenas
• Animação de deslize ao abrir
• Tratamento do teclado no iOS (o widget ajusta-se ao teclado na tela)
• Suporte a safe-area para notch e indicador de início do iPhone
• Alvos de toque maiores para melhor usabilidade
• Tamanho da fonte de entrada evita o auto-zoom no iOS

Guias Específicos por Plataforma

WordPress

Recomendado: Use o ChatReact WordPress Plugin oficial para a integração mais fácil com blocos do Gutenberg, widgets do Elementor e shortcodes.

Alternativa: Incorporação manual via um plugin "Header/Footer Scripts":

1. Instale qualquer plugin "Header/Footer Scripts"
2. Adicione o código de incorporação na seção do footer
3. Salve e publique

Shopify

Recomendado: ChatReact Shopify App

Instale o app ChatReact na Shopify App Store para a integração mais simples:

1. Instale o app ChatReact no admin do Shopify
2. Insira seu Chatbot ID nas configurações do app
3. O widget de chat aparece automaticamente na sua loja
4. Gerencie atribuições do widget por página, ou habilite em todo o site

O app também suporta widgets de Form e FAQ como App Blocks no Theme Editor.

Alternativa: Incorporação Manual

1. Vá para Online Store → Themes → Edit Code
2. Abra theme.liquid
3. Adicione o código antes de </body>
4. Salve

Webflow

1. Vá para Project Settings → Custom Code
2. Adicione no Footer Code
3. Publique o site

Next.js / React

Use o componente Script:

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script 
        src="https://www.chatreact.ai/embed/widget.js"
        data-chatbot-id="YOUR_CHATBOT_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

Vue.js

Adicione ao seu App.vue principal ou ao layout:

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  const script = document.createElement('script');
  script.src = 'https://www.chatreact.ai/embed/widget.js';
  script.dataset.chatbotId = 'YOUR_CHATBOT_ID';
  script.async = true;
  document.body.appendChild(script);
});
</script>

API JavaScript

Interaja com o widget programaticamente:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

// Toggle open/closed
ChatReact.toggle();

// Start a fresh conversation
ChatReact.newChat();

// Remove the widget from the page entirely
// (useful in single-page apps, e.g. on route changes)
ChatReact.destroy();

Testes

Modo de Visualização

Antes de incorporar ao vivo:

1. Use o recurso Preview no seu painel
2. Teste diferentes cenários
3. Verifique se as respostas estão corretas

Solução de Problemas

Widget Não Aparece

1. Verifique o console do navegador por erros
2. Verifique se o ID do chatbot está correto
3. Certifique-se de que o chatbot está ativo (não desativado)
4. Verifique se bloqueadores de anúncios não estão interferindo
5. Verifique o uso do seu plano — o widget é pausado quando o limite mensal do seu plano é atingido

Plugins de Cache & Otimização

Alguns plugins de cache ou de otimização de scripts reescrevem URLs de scripts, o que pode impedir o carregamento do widget. Se isso ocorrer, adicione uma URL de API explícita à tag de script:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-api-url="https://www.chatreact.ai"
  async
></script>

O mesmo atributo funciona nos scripts dos widgets de FAQ e formulário.

Conflitos de Estilo

Se o CSS do seu site conflitar:

• O widget aplica escopo aos seus estilos dentro do próprio container e usa regras de alta prioridade para resistir a conflitos
• Verifique valores de z-index de elementos que sobrepõem o widget
• Evite regras genéricas com !important no CSS do site que afetem elementos comuns

Desempenho

O widget foi projetado para impacto mínimo:

• Carrega de forma assíncrona — nunca bloqueia a renderização da página
• Leve: aproximadamente 30 KB em transferência comprimida

Próximos Passos

• Widget Customization →
• WordPress Plugin →
• Shopify Integration →
• FAQ Management →
• Smart Contact Forms → — incorpore formulários independentes com o widget de formulário