Configuração do design do assistente
A aba Design do chat permite personalizar totalmente a aparência visual do widget de chat para garantir que ele se integre perfeitamente à identidade visual da sua loja.
Identidade Básica e Posicionamento
Identidade: Você pode definir o “Nome do assistente” (por exemplo, “Assistente de IA”) que aparece no cabeçalho e, opcionalmente, fornecer uma “URL do avatar do assistente” para exibir um logotipo ou imagem personalizada ao lado do nome.
Posicionamento: Use o menu suspenso “Posição na tela” para escolher onde o widget fica ancorado na sua loja (normalmente Canto inferior direito).
Layout e Dimensões
Você tem controle preciso sobre o tamanho físico e a forma da interface de chat usando pixel (px), altura da viewport (vh) ou unidades rem:
Ajuste a “Largura do chat” geral (por exemplo, 400px) e a “Altura máxima do chat” (por exemplo, 50vh).
Ajuste o espaçamento com “Preenchimento das mensagens” e ajuste a curvatura da interface usando controles de raio como “Raio do contêiner de mensagens” (18px) e “Raio da janela de chat” (12px).
Controle o dimensionamento da tipografia com configurações para “Tamanho da fonte do chat”, “Tamanho do texto do cabeçalho do chat” e “Tamanho do ícone do cabeçalho do chat”.
Temas de Cores
A interface fornece extensos seletores de código hexadecimal para modificar cada elemento da janela de chat.
Fundos: Personalize o principal “Fundo do chat” (#FFFFFF), o “Fundo da mensagem do cliente” e o “Fundo da mensagem do assistente” (#000000). Você também pode tingir seções específicas como o “Fundo da área de texto de boas-vindas” ou “Cor de fundo das FAQs” (#F9FAFB).
Bordas: Defina os contornos sutis para o campo de mensagem, caixas de FAQ e links para criar um visual coeso.
Perguntas frequentes
A aba FAQ permite que você crie perguntas pré-escritas que aparecem antes mesmo de o usuário digitar sua primeira mensagem. Isso ajuda a resolver dúvidas comuns instantaneamente, sem exigir geração por IA.
Clique em “+ Adicionar FAQ” para criar uma nova entrada.
Para cada entrada, insira a “Pergunta” comum (por exemplo, “Você pode enviar o produto para os EUA?”) e formate a “Resposta” estática usando o editor de texto rico (negrito, itálico, sublinhado, tachado).
Você pode arrastar e soltar para reordenar as perguntas ou usar os ícones de lápis e lixeira para editá-las ou excluí-las.
Links rápidos
A aba Links permite adicionar botões de navegação direta na parte inferior da tela de boas-vindas do chat. Isso é ideal para direcionar usuários a canais de suporte alternativos ou páginas importantes da loja.
Layout em Grade: Primeiro, defina como os links são exibidos selecionando o número de “Colunas da grade” (por exemplo, defini-lo como 3 os exibirá em uma linha horizontal).
Adicionando Links: Clique em “+ Adicionar link” para criar um novo botão. Forneça um “Título do Link” (como “WhatsApp” ou “E-mail”) e insira a “URL do Link” exata (usando formatos padrão como mailto: para e-mails ou números de telefone diretos).
Ícones: Você pode selecionar em uma biblioteca integrada de ícones vetoriais (como um envelope, telefone, globo ou calendário) para representar o link visualmente. Alternativamente, você pode usar o botão “Escolher Arquivo” em “Imagem personalizada” para enviar seu próprio ícone.
Pronto para vender mais na Shopify?
Instale o Liliwi na sua loja Shopify e receba configuração gratuita da nossa equipe.
Use o serviço completo por apenas $1.