Central de Chats – Whatsapp – Messenger – E-mail

Central de Chats – Whatsapp – Messenger – E-mail

posted in: Apps | 0

 

Todo lojista sabe o tamanho da importância que é estabelecer um contato direto e rápido com seu cliente, por isso a Visualyze Design Web desenvolveu essa extensão que facilitará e muito a vida do seu cliente na hora de tirar as dúvidas! Confira:

 

Central de Chats Whatsapp - Messenger - Email Visualyze Design Web

 

Nós reunimos em um só local os botões de contato do Whatsapp, Facebook Messenger e o formulário de contato modal padrão da Loja Integrada. Essa funcionalidade pode ser implementada em qualquer site ou loja, porém se não for para Loja integrada terá que ser feitas alterações no código por causa do formulário de contato modal. Será por sua conta!

Veja um exemplo de funcionamento abaixo:

 

O botão de contato via Whatsapp faz uso do Whatsapp Web na versão web e do app do Whatsapp na versão mobile. Se o cliente clicar no botão enquanto estiver utilizando a versão web da sua loja/site uma nova aba do navegador se abrirá direto no Whatsapp Web tendo como alvo o número que você cadastrar, ou seja, o seu cliente não precisará adicionar o número de atendimento da sua loja/site na agenda para habilitar o contato dentro do Whatsapp, ele poderá fazer contato direto com você apenas clicando neste botão. Se caso o seu cliente não utilizar o Whatsapp Web, ao clicar nesse botão, será pedido para que ele cadastre seu Whatsapp por meio do QR Code padrão deste serviço e após o cadastro ele poderá realizar o contato.

Na extensão versão mobile funciona da mesma maneira, porém ela utiliza o próprio app Whatsapp para realizar o contato.

Essa extensão ainda traz uma mensagem padrão pré-programada pronta para ser enviada, poupando ainda mais o trabalho do seu cliente. Essa mensagem pode ser modificada facilmente no código que você receberá. O seu cliente também poderá editar essa mensagem antes de enviar se assim ele desejar.

O botão de contato via Facebook Messenger funciona da mesma maneira que o do Whatsapp, ou seja, na versão web utilizamos a própria página do Facebook Messenger para estabelecer contato direto com um perfil ou página pré-configurados. Já no mobile ela utiliza o app do Messenger, ele deverá estar instalado no telefone do cliente, caso contrario o seu cliente será redirecionado para página de apresentação desse app.

 

Observações Importantes:

  • Essa funcionalidade já traz uma formatação CSS padrão. Se você tiver conhecimento nessa área poderá editar a sua maneira livremente por sua conta e risco ou entre em contato e solicite um orçamento. Não fazemos este serviço gratuitamente.
  • Não recomendamos a utilização dessa extensão quando já existir objetos flutuantes no mesmo local em sua loja/site, pois um poderá sobrepor o outro. A menos que tenha conhecimento para alterar o código e reposicionar essa extensão, não a utilize.
  • Esta extensão foi testada apenas nos navegadores Firefox e Chrome nas versões Web e Mobile. Não testamos no sistema do iPhone e nem em outros navegadores. Utilize por sua conta e risco.

 

Instruções de Instalação para Loja Integrada:

Clique neste link para criar um entrada HTML avançada em sua Loja Integrada e preencha os dados como na imagem abaixo:

 

Central de Chats Whatsapp - Messenger - Email Instalacao Visualyze Design Web

 

Preencha como na imagem os campos de descrição, local de publicação, página de publicação e tipo. No campo conteúdo, cole todo o conteúdo do arquivo TXT que você irá baixar ao final desta descrição ou clicando aqui.

 

Configurando Whatsapp:

Observe o código:

Central de Chats Whatsapp - Messenger - Email Codigo 1 Visualyze Design Web

 

Da linha 7 à 9 estão presentes os códigos da versão web e da linha 11 à 13 estão os da versão mobile.

