Widget e Código de Incorporação (Embed)
Caminho: /dashboard/embed · Permissão: Módulo de Configurações
O widget é a principal forma de interação dos usuários com seu assistente de IA no seu site. Esta página explica como implantá-lo, o que cada atributo de incorporação faz e como o widget funciona internamente.
Obtendo seu código de incorporação
A maneira mais fácil de obter seu código de incorporação:
- Vá para Dashboard → Embed na barra lateral.
- A página gera automaticamente o script correto para seu bot e domínio atuais.
- Clique em Copy (Copiar) para copiar o snippet de incorporação completo.
- Cole-o no HTML do seu site, logo antes de
</body>.
Referência do script de incorporação
<script
src="https://user.frenzy.bot/chatbot-widget/v1/js/loader.js"
data-bot-id="sales-assistant"
data-bot-name="Sales Assistant"
data-theme-color="#3b82f6"
data-backend-url="https://user.frenzy.bot"
async>
</script>
Atributos
| Atributo | Obrigatório | O que faz |
|---|---|---|
data-bot-id |
Sim | O ID slug exclusivo do seu bot. |
data-bot-name |
Não | O rótulo exibido no topo da janela de chat. |
data-theme-color |
Não | Cor primária do widget (código hex). |
data-backend-url |
No | A URL do servidor. O padrão é https://user.frenzy.bot (ou seu domínio personalizado). |
Como encontrar o ID do seu bot
- Abra o dashboard e vá para Embed ou Settings.
- O ID do bot é mostrado no código de incorporação e na página de gerenciamento do bot.
- Formato: alfanumérico em letras minúsculas com hifens (ex:
sales-assistant,support-bot).
Página de incorporação dinâmica
A página Dashboard → Embed detecta automaticamente seu hostname atual e gera o snippet de incorporação correto. Isso é mais seguro do que codificar URLs manualmente porque:
- Se você alterar domínios posteriormente, o código de incorporação gerado refletirá o novo domínio automaticamente.
- Cada bot recebe seu próprio snippet de incorporação com o
data-bot-idcorreto. - A cópia com um clique torna a implantação rápida.
Recursos do widget
O widget FRENZY.BOT foi construído para uso em produção com as seguintes capacidades:
| Recurso | O que faz |
|---|---|
| Isolamento Shadow DOM | Impede que o CSS do seu site quebre o design do widget |
| Persistência de sessão | O histórico do chat sobrevive a atualizações de página via localStorage |
| Lazy loading | Evita lentidão em conversas longas |
| Janela de contexto | Envia as últimas 6 mensagens para a IA para garantir a qualidade da resposta |
| Multilíngue | Suporta múltiplos idiomas com detecção automática |
| Suporte RTL | Layout completo da direita para a esquerda para Hebraico e Árabe |
| Sugestões de perguntas | Prompts pré-escritos exibidos abaixo da mensagem de boas-vindas |
| Formulário de leads | Captura de contatos no chat com campos configuráveis |
| Text-to-speech | Reprodução de áudio opcional para as respostas da IA |
Testando o widget
Antes de adicionar o widget ao seu site de produção:
- Confirme se o servidor está rodando.
- Abra a página de teste integrada:
https://user.frenzy.bot/chatbot-widget/test.html - Envie algumas mensagens de teste.
- Atualize a página — o histórico do chat deve persistir.
- Verifique se o bot responde usando o conteúdo da sua base de conhecimento.
Integração com WordPress
Para sites WordPress, duas opções estão disponíveis:
Opção 1: Colar o script
Adicione o script de incorporação ao arquivo footer.php do seu tema ou use um plugin que permita scripts personalizados no rodapé.
Opção 2: Plugin WordPress
- Faça o upload do arquivo ZIP do plugin FRENZY.BOT para WordPress e ative-o.
- Use o shortcode
[FRENZY.BOT_whitelabel]para uma página de portal de suporte incorporada em tela cheia.
Erros comuns
| Problema | Causa | Correção |
|---|---|---|
| Widget aparece mas não responde | data-bot-id incorreto |
Verifique o ID do bot em Dashboard → Embed |
| Widget não aparece | Servidor inacessível | Verifique se a porta 8321 está aberta e o servidor está rodando |
| Funciona em localhost, falha em produção | Falta o data-backend-url |
Defina para a URL do seu domínio de produção |
| Conflitos de CSS com seu site | Não está usando Shadow DOM | Isso não deveria acontecer — verifique se há estilos globais forçados |
| Versão antiga do widget aparecendo | Cache do navegador | O sistema de cache busting baseado em versão lida com isso automaticamente |
Incorporação por bot
Em uma configuração multi-bot, cada bot tem seu próprio snippet de incorporação. O atributo data-bot-id determina qual bot gerencia a conversa. O widget de cada bot usa seus próprios:
- Prompt do sistema e modelo de IA
- Branding, cores e avatar
- Mensagem de boas-vindas e sugestões de perguntas
- Configuração do formulário de leads
- Configurações de idioma
Alterne entre os bots no dashboard para gerar o código de incorporação correto para cada um.
FAQ (Perguntas Frequentes)
P: O widget carrega, mas não responde.
- Verifique se o
data-bot-idestá correto. - Confirme se o OpenRouter está conectado (o indicador LLM deve estar verde).
- Verifique se a base de conhecimento possui conteúdo.
P: O widget funciona em localhost, mas não em produção.
- Confirme se a porta 8321 está aberta no seu servidor.
- Defina o
data-backend-urlpara o seu domínio de produção (comhttps://). - Se estiver usando um domínio personalizado, verifique se o SSL está configurado corretamente.
P: Posso usar o widget em vários domínios?
- Sim. O widget funciona em qualquer domínio, desde que o
data-backend-urlaponte para o seu servidor. Use a página de incorporação dinâmica ou domínio personalizado para consistência.
P: Como atualizo o widget após fazer alterações?
- As atualizações do widget são aplicadas automaticamente via cache busting baseado em versão. Quando o servidor é atualizado, a versão do widget aumenta e os navegadores buscam a nova versão.