Como mudar o design do chat do seu site

Note que você deve fazer as alterações no canal que contém o código instalado em seu site.

Para alterar as configurações de design do widget do JivoChat, faça o login em nosso Desktop app ou Web app e vá em Configurações -> Canais -> Configurações (ao lado do nome do site).

Em seguida, clique no menu "Design".

Você pode fazer alterações nos textos, cores, posição e no formato do widget do JivoChat sem precisar editar nenhum código em seu site. Na mesma página, você terá uma pré-visualização de como ficará em seu site. Após salvar as configurações, todas as alterações aparecerão em seu site imediatamente.

Janela de bate-papo

Agora você pode personalizar o formato da janela de bate-papo. O ícone que você escolher será exibido no site na versão desktop. O ícone do bate-papo com bolha ficará assim:

Alinhamento

Talvez a configuração mais importante além da paleta de cores seja a posição do botão e da janela de bate-papo, ou melhor, onde exatamente o chat estará localizado em seu site.

Você pode escolher a posição do botão no local desejado em seu site.

Observe que a posição da janela de bate-papo é definida pelo posicionamento do botão de bate-papo. Se o botão estiver ao lado esquerdo da tela (parte inferior/superior/lateral), a janela de bate-papo no site ficará à esquerda, anexada ao canto inferior esquerdo da tela. Da mesma forma, se o botão for colocado ao lado direito ou ao centro, a janela de bate-papo será aberta no canto inferior direito da tela.

Recomendamos usar o local inferior direito como a posição ideal.

Se você estiver usando o design de bolha, há 2 opções disponíveis: canto inferior esquerdo e canto inferior direito.

Fonte

Em "Fonte" você pode definir o estilo, tipo, cor e tamanho da fonte.

Cor

Na subsessão Cor, você pode definir cores para o botão de bate-papo: escolha um esquema de cores entre as opções disponíveis ou até mesmo personalize sua própria cor clicando no ícone do conta-gotas. O design monocromático e gradiente do botão de bate-papo pode ser personalizado de acordo com a sua preferência.

As configurações também permitem ajustar o fundo das mensagens do cliente e a cor do botão de callback. Essas cores podem ser indicado em uma lista de cores sugeridas.

Padrão

Você pode adicionar uma arte ao fundo do widget de bate-papo selecionando uma das opções nesta sessão:

Editor de texto

Nesta sessão, você pode alterar os textos que são usados no botão de chat e no modo offline. Além disso, nesta guia você pode alterar o texto do formulário de mensagem offline (que é mostrado quando os clientes clicam para abrir o widget de chat manualmente).

Observe que se você definir um texto longo para o botão de bate-papo, o botão aumentará de largura, dependendo do tamanho do texto.

Versão mobile

Também é possível customizar a aparência do chat na versão mobile do seu site. Você pode escolher a cor do botão de bate-papo entre as cores sugeridas ou personalizar sua própria cor. Você pode marcar a opção "Usar cor da área de trabalho" para usar as mesmas cores do widget da área de trabalho. Além disso, você pode escolher de qual lado ficará o botão de chat: à direita ou à esquerda.

Está feito! Caso precise de alguma ajuda ou tenha alguma dúvida, estamos sempre à disposição para ajudar via chat aqui em nosso site.