Os ítens marcados em azul representam o número de Whatsapp pelo qual o seu cliente entrará em contato, ou seja, nesse campo entrará o número de contato da sua loja. Faça o procedimento tanto na versão web quanto na mobile.

  • Observe que no código existe os caracteres XXYY000000000, ou seja, XX representa o código do país, que no nosso caso é 55. Remova o XX e coloque o número 55;
  • Logo depois vem os caracteres YY, esses caracteres representam o seu código de DDD com 2 dígitos apenas. No caso do Rio de Janeiro seria 21 ou 22 por exemplo, basta remover os caracteres YY e colocar o seu DDD;
  • O restante dos caracteres (000000000), obviamente, é o seu número de telefone / Whatsapp. Remova os zeros e coloque seu número.

Sendo assim, se você fizer corretamente deverá ficar como no exemplo do Whatsapp da Visualyze Design Web: 5521984267642 (não pode haver espaços ou caracteres como parenteses, tem que ser somente números).

Os ítens marcados em vermelho no código representam o endereço da imagem que aparecerá flutuando na loja que conterá o link. A extensão já traz um modelo padrão, mas você poderá alterar se quiser. O código CSS embutido na extensão redimensiona a altura e largura da imagem para 50px (imagem quadrada). Fica a seu critério alterar ou não.

Role a barra de rolagem horizontal para direita para visualizarmos o restante do código:

Central de Chats Whatsapp - Messenger - Email Codigo 2 Visualyze Design Web

 

Os ítens marcados em azul nessa parte do código representam a mensagem pré-cadastrada para facilitar a vida do seu cliente. Por padrão inserimos a mensagem “Oi! Estou entrando em contato pelo chat Whatsapp da sua loja virtual. Poderia me ajudar?”, mas você poderá alterar se quiser, porém é importante entender que na mensagem que você cadastrar não poderá conter caracteres acentuados! Jamais! Se você cadastrar alguma palavra com acento (Ex: olá, você, ótimo) a extensão simplesmente não funcionará, ainda não sabemos por que, mas fica a dica! Você poderá introduzir pontos de exclamação, interrogação e etc… menos acentos!

Altere apenas o que está marcado dentro do retângulo azul na imagem acima.

 

Configurando Facebook Messenger:

Role a barra de rolagem horizontal para o início e observe o trecho do código marcado na imagem abaixo:

Central de Chats Whatsapp - Messenger - Email Codigo 3 Visualyze Design Web

 

Iremos alterar a linha 16. A linha 17 você irá alterar se quiser, é opcional.

O local marcado em azul representa o nome da sua página ou perfil no Facebook, ou seja, ao clicar no botão do Messenger o cliente será direcionado diretamente a este perfil para iniciar a conversa. Você deverá inserir o nome da sua página/perfil apenas neste local, não mexa no restante do endereço. Para descobrir o endereço correto basta abrir a página ou perfil no Face da sua loja e observar o endereço, veja o exemplo abaixo do endereço da página oficial da Visualyze Design Web:

Conforme exemplo na imagem, você deverá copiar apenas o que vier depois do “https://www.facebook.com/“. Preste muita atenção neste passo, pois se tiver apenas um caractere errado não irá funcionar!

O local marcado em vermelho no código representam o endereço da imagem que aparecerá flutuando na loja que conterá o link. A extensão já traz um modelo padrão, mas você poderá alterar se quiser. O código CSS embutido na extensão redimensiona a altura e largura da imagem para 50px (imagem quadrada). Fica a seu critério alterar ou não.

Não será necessário alterar mais nada no código para o seu correto funcionamento.

Aproveite!

 

Fontes de informação e créditos:

Whatsapp: https://whatsappen.com/whatsapp-click-to-chat

Messenger: https://forum.opencartbrasil.com.br/viewtopic.php?t=15325

Personalização Visual da Extensão: Desenvolvido pela Visualyze Design Web



  • Ao clicar no botão aguarde 5 segundos e clique no botão “fechar propaganda” no topo a direita. As páginas seguintes contêm anúncios.
Comments are closed.