---
title: "CSS & JavaScript Personalizados"
slug: "chatbot-custom-css-and-javascript"
updated: 2026-06-18T08:59:28Z
published: 2026-06-18T08:59:28Z
canonical: "docs.document360.com/chatbot-custom-css-and-javascript"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS & JavaScript Personalizados

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](https://docs.document360.com/docs/pt/create-chatbot) com pelo menos uma fonte conectada.
- Revise as [configurações padrão de Aparência](https://docs.document360.com/docs/pt/chatbot-appearance) 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](https://docs.document360.com/docs/pt/chatbot-playground) antes de publicar.

---

## Como adicionar CSS e JavaScript personalizados

1. Navegue até **o Chatbot de IA** (![Frame image](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Frame%201707479697.png)) na barra de navegação da esquerda e clique **em Personalizar**.
2. Navegue até a aba **CSS & JavaScript Personalizado** ().

![Custom CSS and JavaScript editor interface showing separate input fields for CSS and JavaScript code.](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1769166545388.png)

1. Insira seu código CSS no **campo CSS Personalizado** para modificar o estilo do chatbot.
2. Insira seu código JavaScript no campo **JavaScript Personalizado** para adicionar interatividade personalizada.
3. Clique **em Salvar** para salvar seu código.
4. 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.