Personalize a aparência, comportamento e funcionalidade do seu widget através do sistema de configuração.
Todas as configurações do widget são gerenciadas através da configuração do widget em seu painel. A configuração inclui configurações de aparência, opções comportamentais e personalização de conteúdo.
Pense na configuração como o DNA do seu widget—ela define tudo, desde cores e fontes até fluxos de conversa e mensagens iniciais. A melhor parte? Mudanças na sua configuração entram em vigor imediatamente sem exigir alterações de código em seu site.
🎨 Personalização ao Vivo
Use nosso editor de configuração visual no painel para ver suas mudanças em tempo real. Não há necessidade de adivinhar como as cores ficarão ou como os botões se comportarão—visualize tudo antes de publicar.
A aparência visual é crucial para fazer o widget parecer uma parte natural do seu site. Nossas configurações de aparência dão a você controle total sobre cada aspecto visual.
Escolha cores que correspondam à identidade da sua marca. Todos os valores de cor devem estar em formato hexadecimal (por exemplo, #FF5733).
Dica profissional: Use uma ferramenta de verificação de contraste de cores para garantir que seu texto permaneça legível contra os fundos escolhidos. Isso é especialmente importante para conformidade de acessibilidade.
Dimensione seu widget adequadamente para seu caso de uso e público. Dimensões maiores fornecem mais contexto de conversa, enquanto dimensões menores parecem menos intrusivas.
Consideração para Móveis: O widget escala automaticamente em dispositivos móveis, mas teste sua configuração em vários tamanhos de tela para garantir uma boa experiência para todos os usuários.
Configurações comportamentais controlam como o widget interage com os usuários e responde a diferentes contextos.
⚠️ Recomendação
A maioria dos sites deve começar com o widget colapsado (<code>start_open: false</code>) para evitar ser intrusivo. Usuários que precisam de ajuda clicarão naturalmente no botão. Para páginas de ajuda/suporte dedicadas, começar aberto pode ser benéfico.
A mensagem de saudação é a primeira coisa que os usuários veem quando abrem o widget. Faça-a acolhedora, clara e acionável. Você pode incluir botões interativos para guiar os usuários em tarefas comuns.
Uma boa mensagem de saudação deve:
Exemplo: "Olá! 👋 Estou aqui para ajudar com perguntas sobre nossos produtos, preços ou conta. Como posso ajudá-lo hoje?"
<script src="https://widget.companin.tech/widget.js" data-widget-key="YOUR_WIDGET_KEY"></script>Fluxos de conversa são caminhos predefinidos que guiam os usuários através de cenários comuns. Eles são perfeitos para FAQs, solução de problemas ou processos de múltiplas etapas, como devoluções ou reservas.
Os fluxos são acionados por palavras-chave específicas ou cliques em botões. Quando acionados, eles exibem uma série de respostas com botões de ação opcionais, criando uma experiência de conversa guiada sem exigir processamento de IA.
Melhores práticas para fluxos:
{ "flows": [ { "trigger": "/support", "responses": [ { "text": { "en": "How can we help?" }, "buttons": [ { "label": { "en": "Technical Support" }, "action": "/tech-support" } ] } ] } ]}Configure texto para vários idiomas:
Adicione CSS personalizado para estilização avançada:
/* Estilos personalizados do widget */.companin-widget-container .custom-button { background: linear-gradient(45deg, #ff6b6b, #4ecdc4);}.companin-widget-container .message-bubble { border: 2px solid #ff6b6b;}Configure endpoints de API externos para funcionalidade aprimorada: