Personalização

Você gostaria que os ícones da LivePerson combinassem com o design do seu site?
Siga os simples passos abaixo para personalizar seus ícones.

Ícones de Chat | Convites de Chat | Janela de Chat | Implementação

Você vai necessitar de Nove(9) imagens ao todo. Todas as imagens devem ser salvas em um diretório no seu servidor Web utilizando exatamente os mesmos nomes dos arquivos listados abaixo.

Botões de Chat

Estas três(3) imagens abaixo podem ser do tamanho que você desejar, mas todos as 3 devem ter exatamente as mesmas dimensões.

Você pode utilizar também GIFs animados.

Ícones de Status do Atendente
Status	Significado	Nome do Arquivo	Exemplo
online	disponível	reponline.gif
offline	nenhum atendente disponível	repoffline.gif
ocupado	não disponível, voltará em 5 minutos	repoccupied.gif

Ícones de Convite para Chat

A função que permite ao atendente convidar o visitante do site para um chat permite um contato mais estreito com seus clientes resultanto em um relacionamento mais forte e promissor. A combinação das imagens abaixo, formam um ícone flutuante que atravessa a tela do visitante da esquerda para a direita retornando e parando no seu ponto de origem esperando que o visitor decida quando vai conversar com seu atendente.

A imagem superior é a imagem principal de convite para chat e a imagem inferior é a de "Fechar" o convite.

O convite de chat utiliza a função rollover (a imagem muda quando o mouse passa por ela). A tabela abaixo mostra os nomes para os dois estados do rollover.

Estas quatro(4) imagens podem ter as dimensões que você desejar, mas todas as 4 devem ter exatamente a mesma largura (width).

Status	Significado	Nome do Arquivo	Exemplo
off	sem mouse sobre a imagem	need_help_off.gif
off	sem mouse sobre a imagem	close_off.gif
on	com mouse sobre a imagem	need_help_on.gif
on	com mouse sobre a imagem	close_on.gif

Combinadas, o ícone fica como mostrado abaixo: (passe o mouse sobre ele)

No exemplo acima, o "Botão Fechar" possuí um espaço transparente em ambos os lados para que ele tenha a mesma largura da imagem superior.

Personalize a Janela de Chat e Email

Há uma janela específica de acordo com o status do Atendente:

Janela de Chat que se abre quando o Atendente está disponível (online)
Janela de Email que se abre quando o Atendente não está disponível (offline/away)

Você pode personalizar as duas janelas separadamente para combinar com o design do seu site.

Imagens

Você deve criar 2 imagens, uma para a janela de chat - Atendente Online e outra para a janela de E-mail - Atendente Offline/Away

As duas imagens devem ter exatamente as seguintes dimensões:

Largura (Width): 106 pixels
Altura (Height): 218 pixels

Você pode salvar estas imagens com qualquer nome de sua escolha.

Nós recomendamos que você os coloque no mesmo diretório dos seus ícones personalizados.

Exemplos de Imagens:

Para Exibir o Selo da McAfee Secure juntamente com as imagens utilize o código abaixo:

<body>

<table width="106" height="218" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="106" height="172" valign="top"><img src="https://liveperson1.websiteseguro.com/images/chat_window/ml/chat_dude.gif" width="106" height="172"></td>

</tr>
    <td width="106" bgcolor="#FFFFFF" align="center">

<iframe src="https://liveperson1.websiteseguro.com/images/chat_window/ml/hackersafe.htm" width="83" height="46" frameborder="0" scrolling="no"></iframe>
</td>
  </tr>
</table>

</body>
</html>

Implementação

Ícones e Convite de Chat

Transfira as imagens para um diretório em um servidor Web.
Abra a janela de atendimento do LivePerson Pro e clique em 'Tools' > 'Generate Tags'.
Selecione a opção 'Customized Graphics (recommended)'.
Preencha o campo com o caminho do diretório onde você armazenou as imagens no seu servidor web - Ex.: http://www.seusite.com.br/imagens_liveperson (o caminho não deve terminar com "/")
Confira se os botões são exibidos corretamente nos testes de pré-visualização - Button Preview e Invitation Preview. Caso contrário, confira o caminho das imagens que foi fornecido e o nome das imagens que devem ser exatamente iguais aos nomes fornecidos nas tabelas acima.
Em 'Invitation Setup' escolha se o botão deve flutuar de um lado para outro da janela do visitante (floating) ou aparecer estático na tela (static).
Seus 2 (dois) códigos já vão estar prontos no final da página. Clique no botão 'Copy All' e cole os dois códigos em todas as páginas do seu site. Cole o primeiro código onde você quer que o ícone apareça. Cole o segundo código no final das suas páginas html (exatemente antes da tag </body>).

Janelas de Chat e E-mail

Depois de ter confeccionado suas imagens e feito o upload das mesmas para seus servidor Web, abra o console de atendimento e na barra de botões, clique em 'Admin Console'.
No menu esquerdo da página Web que vai se abrir, escolha a opção 'Visitor Experience' > 'Chat' > (aba)'Chat Window'
Na área 'General Settings', em 'Send button language', escolha o idioma 'portuguese' para que o botão de envio da janela apareça em português.
Em 'Message Typing Indicator', escolha na palheta de cores ao lado direito do campo de preenchimento, a cor do texto da mensagem que aparece na janela de chat, indicando que o atendente está digitando uma mensagem. - Aconselhamos que você marque as duas opções: 'Show typing message to operator' e 'Show typing message to visitor'
Na área 'Choose Chat and Offline Survey Windows', escolha a opção 'Use customized window'.
No campo 'Chat Window' escolha na palheta de cores ao lado direito do campo de preencimento, a cor adequada para sua janela de chat e no campo 'Image URL' digite o caminho completo para a imagem em seu servidor Web. Ex.: http://www.seusite.com.br/imagens_liveperson/active_window.gif.
No campo 'Offline Survey Window' escolha na palheta de cores ao lado direito do campo de preencimento, a cor adequada para sua janela de E-mail e no campo 'Image URL' digite o caminho completo para a imagem em seu servidor Web. Ex.: http://www.seusite.com.br/imagens_liveperson/leave_message.gif
Clique em 'Preview Chat Window' e 'Preview Offline Window' para testar suas configurações e em seguida clique em 'Update Settings' para salva-las.