Assistente de configuração de projeto
O Design do Chat permite personalizar completamente o aspeto visual do widget de chat para garantir que se integra perfeitamente na identidade visual da sua loja.
Identidade e posicionamento básicos
Identidade: Pode definir o “Nome do Assistente” (por exemplo, “Assistente de IA”) que aparece no cabeçalho e, opcionalmente, fornecer um “URL do avatar do Assistente” para apresentar um logótipo ou imagem personalizada ao lado do nome.
Posicionamento: Utilize o menu suspenso "Posição no ecrã" para escolher onde o widget será posicionado na sua loja virtual (normalmente no canto inferior direito).
Layout e dimensões
Tem um controlo preciso sobre o tamanho e a forma física da interface de chat utilizando unidades de pixel (px), altura da janela de visualização (vh) ou rem:
Ajuste a “Largura total do chat” (por exemplo, 400px) e a “Altura máxima do chat” (por exemplo, 50vh).
Ajuste o espaçamento com precisão utilizando o "Preenchimento de mensagens" e a curvatura da interface com controlos de raio como "Raio do contentor de mensagens" (18px) e "Raio da janela de chat" (12px).
Controle o tamanho da tipografia com as definições de “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 oferece diversos seletores de código hexadecimal para modificar cada elemento da janela de chat.
Fundos: Personalize o fundo principal do chat (#FFFFFF), o fundo das mensagens do cliente e o fundo das mensagens do assistente (#000000). Também pode alterar a cor de secções específicas, como o fundo da área de texto de boas-vindas ou a cor de fundo das FAQ (#F9FAFB).
Bordas: Defina os contornos subtis para o campo de mensagens, caixas de perguntas frequentes e links para criar um aspeto coeso.
Perguntas frequentes
O separador de perguntas frequentes permite criar perguntas predefinidas que aparecem antes mesmo do utilizador digitar a primeira mensagem. Isto ajuda a resolver dúvidas comuns instantaneamente, sem necessidade de geração por inteligência artificial.
Clique em “+ Adicionar FAQ” para criar uma nova entrada.
Para cada entrada, introduza a “Pergunta” comum (por exemplo, “Enviam o produto para os EUA?”) e formate a “Resposta” estática utilizando o editor de texto avançado (negrito, itálico, sublinhado, riscado).
Pode arrastar e largar para reordenar as perguntas ou utilizar os ícones do lápis e do caixote do lixo para as editar ou eliminar.
Links rápidos
O separador Links permite adicionar botões de navegação direta na parte inferior do ecrã de boas-vindas do chat. Isto é ideal para direcionar os utilizadores para canais de suporte alternativos ou páginas importantes da loja.
Layout em grelha: em primeiro lugar, defina como os links serão apresentados, selecionando o número de "colunas da grelha" (por exemplo, definindo para 3, serão apresentados numa linha horizontal).
Adicionar links: Clique em “+ Adicionar link” para criar um novo botão. Forneça um “Título do link” (como “WhatsApp” ou “E-mail”) e introduza o “URL do link” exato (utilizando formatos padrão como mailto: para e-mails ou números de telefone diretos).
Ícones: Pode selecionar um ícone da biblioteca integrada de ícones vetoriais (como um envelope, um telefone, um globo ou um calendário) para representar visualmente a ligação. Em alternativa, pode utilizar o botão “Escolher ficheiro” em “Imagem personalizada” para carregar o seu próprio ícone.
Pronto para vender mais na Shopify?
Instale o Liliwi na sua loja Shopify e receba a configuração gratuita da nossa equipa.
Utilize o serviço completo por apenas 1 dólar.