E hoje a dica é totalmente hands-on (ou seja, mão na massa), como eu disse no post WhatsApp: utilizar ou não em sua loja virtual Tray? (se você não leu, recomendo dar um pulinho lá também e conferir as dicas), o WhatsApp é uma ferramenta extremamente importante para sua loja / comunicação empresarial, te auxilia a gerar um atendimento mais eficiente, rápido e serve como uma ponte significativa na sua estratégia de marketing (tudo isso, desde que utilizado de forma inteligente, caso contrário, ele se tornará um terrorista em sua empresa), diante disso tudo, hoje quero mostrar como você pode inserir aquele botão flutuante em sua loja.

Muitooo importante mencionar, neste post iremos acessar algumas áreas não tão comuns para o usuário padrão, um exemplo é o Open Code, área dentro do seu painel na Tray que te dará acesso aos códigos fontes do tema da sua loja, por isso, MUITO cuidado para não mexer em algo que não deve e “quebrar” o layout da sua loja.

2 formas de integração do WhatsApp:

Bom, no post que já mencionei acima, falei na 5° dica de como você pode ter um link do WhatsApp para ser utilizado em banners, campanhas e em outros lugares, abaixo repliquei este ponto para você também saber como fazer isso:

É possível criar um link direto para seu WhatsApp e disponibilizá-lo em anúncios nas redes sociais e também, principalmente em seu e-commerce.

A opção mais recomendada é deixar um ícone flutuante fixo em todas as abas de seu site para chamar atenção do cliente.

Lembre-se, porém, que o ícone deve ser discreto e conseguir chamar atenção sem atrapalhar a navegação do site. Conte com a ajuda de um especialista em programação para fazer o ícone do modo certo e não prejudicar as vendas.

O botão pode ter um call to action de “Fale com a gente no WhatsApp” e, ao clicar, o cliente será direcionado para a janela do WhatsApp (seja no navegador ou no celular) já com o contato da loja aberto.

Isso pode ser usado como uma ótima alternativa aos chats de atendimento online de uma loja virtual, que são um apoio para os clientes que têm dúvidas sobre o produto, modo de entrega e outras questões.

Para criar o link diretamente (sem códigos de terceiros), utilize o link abaixo e SUBSTITUA os dígitos zeros em negrito pelo número do celular contendo o DDD:

https://api.whatsapp.com/send?l=pt_br&phone=5500000000000

Se quiser ler o post completo, acesse este link onde falo da importância do WhatsApp em sua loja virtual Tray.

Botão flutuante:

Como mencionei no parágrafo acima, o ideal para sua loja Tray, é ter o botão flutuante em um dos cantos da tela (direito, mais comum ou esquerdo, em alguns casos o chat está no lado direito, por isso movemos para o lado esquerdo o WhatsApp).

Para gerar este botão de forma extremamente simples e fácil, vamos utilizar um site chamado WhatsHelp, neste site iremos gerar o código para inserção dentro dos arquivos do nosso tema no Open Code da Tray (lá no painel administrativo), vamos aos passos:

1) Acesse o link https://whatshelp.io/widget

2) Nesta tela você irá notar o botão “Get Your Button”, clique nele.

3) Nesta próxima tela, note que há diversos ícones, como usaremos a solução GRÁTIS do WhatsHelp, ele vai nos permitir ter no máximo 2 ícones (links), mas no caso deste tutorial, vamos ter apenas um, ou seja, deixarei selecionado APENAS o WhatsApp.

4) Como pode notar, quando deixamos selecionado o WhatsApp, ele abre uma caixa solicitando o número do celular, note que deve ser o número completo, ou seja +55(ddd)99999-9999, caso contrário ele não irá reconhecer.

5) Na próxima opção “Customize your button” você pode fazer uma pequena customização da posição e do call-to-action (chamada para ação), há outras opções nesta tela, mas apenas para os usuários que utiliza a solução paga, em nosso caso, estamos utilizando a versão GRÁTIS.

Escolha a posição na qual quer seu botão e a mensagem que deseja que apareça.

Você pode observar que ele mostra um “Preview” do seu botão na posição que selecionou acima, inclusive clicando no botão, ele abrirá a tela para contato.

6) Ainda mais abaixo nesta tela, você encontrará a opção de gerar o código para ser inserido em sua loja, entre com seu email (eles enviarão o código para ele) e clique em “Get Button Code”

Após submeter para seu email, abrirá também uma caixa com um código, se preferir pode acessar seu email, ou já copiar este código que aparece na tela para ser utilizado na Tray.

7) Com seu código em mãos, chegou a hora de inserir ele no painel da Tray, sendo assim, acesse o painel da sua loja, no menu lateral esquerdo vá na opção MINHA LOJA > DESIGN DA LOJA

8) CUIDADO: nesta área você verá os temas disponibilizados em sua loja, note que há um que está como TEMA PUBLICADO, indico que clique na SETINHA para baixo neste tema e posterior clique na opção DUPLICAR

9) Após DUPLICAR, você vai encontrar a CÓPIA do tema rolando sua barra de rolagem, nesta área iremos clicar em EDITAR HTML do tema CÓPIA

10) A partir deste ponto, será apresentado para você o Open Code, a área de codificação do tema, iremos atualizar apenas UM arquivo, por isso, indico que caso não tenha conhecimentos, não acesse nenhum outro para evitar problemas. Utilize a caixa de “buscar arquivos” e digite dafault.html e tecle enter, utilize sua barra de rolagem para encontrar o arquivo footer.html destacado na listagem em vermelho.

11) Abra este arquivo dando um clique sobre ele, não se assuste, mas surgirá uma tela preta com inúmeros códigos, utilize a barra de rolagem DESTA ÁREA, e role até quase o final, e encontre na área escura o código </body> (provavelmente estará em um tom avermelhado)

12) Copie o código que você gerou no WhatsHelp, e cole o mesmo antes do código </body>

13) Feito isso, clique no botão SALVAR logo abaixo da tela escura

Após salvar, aparecerá uma mensagem de que o arquivo foi salvo com sucesso

Após esta mensagem clique na opção FECHAR junto as opções ao lado do SALVAR

14) Após fechar o arquivo, você estará de volta a tela principal do Open Code, agora basta PUBLICAR a atualização realizada, a opção para publicar está na parte superior desta tela, destacado em AZUL

15) Prontinho, seu layout alterado agora foi publicado, e pode ser que você não visualize instantaneamente em sua loja o botão do WhatsApp, pois há um tempo de propagação das atualizações, aguarde pelo menos umas 4 horas após o processo, caso não esteja visualizando o botão do WhatsApp em sua loja, realize o processo para checar se salvou corretamente seu código.

Parece complexo, mas é bem simples, um processo que não levará nem 5 minutos para ser realizado, e que com certeza somará muito na estratégia e contribuição na conversão da sua loja.

Então é issoooo, sucesso por aí, vamos em frente.

Comentários
Juliano Costa

Autor Juliano Costa

Diretor de Inovação (CIO) na IComm, Palestrante, Head of Digital na FMS360 e Empreendedor Serial, possui mais de 10 anos de experiência em E-commerce, Marketing Digital, Branding e Criação. Ao longo de sua carreira tem focado em ajudar empreendedores dos mais diversos segmentos a alcançar seus objetivos utilizando a tecnologia como aliado em seu crescimento.

Ver mais postagens - Juliano Costa