Tematização & Personalização

Personalize a aparência do seu Assistente para combinar com sua marca e design do site.

min de leitura

O sistema de temas do AI Anywhere permite que você personalize a aparência e a sensação do seu Assistente. Desde as cores dos botões até as fontes, você pode fazer o Assistente se integrar perfeitamente ao design do seu site ou se destacar com as cores da sua marca. Você pode projetar seus próprios modos claro e escuro personalizando cores e estilos para combinar com a aparência do seu site.

Personalização da Cor do Botão

A cor do botão do Assistente é uma das opções de personalização mais visíveis. Você pode configurá-la para combinar com sua marca ou tema do site.

Configurando a Cor do Botão

Na configuração do seu Assistente no painel, navegue até as configurações de Tema. Aqui você pode definir a cor principal do botão usando:

Seletor de cores: Escolha uma cor visualmente na interface do seletor de cores
Código hex: Insira um código de cor hex específico (por exemplo, #4B0076 para roxo, #007bff para azul)
Valores RGB: Especifique valores RGB se preferir (automaticamente convertidos para hex)

/* Exemplo: Configurando a cor do botão para o roxo da marca */
Cor do Botão: #4B0076

Cor do Rótulo

A cor do texto do rótulo (o texto que aparece no botão) ajusta-se automaticamente para contraste com base na cor do seu botão. Se o botão for escuro, o texto será claro; se for claro, o texto será escuro. Isso garante a legibilidade enquanto mantém a estética escolhida.

Assistentes

Esquerda: Botão escuro com texto claro | Direita: Botão claro com texto escuro

Criando Modos Claro e Escuro

Embora o AI Anywhere não inclua um modo escuro pré-construído, você pode projetar suas próprias implementações de tema claro e escuro personalizando as cores dos botões, cores do texto e outras opções de estilo para combinar com o design do seu site.

Desenhando o Modo Escuro

Para criar uma aparência de modo escuro para o seu Assistente:

Use cores de botão mais escuras: Escolha cores escuras (por exemplo, #1a1a1a, #2d3748) para sites com tema escuro
Ajuste as cores do texto: Garanta o contraste adequado para legibilidade - botões escuros com texto claro, ou personalize as cores dos rótulos
Combine com seu site\ Selecione cores que se alinhem com o esquema de cores do seu modo escuro

<script src="https://ai-anywhere.ai/sdk/v1/loader.js" data-site="your-site-id"></script>
<textarea id="message"></textarea>
<span data-helper-anchor data-helper-token="your-helper-token"></span>

A cor do botão que você configurar determinará a aparência. Use cores mais escuras para modos escuros, cores mais claras para modos claros.

Personalização da Família de Fontes

Você pode personalizar a família de fontes usada pelo Assistente para combinar com o seu site\

Definindo a Família de Fontes

Na configuração do seu Assistente no painel, navegue até as configurações de Tema onde você pode selecionar entre uma variedade de famílias de fontes, incluindo:

Fontes seguras para a web (Arial, Helvetica, Georgia, Times New Roman)
Fontes modernas sem serifa (Inter, Roboto, Open Sans, Lato)
Fontes com serifa (Merriweather, Playfair Display)

O Assistente usará a família de fontes selecionada para todos os elementos de texto, garantindo consistência visual com o seu site\

Estilos de Botão: Arredondado vs. Quadrado

Escolha entre estilos de botão arredondado (em forma de pílula) e quadrado para combinar com o seu site\

Botões Arredondados

Botões arredondados têm cantos totalmente arredondados, conferindo-lhes uma aparência moderna e amigável. Este estilo funciona bem com designs contemporâneos e estéticas de marca mais suaves.

Estilo de botão arredondado

Botões Quadrados

Botões quadrados têm cantos afiados e mínimos que se alinham com designs mais geométricos e estruturados. Eles transmitem uma sensação profissional e corporativa.

Estilo de botão quadrado

Exemplos de Códigos de Cor

Aqui estão alguns códigos de cores comuns que você pode usar:

Roxo: #4B0076 (Padrão do AI Anywhere)
Azul: #007bff
Verde: #28a745
Vermelho: #dc3545
Amarelo: #ffc107
Cinza: #6c757d

Melhores Práticas de Design

Melhores Práticas de Design:

Acessibilidade: Garanta contraste de cor suficiente entre o botão e o texto para legibilidade (o padrão WCAG AA recomenda pelo menos uma relação de contraste de 4.5:1)
Contraste: Escolha cores de botão que se destaquem do fundo da sua página, mas não\
Simplicidade: Mantenha a personalização mínima; muitas mudanças de estilo podem fazer com que o Helper pareça desconectado da sua marca
Consistência: Combine as cores do seu Assistente com os botões de ação primários do seu site para uma experiência de usuário coesa
Testes: Sempre visualize seu Assistente em fundos claros e escuros para garantir que ele fique bom em todos os cenários

Visualizar Antes de Implantar

Antes de tornar seu Assistente ativo, use o recurso de visualização no seu painel para ver exatamente como suas personalizações ficarão. Isso ajuda você a:

Verificar se as escolhas de cores combinam com sua marca
Verifique a legibilidade e o contraste
Certifique-se de que o estilo do botão se adapta ao seu site\
Teste seus designs personalizados de modo claro e escuro, se aplicável

Lembre-se: Após fazer alterações de tema na sua configuração do Assistente, regenerar seu snippet para obter o código atualizado com suas novas configurações de tema, depois atualize seu site com o novo snippet.

Navegação