Botão de Contato Direto via Whatsapp Web e App Mobile

Botão de Contato Direto via Whatsapp Web e App Mobile

posted in: Apps | 0

 

Hoje trazemos uma novidade interessante que irá facilitar o contato do seu cliente até você via Whatsapp. Com essa extensão você conseguirá adicionar em sua loja/site um botão flutuante na parte inferior esquerda da sua página, veja:

Botao de Contato Direto via Whatsapp Web e App Mobile Visualyze Design Web

Como funciona?

Essa extensão 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.

Essa extensão está liberada para qualquer site, loja, plataforma, blog e etc…

Veja o exemplo de funcionamento abaixo:

 

 

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:

 

Botao de Contato Direto via Whatsapp Web e App Mobile Local de 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.

Observe o código:

 

Botao de Contato Direto via Whatsapp Web e App Mobile Instrucoes 1 Visualyze Design Web

 

Da linha 2 à 4 estão presentes os códigos da versão web e da linha 6 à 8 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 da imagem para 40px e a largura é automática. Fica a seu critério alterar ou não.

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

 

 

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.

 

Mudando a posição do botão para o lado direito:

Descendo a barra de rolagem vertical temos o código abaixo:

 

Botao de Contato Direto via Whatsapp Web e App Mobile Instrucoes 3 Visualyze Design Web

 

Para mover o botão para o lado direito da página basta alterar o texto marcado em vermelho na imagem (left) para right. Altere apenas o que está marcado.

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

É possível fazer vários apps utilizando esse código, você poderá fazer por conta própria ou entre em contato, nos diga o que você quer fazer e passamos um orçamento.

Aproveite!



  • 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.