Personalizar a interface de chat
A interface de chat controla a apresentação visual e textual na experiência do cliente, enquanto o ponto de entrada controla a forma como os compradores a descobrem em diferentes páginas e dispositivos. Ambas as áreas...
A interface de chat controla a apresentação visual e textual na experiência do cliente, enquanto o ponto de entrada controla a forma como os compradores a descobrem em diferentes páginas e dispositivos. Ambas as áreas fornecem pré-visualizações, mas a validação final tem de acontecer na montra real.
Este guia abrange os controlos atuais de avatar, cor, forma, texto opcional, carrinho, ícone, ponto de entrada e regra de página, sem assumir que todas as empresas ou integrações disponibilizam opções idênticas.
Como isto se enquadra no Humind
AI Agent é o espaço de configuração para o assistente voltado para o cliente. Knowledge e Catálogo fornecem factos, Guidance molda o comportamento das respostas, Tools adiciona ações, Escalation define o apoio humano e as superfícies de teste permitem-lhe rever o resultado antes da implementação.
As alterações podem afetar muitas conversas, por isso teste cenários representativos de compra e apoio após cada atualização relevante. Um chat visualmente correto não é suficiente: verifique em conjunto a resposta, o contexto do produto, a ação disponível e o comportamento de transferência.
Antes de começar
Acesso: é necessário acesso de escrita à configuração de Agent. Algumas definições avançadas estão restritas a administradores Humind, e os controlos específicos do Shopify aparecem apenas para empresas Shopify ligadas.
- Prepare recursos aprovados de logótipo ou avatar e as cores da marca.
- Verifique o contraste de cor e as limitações da montra móvel antes de escolher valores.
- Liste os tipos de página em que o iniciador deve estar visível, oculto ou personalizado.
Fluxo de trabalho passo a passo
Definir a base visual
Abra AI Agent e depois Interface de chat. Escolha um avatar da galeria ou carregue o recurso pretendido. Defina as cores da interface e do texto, o arredondamento da bolha, as cores de fundo e do texto de adicionar ao carrinho, e o arredondamento dos botões.
Use a pré-visualização enquanto edita e verifique um contraste legível em cada componente com cor. As definições nesta página são guardadas em direto, por isso aguarde a confirmação de gravação e evite alterações rápidas e contraditórias.
Rever opções avançadas de apresentação
A interface atual pode usar opcionalmente um nome de Agent personalizado, um título inicial e uma saudação inicial. Pode mostrar ou ocultar o ícone de brilho, a imagem do localizador de presentes, perguntas predefinidas e o botão de adicionar ao carrinho. As empresas Shopify podem escolher se a ação do carrinho vai para o carrinho ou para o checkout através do controlo de destino disponível.
Um valor inicial personalizado vazio pode ocultar intencionalmente essa linha. Registe esta decisão para que um resultado em branco não seja mais tarde confundido com conteúdo perdido.
Configurar o ponto de entrada predefinido
Abra widgets de IA e depois Ponto de entrada. Ative o iniciador predefinido e escolha o seu tipo, posição, etiqueta, visibilidade do avatar, tamanho da bolha, tratamento do logótipo e desvios horizontais ou verticais quando disponíveis. Alterne entre computador e móvel para rever ambas as configurações.
Mantenha o iniciador detetável sem cobrir a navegação da loja, os controlos de consentimento, as ações de compra do produto ou os widgets de acessibilidade.
Adicionar regras específicas por página apenas quando necessário
As regras de página podem visar tipos de página suportados e definir a visibilidade em móvel ou computador como oculto, herdado ou personalizado. As regras personalizadas podem alterar a apresentação do iniciador para o contexto de página selecionado. As regras da página de produto também podem expor a opção automática atual de pergunta sobre o produto.
Evite regras sobrepostas. Use os separadores de contexto da pré-visualização para comparar resultados predefinidos e específicos por página, e elimine regras obsoletas em vez de acumular exceções indefinidamente.
Validar a acessibilidade e a disposição em direto
Teste o acesso por teclado, o contraste do texto, a abertura e o fecho, texto traduzido longo, ecrãs estreitos, páginas de produto e o comportamento do carrinho na pré-visualização. Depois implemente e repita as verificações na montra real num navegador privado.
Se o resultado em direto for diferente, investigue a instalação, os recursos desatualizados da montra, o contexto da empresa e a correspondência das regras de página antes de voltar a alterar o design.
Permissões e advertências importantes
- A pré-visualização não inclui todos os temas de montra, sobreposições ou interações responsivas.
- As opções avançadas e específicas do Shopify são condicionais; descreva apenas os controlos visíveis para a empresa ativa.
- As definições guardadas em direto podem afetar os testes imediatamente após a persistência.
- As regras de página devem continuar mutuamente compreensíveis entre computador e móvel.
Verificar o resultado
Use esta lista de verificação antes de considerar o trabalho concluído:
- Avatar, texto, interface e cores do carrinho cumprem o padrão de contraste da equipa.
- As pré-visualizações do ponto de entrada predefinido e específico por página correspondem ao conjunto de regras documentado.
- Etiquetas longas, traduções, foco do teclado e disposições móveis continuam utilizáveis.
- A montra em direto mostra um único iniciador correto sem cobrir controlos críticos.
Resolução de problemas
Uma alteração visual não aparece
Aguarde a confirmação de gravação da página, confirme a empresa ativa, atualize a pré-visualização e teste uma sessão nova da montra. Verifique se uma regra específica da página substitui a predefinição.
O iniciador aparece no local errado
Reveja a seleção do dispositivo, a posição, os desvios e a regra de página correspondente. Confirme que outra instalação duplicada do widget não está a criar a instância inesperada.
O texto ou os botões são difíceis de ler
Reveja tanto as cores de fundo como as do texto para os controlos da interface e do carrinho. Teste etiquetas reais e texto traduzido em tamanhos de computador e móvel antes de publicar o design corrigido.