CSS e JavaScript personalizados no Eddy AI Chatbot permitem que você adicione seu próprio código para personalizar ainda mais a aparência ou comportamento do chatbot além do que as configurações padrão de Aparência fornecem. Você pode injetar estilos personalizados para sobrescrever o design visual padrão do chatbot e adicionar JavaScript para introduzir interatividade personalizada ou gerenciamento de eventos. As alterações são aplicadas ao chatbot ao vivo apenas após você clicar em Publicar.
Quando usar CSS e JavaScript personalizados
- Use CSS personalizado quando precisar de mudanças de estilo que não estejam disponíveis na aba Aparência — por exemplo, modificar tamanho da fonte, raio da borda, estilos de botões ou cores dos balões de chat.
- Use JavaScript personalizado quando precisar acionar eventos personalizados, integrar o chatbot com ferramentas de terceiros ou adicionar comportamentos que respondam às ações do usuário dentro do chatbot.
Antes de começar
- Você deve ter criado um chatbot de IA Eddy com pelo menos uma fonte conectada.
- Revise as configurações padrão de Aparência antes de escrever CSS personalizado — muitas customizações visuais comuns (cor, ícone, posição, espaçamento) podem ser feitas sem código.
- Código personalizado é aplicado globalmente ao chatbot. Teste as mudanças cuidadosamente no Playground antes de publicar.
Como adicionar CSS e JavaScript personalizados
- Navegue até o Chatbot de IA (
) na barra de navegação da esquerda e clique em Personalizar. - Navegue até a aba CSS & JavaScript Personalizado ().
- Insira seu código CSS no campo CSS Personalizado para modificar o estilo do chatbot.
- Insira seu código JavaScript no campo JavaScript Personalizado para adicionar interatividade personalizada.
- Clique em Salvar para salvar seu código.
- Clique em Publicar para aplicar as alterações ao seu chatbot ao vivo.
O chatbot no seu site agora reflete seu código personalizado.
Melhores práticas
- Faça uma alteração de cada vez — adicione e teste uma única alteração em CSS ou JavaScript antes de adicionar a próxima. Isso facilita isolar problemas caso algo quebre.
- Use o Playground para pré-visualizar antes de publicar — salve suas alterações primeiro, depois verifique o Playground para confirmar se o chatbot parece e se comporta como esperado antes de entrar no ar.
- Observe cuidadosamente seus seletores de CSS — use seletores específicos para direcionar os elementos do chatbot com precisão e evitar que ele acabe sobrescrevendo outros estilos na sua página.
- Mantenha o JavaScript no mínimo — use JavaScript apenas para comportamentos que não podem ser alcançados pelas configurações de Aparência ou pela configuração padrão de chatbot. Excesso de JavaScript pode afetar o tempo de carregamento do chatbot.
- Comenta seu código personalizado — adicione comentários ao seu CSS e JavaScript para que sua equipe possa entender e manter as personalizações ao longo do tempo.