Como colocar dois números de whatsapp flutuante na loja

Olá pessoal neste artigo vou mostrar como podemos colocar dois números de whatsapp em só um botão flutuante na loja, só lembrando que a loja tem este recurso na base, mas para um botão só, veja aqui neste link.

Antes de começar, só para ficar claro este “botão flutuante” é um recurso disponibilizado pela API do whatsapp, em resumo, vamos usar a parte que permite criar um link e deste link abrir o whatsapp web ou o aplicativo (se tiver no celular). Improtante este é um recurso de terceiros, isso deixa o código fora da sua loja, então se o link um dia parar de funcionar, teremos que procurar outra solução. A Brasil na Web não se responsabiliza por códigos de terceiros ok?!

Bom agora que sabemos com funciona o “botão”, vou ensinar como fazer este visual:

Aqui temos uma ação para fechar a caixa, uma imagem da logo do whatsapp e dois telefones cada um com um link para abrir o whatsapp, para isso vamos precisar de 3 passos avançados, então leia com calma, copie e cole os códigos em cada local indicado abaixo, vamos lá.

1) CRIE UMA ÁREA PERSONALIZADA

Vamos criar uma área personalizada para colocar o código visual e é aqui que vamos trocar ou adicionar mais telefones e links, vá no menu de Customização > Áreas Personalizadas, vamos adicionar uma nova área, coloque um nome fácil de se lembrar, e na edição de texto clique no botão Código Fonte e cole o código abaixo:

<div id="abre_janela_wp"><span class="fa fa-chevron-left"><i>abre</i></span></div>
<div id="fecha_janela_wp"><span class="fa fa-chevron-right"><i>fecha</i></span></div>
<div id="janela_wp">
	<p><img src="/image/data/fale-whatsappweb.png"></p>
	<p>
		<a href="https://web.whatsapp.com/send?l=pt&phone=5514996837689&text=Ol%C3%A1%2C%20gostaria%20de%20informa%C3%A7%C3%B5es..." target="_blank">
			<span class="ddd">(14)</span>
			<span class="numero">9 9683-7689</span>
		</a>
	</p>
	<p>
		<a href="https://web.whatsapp.com/send?l=pt&phone=5514991280480&text=Ol%C3%A1%2C%20gostaria%20de%20informa%C3%A7%C3%B5es..." target="_blank">
			<span class="ddd">(14)</span>
			<span class="numero">9 9128-0480</span>
		</a>
	</p>
</div>

Volte e clique no botão de Código Fonte e ai poderá editar os dados aqui, mude a imagem, neste link você pode baixar a imagem do exemplo acima, basta clicar duas vezes na imagem “quebrada” e substituir por esta imagem que estou disponibilizando. Para os números e links basta tocar o texto e mudar a URL.

Pra gerar o link da API, use nossa ferramenta de gerar link de whatsapp, basta coloca o(s) seu(s) telefones de wahtsapp e gerar a URL, depois só colocar ela como link do telefone, veja neste tutorial como colocar link em texto e imagens, caso tenha dúvida.

Agora que editamos os textos, links e imagens vamos rolar um pouco a tela e vamos fazer as configurações deste módulo. Vamos ocultar o título, vamos colocar no layout “Todas as Páginas”, na posição “Rodapé Inferior”.

2) ADICIONE O CSS AVANÇADO

Agora vamos no menu de Customização > Personalização depois na aba de Avançado e vamos colar o trecho abaixo de CSS, mas MUITA ATENÇÃO se houver outro código ali, cole na última linha para não perder qualquer outro código que esteja ali e cole exatamente como está abaixo:

.whatsapp-duplo{margin: 0}	
	#abre_janela_wp,
	#fecha_janela_wp,
	#janela_wp{
		position: fixed;
		right: 0;
		top: 160px;
		z-index: 500;
		background: #27ae60;
		color: #FFF;

		-webkit-border-top-left-radius: .3rem;
		-webkit-border-bottom-left-radius: .3rem;
		-moz-border-radius-topleft: .3rem;
		-moz-border-radius-bottomleft: .3rem;
		border-top-left-radius: .3rem;
		border-bottom-left-radius: .3rem;
		-webkit-box-shadow: 0 0 0.3rem 0 rgba(50,50,50,0.75);
		-moz-box-shadow: 0 0 .3rem 0 rgba(50,50,50,0.75);
		box-shadow: 0 0 0.3rem 0 rgba(50,50,50,0.75);
		background-color: #27ae60;

		-webkit-transition: all 0.2s ease-in-out;
		   -moz-transition: all 0.2s ease-in-out;
			-ms-transition: all 0.2s ease-in-out;
			 -o-transition: all 0.2s ease-in-out;
				transition: all 0.2s ease-in-out;		
	}

	#abre_janela_wp,
	#fecha_janela_wp{
		z-index: 500;
		top: 120px;
	}
		#abre_janela_wp{right: -50px}

	#abre_janela_wp span, 
	#fecha_janela_wp span{
		display: block;
		font-size: 20px;
		width: 45px;
		height: 45px;
		line-height: 45px;
		text-align: center;
		cursor: pointer;
	}
		#abre_janela_wp span i, 
		#fecha_janela_wp span i{display: none;}	

	#janela_wp{
		z-index: 5800;
		padding: 10px 15px;
		text-align: right;		
	}
		#janela_wp a,
		#janela_wp a:hover{
			font-size: 18px;
			text-decoration: none;
			color: #FFF
		}
		#janela_wp a .ddd{font-size: 14px;}

	#abre_janela_wp.open    {right: 0 !important;}
	#fecha_janela_wp.close  {right: -60px !important;}
	#janela_wp.close        {right: -250px !important;}

3) ADICIONE O JAVASCRIPT AVANÇADO

E por fim vamos colocar o código de Javascript na mesma tela, um pouco mais abaixo, MUITA ATENÇÃO se houver outro código ali, cole na última linha para não perder qualquer outro código que esteja ali e cole exatamente como está abaixo:

$(function(){
	$('#fecha_janela_wp').click(function(e){
		e.preventDefault();
		$('#janela_wp').addClass('close');
		$('#abre_janela_wp').addClass('open');
		$('#fecha_janela_wp').addClass('close');
	});

	$('#abre_janela_wp').click(function(e){
		e.preventDefault();
		$('#janela_wp').removeClass('close');
		$('#abre_janela_wp').removeClass('open');
		$('#fecha_janela_wp').removeClass('close');
	});
});

Bom com isso vamos ter o mesmo visual, não se esqueça de subir a imagem que usei neste exemplo ou trocar por outra que achar melhor, já estamos pensando em fazer um recurso mais elaborado por dentro da loja, fique de olho nas atualizações.

Espero ter ajudado, e até mais!

Este artigo foi útil para você?!