Como Personalizar o Widget de Chat com sua Marca

Um widget de chat genérico passa despercebido ou, pior, parece deslocado do restante do site. Personalizar as cores, mensagens e comportamento do widget para refletir a identidade da sua marca aumenta a confiança do visitante e incentiva o início de conversas. Siga este tutorial para deixar o chat com a cara do seu negócio.

Pré-requisitos

• Acesso administrativo à Marketek
• Identidade visual definida (cores, logo, tom de voz)
• Site ou landing page onde o widget será instalado

Passo 1: Acesse as Configurações do Widget

Navegue até Configurações > Widget de Chat. Você verá um painel dividido em seções: Aparência, Mensagens, Formulário, Disponibilidade e Instalação.

Passo 2: Configure as Cores da Marca

Na seção Aparência, ajuste:

1. Cor principal: insira o código hexadecimal da cor principal da sua marca (ex.: #2563EB para azul). Está cor será aplicada ao cabeçalho do widget, botão flutuante e destaques
2. Cor do texto: ajuste para garantir contraste legível sobre a cor principal (branco funciona na maiória dos casos)
3. Cor de fundo: o fundo da área de conversa (branco ou cinza claro são ideais para legibilidade)

💡 Dica: use a mesma cor principal que seu site usa nos botões de CTA. Isso cria consistência visual e o widget parece parte natural da página.

Passo 3: Faça Upload do Avatar

Ainda na seção Aparência:

1. Clique em Avatar e faça upload de uma imagem quadrada (mínimo 256×256 pixels)
2. Use o logo da empresa para atendimento genérico ou a foto do atendente principal para um toque mais pessoal
3. O avatar aparece no cabeçalho do widget e ao lado das mensagens do agente

Passo 4: Defina a Mensagem de Boas-Vindas

Na seção Mensagens, configure:

1. Mensagem de boas-vindas: o texto exibido quando o visitante abre o widget. Exemplo: “Olá! Estamos online e prontos para ajudar. Como posso ser útil?”
2. Mensagem de espera: texto mostrado enquanto o agente não responde. Exemplo: “Um momento, estamos conectando você a um especialista…”
3. Mensagem fora do horário: texto exibido quando não há agentes online. Exemplo: “No momento estamos fora do horário de atendimento. Deixe sua mensagem e responderemos em breve!”

Passo 5: Configure o Formulário de Pré-Chat

Na seção Formulário, defina quais informações coletar antes da conversa:

1. Ative ou desative o formulário de pré-chat (se desativado, o visitante inicia a conversa diretamente)
2. Adicione os campos desejados: Nome, E-mail, Telefone, Departamento
3. Marque quais campos são obrigatórios
4. Personalize o texto do botão de início (ex.: “Iniciar conversa” ou “Falar com a equipe”)

💡 Dica: para páginas de alta conversão (como página de preços), considere desativar o formulário e permitir conversa imediata. Para páginas informativas, o formulário ajuda a qualificar o visitante.

Passo 6: Defina o Horário de Atendimento

Na seção Disponibilidade:

1. Ative Horário de atendimento
2. Defina os dias e horários em que sua equipe está disponível
3. Selecione o fuso horário correto
4. Escolha o comportamento fora do horário: mostrar formulário de contato, exibir mensagem personalizada ou ocultar o widget

Passo 7: Adicione CSS Personalizado (Opcional)

Para ajustes visuais avançados que vão além das opções padrão, use a seção CSS Personalizado:

/* Arredondar mais o botão flutuante */
.chat-widget-button {
  border-radius: 50% !important;
}

/* Alterar fonte do widget */
.chat-widget-container {
  font-family: 'Inter', sans-serif !important;
}

⚠️ Atenção: teste qualquer CSS personalizado em diferentes navegadores e dispositivos antes de publicar.

Passo 8: Instale no Seu Site

Na seção Instalação, copie o código do widget. Você tem duas opções:

Opção A — Script direto:
1. Copie o snippet de JavaScript fornecido
2. Cole no HTML do seu site, antes do fechamento da tag </body>
3. Salve e publique

Opção B — Google Tag Manager:
1. Copie o snippet
2. No GTM, crie uma nova tag do tipo “HTML Personalizado”
3. Cole o código e configure o acionador para “Todas as páginas”
4. Publique o container

Para sites e landing pages criados na própria Marketek, o widget é ativado automaticamente — não é necessário instalar código manualmente.

Passo 9: Teste no Mobile e Desktop

Após a instalação:

1. Abra seu site em um navegador desktop e verifique se o widget aparece na posição configurada
2. Clique no widget e confira a mensagem de boas-vindas, cores e avatar
3. Preencha o formulário de pré-chat (se ativado) e inicie uma conversa de teste
4. Abra o site no celular e repita o teste — verifique se o widget não sobrepõe elementos importantes
5. Teste fora do horário de atendimento para confirmar a mensagem correta

💡 Dica: peça para um colega fazer o teste enquanto você monitora na caixa de entrada da Marketek em Conversas > Não Atribuídas.

Artigos Relacionados:
– Guia Completo: Widget de Chat ao Vivo na Marketek
– Chat Não Aparece no Site? Diagnóstico em 3 Passos