Incorporação do Widget

Adicione o seu chatbot de IA a qualquer site em segundos com o nosso simples embed code.

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>

Pronto! Seu chatbot já está ativo no 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 embed (inclui seu ID)

Ou encontre o ID na URL do seu dashboard: /dashboard/company/chatbots/[CHATBOT_ID]

Opções do Widget

Personalize o widget com atributos data:

Opções Básicas

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

Substituições de Cores

Substitua as configurações do dashboard com cores inline:

<script 
  src="https://www.chatreact.ai/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

FAQ Widget

Exiba as FAQs como um accordion 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"
  data-primary-color="#8B5CF6"
  data-background-color="#0F172A"
  data-text-color="#F1F5F9"
  data-border-radius="24"
  async
></script>

O widget de FAQ mostra as FAQs publicadas do seu chatbot.

Opções do Widget 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 Mobile

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

• Layout em largura total em telas pequenas
• Animação slide-up ao abrir
• Tratamento de teclado iOS (widget ajusta-se ao teclado na tela)
• Suporte a safe-area para o notch e indicador home do iPhone
• Alvos de toque maiores para melhor usabilidade
• Tamanho de fonte do input previne zoom automático no iOS

Guias Específicos por Plataforma

WordPress

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

Alternativa: Embed manual via plugin de "Header/Footer Scripts":

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

Shopify

Recomendado: App ChatReact para Shopify

Instale o app ChatReact na Shopify App Store para a integração mais fácil:

1. Instale o app ChatReact no seu admin 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 ative-o em todo lugar

O app também suporta widgets de Formulário e FAQ como App Blocks no Editor de Temas.

Alternativa: Embed 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 arquivo principal App.vue 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>

JavaScript API

Interaja com o widget programaticamente:

// Open the chat
ChatReact.open();

// Close the chat
ChatReact.close();

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

// Send a message
ChatReact.sendMessage('Hello!');

// Set user data
ChatReact.setUser({
  name: 'John Doe',
  email: '[email protected]'
});

Testes

Modo de Visualização

Antes de incorporar ao vivo:

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

Desenvolvimento Local

Para testes locais, use URLs localhost:

<script 
  src="http://localhost:3000/embed/widget.js" 
  data-chatbot-id="YOUR_CHATBOT_ID" 
  async
></script>

Solução de Problemas

Widget Não Aparecendo

1. Verifique o console do navegador em busca de 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 ad blockers estão interferindo

Conflitos de Estilo

Se o CSS do seu site causar conflitos:

• O widget usa shadow DOM para isolamento
• Verifique valores de z-index
• Garanta que não haja overrides com !important

Performance

O widget foi projetado para impacto mínimo:

• Lazy loaded
• < 50KB total size
• Non-blocking
• Cached aggressively

Próximos Passos

• Plugin WordPress →
• Integração Shopify →
• Gestão de FAQ →