Adicionar ícone flutuante do WhatsApp no Magento 2

O primeiro passo é termos o bloco de conteúdo e o que será exibido. Ou seja, o ícone do WhatsApp com o link para o Whatsapp.

1- Vá em CONTEÚDO -> BLOCOS e crie o bloco novo bloco-whatsapp-link. IMPORTANTE: verifique antes se o bloco já existe na lista de blocos.

2- Utilizando o editor do Magento, adicione uma imagem do ícone do WhatsApp como o exemplo abaixo:

Procure pela opção de imagens do editor e adicione a imagem.

ATENÇÃO. Devemos inserir o estilo dessa imagem para que o botão fique ‘flutuante’ na página.

Vá na aba ADVANCED e, no campo STYLE, adicione o código abaixo:

width: 60px;height: 60px;position: fixed;bottom: 20px;right: 24px;z-index: 99999999;text-align: center;

3- Selecione a imagem e insira um link nela. É possível que após adicionar a imagem e seu estilo, a imagem fique à direita inferior do editor, quase que escondido.

O link que você irá inserir aqui é o que iremos montar abaixo, utilizando o seu número de Whatsapp para que os clientes possam abrir uma conversa.

3.1- Copie e cole este link: https://api.whatsapp.com/send?phone=seunumerodetelefone&text=sua%20mensagem

3.2- . Substitua o espaço “seunumerodetelefone” pelo seu número, da seguinte maneira:

XXYY000000000

“XX” é o código internacional do seu número. O código do Brasil é 55, então, se o seu celular for daqui, substitua XX por 55.

“YY” é o DD. Se seu número for de São Paulo, por exemplo, substitua YY por 11; se for do Rio de Janeiro, substitua YY por 21.

“000000000” é o seu número de telefone. Se ele for, por exemplo, 98765-4321, substitua o 000000000 por 987654321.

Assim, se o seu número for brasileiro, de São Paulo, e for 98765-4321, você deverá substituir “seunumerodetelefone” por 5511987654321.

3.3- Substitua o espaço “sua%20mensagem” pela sua mensagem, da seguinte maneira:

Como não é possível inserir espaços nos links, é necessário substituí-los pelo símbolo “%20”. Assim, se você quiser que a sua mensagem seja “Olá, meu amigo!”, você precisará substituir o espaço “sua%20mensagem” por Olá,%20meu%20amigo!.

Então, se você quiser criar um link para o seu número com a mensagem pré-definida “Olá, meu amigo!”, e o seu celular for brasileiro, de São Paulo, com o número 98765-4321, o seu link ficará https://api.whatsapp.com/send?phone=5511987654321&text=Olá,%20meu%20amigo!.

3.4- Você já pode enviar esse link para qualquer pessoa. Quem clicar nele será levado para uma tela de conversa do WhatsApp

Maiores detalhes, veja este artigo: https://olhardigital.com.br/2017/06/23/dicas-e-tutoriais/crie-um-link-para-o-seu-numero-no-whatsapp-e-facilite-o-papo-com-outros-contatos/

4- Salve as alterações no bloco de conteúdo. Precisamos agora chamar este bloco em algum lugar da loja. Podemos chamar, por exemplo, no bloco de rodapé (footer), ou mesmo em um Widget. Ele é uma espécie de bloco dinâmico que você consegue escolher sua localidade dentro da loja, a partir de um primeiro bloco de conteúdo.

Para isso, vá em CONTEÚDO -> WIDGETS.

5- Crie o bloco novo Link Whatsapp. IMPORTANTE: verifique antes se o bloco já existe na lista de blocos.

6- Escolha o tipo BLOCO ESTÁTICO CMS e escolha o tema que é utilizado na sua loja (procure auxílio da equipe da Bring caso haja dúvidas nesse campo, enviando email para [email protected]). O tema da nossa Loja Modelo é o Bring Modelo. Se a sua loja for baseada neste tema, escolha esta opção e clique em Próximo.

7- Preencha o título. Na área de Atualizações de Layout, no campo DISPLAY ON, escolha a opção TODAS AS PÁGINAS para que o bloco seja exibido em todas as páginas da loja. E em Container, escolha a opção PAGE HEADER.

8- Na seção OPÇÕES DO WIDGET, é aonde você irá escolher o bloco que criamos com a imagem do Whatsapp, clicando no botão SELECIONE O BLOCO. Basta escolher o bloco-whatsapp-link e salvar as alterações.

9- Limpe o cache da loja para que o botão seja exibido.

Caso haja dúvidas neste passo, enviar email para [email protected].