--- title: Manual do widget slug: aura/manual-do-widget docTags: createdAt: 2025-07-07T20:39:55.891Z --- **Widgets** são interfaces configuráveis que permitem personalizações como cores, imagens e nomes, tornando cada um deles único para o usuário. Entre as opções de personalização, você pode escolher a cor principal, adicionar um avatar, definir um título e até selecionar um papel de parede, entre outras possibilidades. Neste guia, explicaremos cada uma dessas configurações e mostraremos o processo de criação de um widget passo a passo. O objetivo principal do widget é facilitar a comunicação entre o usuário final e nossa engine, ou até mesmo com nossa equipe de atendimento. Incorporado diretamente no site do cliente, o widget oferece praticidade e conveniência, eliminando a necessidade de acessar outros sites ou canais para interação. # Como criar um widget No menu **CITSmart Aura**, selecione a opção **Widget**. ![Acesso ao Widget](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/OuefOMYGRFVYQyIRLjvnF_acessarwidgets.png) Uma página com todos os widgets já registrados será exibida. Para criar um novo, clique em **"Novo widget"**. ![Novo Widget](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/lcUyagnBlG6B9KfYzh1U__novowidget.png) ## Personalizando seu Widget Após clicar em **"Novo Widget"** você será redirecionado para a página de personalização. ![Personalizar](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/ciUDrkI0RIbm0sRI7Ivml_personalizar.png) Na página de personalização, preencha as seguintes informações para configurar o widget: - **Nome do chat:** Nome exibido no topo do widget, ao lado do avatar. - **Avatar do chat:** Imagem do avatar do chatbot, com tamanho máximo de **100x100 pixels**. - **Cor principal:** Cor predominante do widget, visível no cabeçalho e rodapé. - **Cor do título:** Cor do texto no cabeçalho do widget. - **Cor da fonte:** Cor usada para o texto dentro do widget. - **Cor usuário:** Cor usada para identificar as mensagens enviadas pelo usuário. - **Cor atendente:** Cor usada para identificar as mensagens enviadas pelo atendente. - **Papel de fundo:** É possível personalizar o papel de fundo do widget. Sendo possível escolher uma das quatro opções disponíveis para personalizar o fundo do widget. - **Ícone do botão de acionamento:** É possível escolher entre quatro opções para personalizar o fundo do widget, com tamanho máximo de **100x100 pixels** **Nota:** Para selecionar cores, clique na caixa de cor, e uma janela pop-up será exibida para escolher a cor desejada. À medida que realiza as personalizações, uma pré-visualização aparecerá ao lado das configurações. Quando concluir, clique em **Salvar** para criar o widget. ## Editando um Widget Para editar um **Widget** existente, siga os passos: 1. Na tela de listagem de widgets, encontre o widget que deseja modificar. 2. Clique no ícone de pincel **Editar widget**. ![Editar](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/5uxGpO7jHccnj76074jYv_editar.png) 1. Faça as alterações necessárias na tela de edição. 2. Clique em **Salvar** para aplicar e registrar as mudanças. ## Excluindo um Widget Para excluir um **Widget**, siga os passos abaixo: 1. Na tela de listagem, encontre o widget que deseja excluir. 2. Clique no ícone de lixeira ao lado do nome do widget. ![Excluir](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/xxxXb4Wu8jTzyDAkU922a_excluir.png) 1. Um modal de confirmação será exibido. Clique em **Sim** para confirmar a exclusão. **Atenção:** Uma vez excluído, o widget não poderá ser recuperado. Para usá-lo novamente, será necessário criar um novo. ## Acessando o Widget Após configurar e criar o widget, acesse a página de listagem. Nessa tela, você poderá visualizar todos os widgets criados. Para abrir a interface do chatbot, clique em **"Link para o chat aplicado"**. ![Link de acesso](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/PKPC7hBWEB3ojlgka8Dw5_link.png) Isso abrirá um link para a interface do seu chatbot. ![Interface do Chatbot](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/bmNFpSgcelL1572nfTZH__interfacechatbot.png) # Criando comportamento para o Widget Para que o widget responda às interações, é necessário registrar um comportamento. Siga os passos abaixo: 1. Acesse o menu **Chatbots**. ![Acesso ao chatbot](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/ml6qWCyr8X8xLCEgFLxlU_acessochatbot.png) 1. Caso ainda não possua, crie um **"Chatbot"** clicando em **"Novo Chatbot"**. ![Novo Chatbot](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/KI6Grwedhd1o_D9-iW7pH_novochatbot.png) 1. Insira o nome desejado e clique em **"Criar novo chatbot"**. Em seguida, clique no nome do chatbot recém-criado para acessá-lo. 2. No card **"Registrar novo comportamento"**, clique em **"Avançar"**. ![Registrar Comportamento](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/b6hoDQPaVF_1sR-xg5oss_registrarcomportamento.png) 1. Preencha o formulário de registro conforme indicado: - **Nome do Comportamento:** Nome para identificar o comportamento. - **Selecione o Manifesto:** Escolha o manifesto do tipo **"Widget"**. - **Parâmetros:** Escolha o **Widget** que deseja cadastrar. 1. Confira o preenchimento das informações e clique em **"Concluir"** para registrar o comportamento. :::BlockQuote ⚠️ **Importante: Um widget só pode ser registrado em um único comportamento por vez**. Isso significa que **não é possível utilizar o mesmo widget simultaneamente em dois ou mais chatbots**. Para associar o mesmo visual ou configurações a múltiplos chatbots, será necessário criar widgets distintos para cada um. ::: ![Preencher Comportamento](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/dZNRJUjknp4uGP2Rgf4Gs_preenchendocomportamento.png) :::BlockQuote **Atenção:** Para que o widget responda às interações, também é necessário cadastrar um comportamento do tipo **Wanderson** e selecionar a skill desejada. Para mais informações sobre esse cadastro, consulte o manual do operador. ::: 2. Após registrar os comportamentos, volte para a listagem de widgets e clique em **"Link para o chat aplicado"** referente ao widget configurado. Isso abrirá a interface do seu chatbot e será possível realizar as interações desejadas.