Como personalizar o aspeto do Shoply AI Chat

Como personalizar o Shoply AI Chat

O Shoply AI Chat e o AI Search oferecem mais de 40 opções para personalizar o aspeto da aplicação.

Esta secção apresenta as diferentes opções de personalização disponíveis para o seu chatbot de IA. Pode personalizar o seu aspeto, o design da janela de chat e a experiência de mensagens para os adaptar à sua marca.

Pronto para começar? Visite a página Customize AI Chat na consola de administração da nossa aplicação para começar a personalizar a sua experiência de chat. Depois de ativar o Shoply AI Chat no Shopify Theme Editor da Shopify, o ícone de chat aparecerá no canto inferior direito da página Web da sua loja.

Escolha do ícone de chat

Selecionar um ícone

Pode escolher um ícone de chat entre os nossos 17 ícones diferentes predefinidos ou carregar uma imagem para utilizar como o seu próprio ícone de chat.

Escolher diferentes ícones para o botão AI Chat

Cor e tamanho do ícone de chat

Personalizar o botão AI Chat

Cor primária

Esta é a cor principal do tema e também é utilizada como cor do texto destacado na janela de chat.

Se utilizar um modo claro no seu site, selecione uma cor que não seja branca como cor do tema — isto garante que o texto destacado continua legível sobre o fundo claro. Se utilizar um modo escuro no seu site, selecione uma cor que não seja preta como cor do tema.

Cor complementar

Esta é uma cor complementar que funciona com a sua cor primária para criar gradientes (uma transição suave entre duas cores) no ícone de chat e no cabeçalho da janela de chat, tornando o ícone de chat mais apelativo e coerente com a sua marca.

Cor da linha do ícone

Esta é a cor do contorno do ícone de chat.

Remover ou não a cor de fundo do ícone de chat.

Esta opção é frequentemente útil se carregar uma imagem como ícone de chat e quiser remover a cor de fundo (a cor primária) do ícone de chat.

Remover ou não a sombra do ícone de chat.

Esta opção permite remover o efeito de sombra projetada do ícone de chat, criando um design mais plano e minimalista. É particularmente útil se a sua loja tiver uma estética simples e moderna ou se tiver carregado um ícone personalizado que já inclua os seus próprios efeitos de sombra ou profundidade.

Tamanho do ícone flutuante para computador e dispositivos móveis.

Em dispositivos móveis, pode querer definir um tamanho menor para o ícone de chat, para evitar bloquear a vista do cliente no ecrã do dispositivo móvel.

Posicionamento do ícone de chat

Posicionamento do ícone de chat no computador e em dispositivos móveis.

Z-index do ícone de chat:

Utilize um valor mais elevado se quiser que o ícone fique à frente de outros elementos da interface.

Ocultar automaticamente o ícone de chat em dispositivos móveis

Oculte o ícone de chat após um número especificado de segundos em dispositivos móveis.

Esta opção só está disponível para dispositivos móveis. Ajuda a evitar que o ícone de chat bloqueie a vista do cliente no ecrã do dispositivo móvel.

Personalização da janela de chat

Quando clicar no ícone de chat do Shoply AI, a janela de chat será apresentada. Os clientes podem interagir com o Shoply AI através dessa janela de chat.

Esta secção apresenta as diferentes opções disponíveis para personalizar a janela de chat.

Tema de cores (modo escuro ou modo claro) da janela de chat

Se escolher o modo escuro, o fundo da janela de chat será preto e a cor do tipo de letra será branca. Recomendamos adotar a opção de modo escuro se o tema da sua loja também estiver no modo escuro.

Modo escuro ou claro para a janela AI Chat

Largura da janela de chat no computador

Esta opção só se aplica ao computador. Em dispositivos móveis, a janela de chat ocupa sempre o ecrã inteiro.

Selecionar a imagem da marca e a imagem de fundo

Pode optar por carregar a sua própria imagem da marca e imagem de fundo para a janela de chat ou simplesmente deixar que o Shoply AI gere essas imagens por si.

Se escolher utilizar a imagem gerada por IA, o Shoply AI gerará as imagens da marca e de fundo com base na descrição da sua loja.

Ajustar a transparência e as proporções da imagem de fundo da janela de chat.

As imagens de fundo na janela de chat podem tornar ilegível o texto apresentado sobre elas. Por isso, por predefinição, adicionamos uma camada semitransparente sobre a imagem de fundo.

Remover ou não o logótipo do Shoply AI na barra de introdução

Esta opção permite remover o logótipo do Shoply AI da barra de introdução do chat, para obter uma experiência mais limpa e mais alinhada com a sua marca. É particularmente útil se quiser manter uma identidade de marca consistente em toda a sua loja, sem logótipos de terceiros, ou se preferir um design de interface de chat mais minimalista.

Esta opção só está disponível nos planos pagos.

Mensagens predefinidas para o AI Chat

Também pode definir ou editar mensagens predefinidas que orientam os clientes quando interagem pela primeira vez com o seu chatbot. Além disso, pode configurar as opções de tradução dessas mensagens (consulte esta página de FAQ para obter mais informações).

Mensagem de boas-vindas pop-up (apresentada acima do ícone de chat se não estiver vazia)

Se deixar a mensagem de boas-vindas vazia, não apresentaremos a mensagem de boas-vindas acima do ícone de chat.

Mensagem de boas-vindas pop-up

Mensagens predefinidas na janela de chat

Pode configurar até 3 tipos de mensagens predefinidas na janela de chat:

  1. Primeira mensagem na janela de chat - Esta é a mensagem de saudação inicial que aparece automaticamente quando os clientes abrem a janela de chat pela primeira vez. Utilize-a para dar as boas-vindas aos clientes e definir o tom da conversa.

  2. Até 4 perguntas iniciais - Estas são sugestões de perguntas clicáveis apresentadas no início do chat. Ajudam a orientar os clientes ao apresentar perguntas comuns nas quais podem clicar para iniciar uma conversa, facilitando o início da interação.

  3. Mensagem de marcador de posição do campo de introdução - Este é o texto de sugestão que aparece no campo de introdução do chat antes de os clientes começarem a escrever. Orienta-os sobre o que podem perguntar, como “Pergunte-me o que quiser 🤗” ou “Como posso ajudar hoje?”

Consulte o exemplo de cada tipo de mensagem predefinida:

Mensagens predefinidas na janela de chat