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.
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 |
|
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.
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:
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>).
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.
