Artigos sobre: Opções do editor

Direcionamento para o WhatsApp



O redirecionamento para uma conversa no Whatsapp é uma solução prática para que usuários possam efetuar conversas de maneira rápida através do app. Isso aumenta a interação entre usuários e facilita a comunicação.

Essa opção está disponível nas funcionalidades Lista, Lista de Texto, Catálogo ou Página em Branco.

Preparando o código HTML

  • Copie o código abaixo em um bloco de notas, word ou qualquer área para escrita no computador;

  • Copie o código abaixo. É ele que possibilita o redirecionamento para uma conversa de WhatApp para o número de celular desejado;

  • Insira o DDD + número do celular ao qual será redirecionado a conversa no local onde está marcado com 00000000000;

  • Perceba que no código há um link https://i.imgur.com/suCWxMs.png. É nele que está a imagem que será reproduzida no app como botão. Se quiser utilizar outro ícone basta buscá-lo e transformá-lo em link através de algum hospedador de imagens e substituir esse link no código;

  • O item style="width:10%;" altera o tamanho da imagem na tela do app. Caso queira aumentá-lo basta utilizar um número maior que 10 e para diminuir, use um número menor que 10.

Veja abaixo como o botão aparecerá no app:

  • Abaixo segue o código em questão.

<p>

<a href="https://api.whatsapp.com/send?1=pt_BR&phone=5500000000000"

><img src="https://i.imgur.com/suCWxMs.png" style="width:10%;" />

</a>

</p>

Agora basta inserir o código criado no editor do app. Para isso siga o passo a passo abaixo.

Caso deseje um direcionamento com botão retangular, como a imagem abaixo, use o código que fornecemos na sequência. Lembre-se que você pode alterar a cor do botão alterando a cor hexadecimal do código (#E03933) para a cor desejada.

<style type="text/css">body{

padding: 0 0 0 0;

background-color: #ffffff;

font-family: 'Roboto', sans-serif;

}

.btn{

color: #ffffff;

background-color:#E03933;

padding-top: 20px;

padding-bottom: 20px;

width: 100%;

border-radius: 10px;

border: none;

margin-top: 5px;

margin-bottom: 5px;

font-size:15px;

}

.alinhabtn{

text-align: center;

margin: auto;

}

u{

text-decoration:none;

}

</style>

<div class="alinhabtn">

<p><button class="btn" data-moblet="" href="#" onclick="window.open(

'https://api.whatsapp.com/send?1=pt_BR&phone=5500000000000',

'_system', 'location=yes'); return false;" style="text-decoration: none;"><u class="titleb2" data-moblet="">Fale conosco</u></button></p>

</div>

Criar redirecionamento para Whatsapp no app

  • Acesse o editor do app na Fabapp e clique na edição de uma aba Lista, Lista de texto, Catálogo ou Página em Branco;

  • Na caixa de edição de texto, abra a opção de HTML, clicando em “Código-Fonte”;

  • Feito isso, insira o código criado conforme orientação acima;

  • Feche o editor de Código-fonte clicando novamente sobre ele para que o sistema possa efetivamente salvar a alteração realizada.

Importante

  • Caso não tenha funcionado, certifique-se que não foi inserido nenhum espaço a mais no código e se nenhum item do mesmo foi esquecido;

  • Qualquer alteração no mesmo, que não seja o link da imagem o DDD e o número do celular impossibilitarão o funcionamento do redirecionamento;

  • Não esqueça que o telefone a ser inserido precisa ter um cadastro no WhatsApp. Caso contrário não haverá redirecionamento.

Atualizado em: 16/12/2022