# Chat de Site com IA Wix: fazer o design e personalizar o chat Source: https://support.wix.com/pt/article/fazer-o-design-e-personalizar-o-chat-de-site-com-ia-wix (updated 2026-05-19) Related: Wix developer documentation, https://dev.wix.com/docs/llms.txt; Help Center index, https://support.wix.com/en/llms.txt > **Importante:** O Chat de Site com IA Wix não está mais disponível para instalação em novos sites. O [Wix Smart Chat](https://www.wix.com/app-market/web-solution/wix-ai-assistant-client?searchLocation=search-bar-homepage) o está substituindo como a nova solução de chat de IA e manual. [Saiba mais sobre o Wix Smart Chat.](https://support.wix.com/pt/article/wix-smart-chat-visão-geral) O Chat de Site com IA Wix permite que você reflita a voz e o estilo da sua marca ao criar e personalizar sua interface de chat. Você pode ajustar cores, texto, layout e muito mais diretamente no seu editor, proporcionando uma experiência de uso mais fácil e agradável para os visitantes. Esse toque personalizado pode fazer com que eles se sintam mais conectados à sua marca e tenha uma maior probabilidade de concluir uma compra. Ao incentivar os visitantes do site a entrar em contato, você aumenta o engajamento e fornece um melhor serviço. ![Duas capturas de tela lado a lado mostrando diferentes opções de design para o chat de IA.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/a1c473d0-e600-4b63-ae67-997d73da1139/2024/05/30/5137f09f-c3d6-4de0-9791-f8c4a3d1aa1f/a59c4d55-cac1-4276-a712-a9f1971ccb27.png) --- ## Fazer o design do seu chat Faça o design de cada componente do chat no seu editor. ### Para fazer o design do seu chat: **Editor Wix:** 1. [Vá para o seu editor](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26). 2. Clique no widget de chat. 3. Clique em **Configurações**. 4. Clique na aba **Design**. 5. Escolha o que você quer personalizar: **Cabeçalho** Personalize o cabeçalho da sua caixa do chat: * **Cores do background, fonte e botões:** selecione uma cor do tema do seu site ou escolha uma cor personalizada. * **Fonte:** escolha um estilo e fonte usando os menus dropdown e ajuste o tamanho usando o slider. * **Mostrar ícone:** clique na alavanca para exibir ou ocultar o ícone de IA do cabeçalho. ![Uma captura de tela do menu Cabeçalho aberto na aba Design das configurações do Wix Smart Chat, mostrando diferentes opções de design.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/30/c562e599-acb0-47fe-bd67-a123a2facd76/eb74bba2-1617-4a94-8224-1475a7ed6d86.png) **Background** Escolha a aparência do background da sua caixa do chat: * **Alterar cores:** selecione uma cor do tema do seu site ou escolha uma cor personalizada. * **Aplicar sombra:** clique na alavanca para exibir ou ocultar a sombra. Use os sliders para ajustar a opacidade, o desfoque, a propagação e a direção da sombra. ![Uma captura de tela do menu Background aberto na aba Design das configurações do chat de site com IA, mostrando diferentes opções.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/30/475a52b1-134c-4ff5-9b0f-89003bc894fe/d87ce068-a66d-4567-bf3c-251d027243f5.png) **Mensagens** Escolha se deseja personalizar as mensagens dos visitantes, do chat de site com IA ou dos cartões e personalize seus elementos: * **Cores:** selecione uma cor do tema do seu site ou escolha uma cor personalizada. * **Fonte:** escolha um estilo e fonte usando os dropdowns e ajuste o tamanho usando o slider. * **Aplicar sombra:** clique na alavanca para mostrar ou ocultar a sombra. Use os sliders para ajustar a opacidade, o desfoque, a propagação e a direção da sombra. * **Personalizar bordas:** use os sliders para ajustar a opacidade, a largura e o raio da borda. ![Uma captura de tela do menu Mensagens aberto na aba Design das configurações do Wix Smart Chat, mostrando diferentes opções de design.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/30/3ca0987c-e0a0-4c0f-b35d-df08fdafb134/0b4d10bb-7e97-461c-a0ee-62fb319c4a83.png) **Campo de entrada** Personalize a aparência do campo de entrada de texto que seus usuários veem quando abrem o chat, passam o mouse sobre o campo ou focam (clicam) nele: * **Personalizar bordas:** use os sliders para ajustar a opacidade, a largura e o raio da borda. * **Cores:** selecione uma cor do tema do seu site ou escolha uma cor personalizada. * **Fonte:** escolha um estilo e fonte usando os dropdowns e ajuste o tamanho usando o slider. ![Uma captura de tela do menu Campo de entrada aberto na aba Design das configurações do chat de site com IA, mostrando diferentes opções.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/30/9e9d6404-62f2-4110-9945-e5894661c866/936d51fb-5194-401c-8dfc-a6836b12ab27.png) **Chat minimizado** Personalize a aparência da sua caixa do chat quando está minimizada: * **Design:** escolha um design para a sua caixa do chat: * **Flutuando:** o chat flutua acima do canto inferior do seu site. * **Sticky:** o chat é anexado à borda inferior do seu site. * **Ícone:** o chat mostra apenas o ícone de IA escolhido sem texto. * **Exibição:** escolha um estilo para sua caixa do chat minimizada: **Texto e ícone**, **Texto**, ou **Ícone**. * **Cores:** selecione uma cor do tema do seu site ou escolha uma cor personalizada. * **Fonte:** escolha um estilo e fonte usando os dropdowns. * **Ícone de IA:** escolha um estilo de ícone entre as opções disponíveis. * **Aplicar animação de movimento:** clique na alavanca para ativar uma animação de movimento que é reproduzida quando o chat de site com IA envia uma nova mensagem enquanto a caixa do chat é minimizada. * **Aplicar sombra:** clique na alavanca para mostrar ou ocultar a sombra. Use os sliders para ajustar a opacidade, o desfoque, a propagação e a direção da sombra. ![Uma captura de tela do menu Chat minimizado aberto na aba Design das configurações do chat de site com IA, mostrando diferentes opções.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/30/66db9308-3d72-4bf5-8993-907f270f7b04/49eed19c-31a6-4c3b-8616-851dffc96554.png) **Editor do Wix Studio:** 1. [Vá para o seu editor](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26). 2. Clique no widget de chat. 3. Clique em **Configurações**. 4. Clique na aba **Design**. 5. Escolha o que você quer personalizar: > **Observação:** Por definição, as alterações feitas nesse painel se aplicam ao desktop e ao tablet. Para personalizar o design no mobile, acesse o breakpoint para mobile. [Saiba mais sobre breakpoints.](https://support.wix.com/pt/article/editor-do-wix-studio-personalizar-o-design-entre-breakpoints) **Cabeçalho** Personalize o cabeçalho da sua caixa do chat: * **Cores do background, fonte e botões:** selecione uma cor do tema do seu site ou escolha uma cor personalizada. * **Fonte:** escolha um estilo e fonte usando os menus dropdown e ajuste o tamanho usando o slider. * **Mostrar ícone:** clique na alavanca para exibir ou ocultar o ícone de IA do cabeçalho. ![Uma captura de tela do menu Cabeçalho aberto na aba Design das configurações do Wix Smart Chat, mostrando diferentes opções de design.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/30/5e0c9688-e20d-4e9a-8e36-cc96c468939a/3e07fa3e-7ce8-49b6-8a54-f9963611ff31.png) **Background** Escolha a aparência do background da sua caixa do chat: * **Alterar cores:** selecione uma cor do tema do seu site ou escolha uma cor personalizada. * **Aplicar sombra:** clique na alavanca para exibir ou ocultar a sombra. Use os sliders para ajustar a opacidade, o desfoque, a propagação e a direção da sombra. ![Uma captura de tela do menu Background aberto na aba Design das configurações do chat de site com IA, mostrando diferentes opções.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/30/e3ee3685-4a61-4f33-8222-82d91479f30d/f209a612-f929-452e-b422-436ccbc81148.png) **Mensagens** Escolha se deseja personalizar as mensagens dos visitantes, do chat de site com IA ou dos cartões e personalize seus elementos: * **Cores:** selecione uma cor do tema do seu site ou escolha uma cor personalizada. * **Fonte:** escolha um estilo e fonte usando os dropdowns e ajuste o tamanho usando o slider. * **Aplicar sombra:** clique na alavanca para mostrar ou ocultar a sombra. Use os sliders para ajustar a opacidade, o desfoque, a propagação e a direção da sombra. * **Personalizar bordas:** use os sliders para ajustar a opacidade, a largura e o raio da borda. ![Uma captura de tela do menu Mensagens aberto na aba Design das configurações do Wix Smart Chat, mostrando diferentes opções de design.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/30/854eac5b-611f-4ce6-a52f-9c0b5df51ac4/edf338ac-2c76-488f-912b-47281899a877.png) **Campo de entrada** Personalize a aparência do campo de entrada de texto que seus usuários veem quando abrem o chat, passam o mouse sobre o campo ou focam (clicam) nele: * **Personalizar bordas:** use os sliders para ajustar a opacidade, a largura e o raio da borda. * **Cores:** selecione uma cor do tema do seu site ou escolha uma cor personalizada. * **Fonte:** escolha um estilo e fonte usando os dropdowns e ajuste o tamanho usando o slider. ![Uma captura de tela do menu Campo de entrada aberto na aba Design das configurações do chat de site com IA, mostrando diferentes opções.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/30/100ba0a6-a14c-4b7f-8d32-5de4ff55769d/c976763a-b3bf-487d-9076-b746161cbc26.png) **Chat minimizado** Personalize a aparência da sua caixa do chat quando está minimizada: * **Design:** escolha um design para a sua caixa do chat: * **Flutuando:** o chat flutua acima do canto inferior do seu site. * **Sticky:** o chat é anexado à borda inferior do seu site. * **Ícone:** o chat mostra apenas o ícone de IA escolhido sem texto. * **Exibição:** escolha um estilo para sua caixa do chat minimizada: **Texto e ícone**, **Texto**, ou **Ícone**. * **Cores:** selecione uma cor do tema do seu site ou escolha uma cor personalizada. * **Fonte:** escolha um estilo e fonte usando os dropdowns. * **Ícone de IA:** escolha um estilo de ícone entre as opções disponíveis. * **Aplicar animação de movimento:** clique na alavanca para ativar uma animação de movimento que é reproduzida quando o chat de site com IA envia uma nova mensagem enquanto a caixa do chat é minimizada. * **Aplicar sombra:** clique na alavanca para mostrar ou ocultar a sombra. Use os sliders para ajustar a opacidade, o desfoque, a propagação e a direção da sombra. ![Uma captura de tela do menu Chat minimizado aberto na aba Design das configurações do chat de site com IA, mostrando diferentes opções.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/30/fa44ba86-532f-4b77-b511-c8c4a0ac1fb0/63eaa728-c76f-416c-baca-7d6eb2c74adf.png) --- ## Personalizar o layout do chat Escolha como deseja exibir o chat no seu site. Escolha em que parte da página ele aparece e como as novas mensagens aparecem para os visitantes. ### Para personalizar o layout: **Editor Wix:** 1. [Vá para o seu editor](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26). 2. Clique no widget de chat. 3. Clique em **Configurações**. 4. Clique na aba **Layout**. 5. Escolha o que você deseja personalizar: * **Posição:** decida se deseja que sua caixa do chat apareça no canto inferior esquerdo ou no canto inferior direito do seu site. * **Largura e altura:** escolha a largura e altura do chat, você pode usar as configurações padrão ou personalizá-las usando o slider. ![Uma captura de tela da aba Layout das Configurações de chat no site por IA, mostrando diferentes opções de design.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/02/02/48ab2dda-321b-4d8e-b5b3-2748e250d3e9/2c08606f-6c1d-4330-bd50-dcb2ea5d94e0.png) **Editor do Wix Studio:** 1. [Vá para o seu editor](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26). 2. Clique no widget de chat. 3. Clique em **Configurações**. 4. Clique na aba **Layout**. 5. Escolha o que você deseja personalizar: * **Posição:** decida se deseja que sua caixa do chat apareça no canto inferior esquerdo ou no canto inferior direito do seu site. * **Largura e altura:** escolha a largura e altura do chat, você pode usar as configurações padrão ou personalizá-las usando o slider. > **Observação:** Por definição, as alterações feitas nesse painel se aplicam a todos os breakpoints. ![Uma captura de tela da aba Layout das Configurações de chat no site por IA, mostrando diferentes opções de design.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/30/d4804ebd-db13-4936-b872-2b22f0931212/daf129ec-735b-4dac-bf08-5b9d6b841cd7.png) --- ## Definir as configurações de texto do chat Insira o texto que você gostaria que apareça quando o chat estiver minimizado ou offline. Forneça aos seus visitantes informações antecipadas, como seu tempo médio de resposta. ### Para definir suas configurações de texto: **Editor Wix:** 1. [Vá para o seu editor](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26). 2. Clique no widget de chat. 3. Clique em **Configurações**. 4. Clique na aba **Texto**. 5. Escolha o que você deseja personalizar: * **Caixa do chat:** insira o nome que você gostaria que apareça no cabeçalho quando a caixa do chat estiver aberta. Em seguida, defina o texto padrão solicitando que os visitantes insiram uma mensagem (por exemplo: "Digite sua mensagem"). * **Chat minimizado:** insira o texto que os visitantes do site veem quando sua caixa do chat está minimizada, quando você está online e disponível para conversar e quando você está offline e indisponível. **Observação:** essa opção só está disponível se você tiver selecionado um layout de chat minimizado que inclui texto. ![Uma captura de tela da aba Texto das Configurações do chat de site com IA, mostrando diferentes opções de design.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/30/7c0e41db-3cdc-491c-a061-be66e3f22be0/c241915a-a280-4772-af75-501cf8a90755.png) **Editor do Wix Studio:** 1. [Vá para o seu editor](https://manage.wix.com/account/site-selector/?actionUrl=https%3A%2F%2Fwww.wix.com%2Feditor%2F%7BmetaSiteId%7D%3FeditorSessionId%3D%7Besi%7D%26). 2. Clique no widget de chat. 3. Clique em **Configurações**. 4. Clique na aba **Texto**. 5. Escolha o que você deseja personalizar: * **Caixa do chat:** insira o nome que você gostaria que apareça no cabeçalho quando a caixa do chat estiver aberta. Em seguida, defina o texto padrão solicitando que os visitantes insiram uma mensagem (por exemplo: "Digite sua mensagem"). * **Chat minimizado:** insira o texto que os visitantes do site veem quando sua caixa do chat está minimizada, quando você está online e disponível para conversar e quando você está offline e indisponível. **Observação:** essa opção só está disponível se você tiver selecionado um layout de chat minimizado que inclui texto. > **Observação:** Por definição, as alterações feitas nesse painel se aplicam ao desktop e ao tablet. Para personalizar o design no mobile, acesse o breakpoint para mobile. [Saiba mais sobre breakpoints.](https://support.wix.com/pt/article/editor-do-wix-studio-personalizar-o-design-entre-breakpoints) ![Uma captura de tela da aba Texto das Configurações do chat de site com IA, mostrando diferentes opções de design.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/3eadcc04-813b-4e69-acf6-5bb047eced92/2025/01/30/57051602-2f58-42db-abae-62296722d875/26c467be-9536-4cbe-b24a-04270e935adb.png)