Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Botão de contato por meio do WhatsApp

Hoje em dia, a comunicação entre o vendedor e o cliente é fundamental para que a venda seja concretizada. O WhatsApp é uma ferramenta que pode melhorar a comunicação entre ambas as partes e, graças a essa funcionalidade, os compradores podem entrar em contato com o administrador da loja, à partir de um botão. Neste tutorial, damos o passo a passo de como implementá-lo:


1. Você deve, primeiramente, adicionar o botão no arquivo layout.tpl, utilizando um código como o seguinte:

{% if store.whatsapp %} 
   <a href="{{ store.whatsapp }}" target="_blank" class="js-statsd-wa-event-click btn-whatsapp btn-floating fixed-bottom visible-when-content-ready">
        {% include "snipplets/svg/whatsapp.tpl" %}
    </a>
{% endif %}
<!--{# -->

2. Feito isso, no seu arquivo SASS, (por exemplo: para o layout Trend, esse é chamado de main-color.scss.tpl), você deverá adicionar os seguintes estilos:

Importante: Lembre-se de adaptar as variáveis de cor de acordo com o seu modelo.

.btn-floating{
  position:absolute;
  top: 5px;
  right: 5px;
  height: auto;
  padding: 5px;
  opacity: 0.5;
  border: 0;
  z-index: 10;
  &:hover,
  &:focus {
    opacity: 0.8;
  }
  &.fixed-bottom {
    position: fixed;
    top: initial;
    bottom: 15px;
    right: 15px;
  }
}
.btn-whatsapp {
  color: white;
  background-color:#4dc247;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
  opacity: 1;
  border-radius: 50%;
  svg {
    width: 40px;
    height: 40px;
    padding: 5px 2px;
    fill: white;
    vertical-align:middle;
  }
}

3. Dentro da pasta snipplets você deve criar uma outra, chamada svg, e nesta última, criar o arquivo chamado whatsapp.tpl:

<svg baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="300 -476.1 1792 1792"><path d="M1413 497.9c8.7 0 41.2 14.7 97.5 44s86.2 47 89.5 53c1.3 3.3 2 8.3 2 15 0 22-5.7 47.3-17 76-10.7 26-34.3 47.8-71 65.5s-70.7 26.5-102 26.5c-38 0-101.3-20.7-190-62-65.3-30-122-69.3-170-118s-97.3-110.3-148-185c-48-71.3-71.7-136-71-194v-8c2-60.7 26.7-113.3 74-158 16-14.7 33.3-22 52-22 4 0 10 .5 18 1.5s14.3 1.5 19 1.5c12.7 0 21.5 2.2 26.5 6.5s10.2 13.5 15.5 27.5c5.3 13.3 16.3 42.7 33 88s25 70.3 25 75c0 14-11.5 33.2-34.5 57.5s-34.5 39.8-34.5 46.5c0 4.7 1.7 9.7 5 15 22.7 48.7 56.7 94.3 102 137 37.3 35.3 87.7 69 151 101a44 44 0 0 0 22 7c10 0 28-16.2 54-48.5s43.3-48.5 52-48.5zm-203 530c84.7 0 165.8-16.7 243.5-50s144.5-78 200.5-134 100.7-122.8 134-200.5 50-158.8 50-243.5-16.7-165.8-50-243.5-78-144.5-134-200.5-122.8-100.7-200.5-134-158.8-50-243.5-50-165.8 16.7-243.5 50-144.5 78-200.5 134S665.3 78.7 632 156.4s-50 158.8-50 243.5a611 611 0 0 0 120 368l-79 233 242-77a615 615 0 0 0 345 104zm0-1382c102 0 199.5 20 292.5 60s173.2 93.7 240.5 161 121 147.5 161 240.5 60 190.5 60 292.5-20 199.5-60 292.5-93.7 173.2-161 240.5-147.5 121-240.5 161-190.5 60-292.5 60a742 742 0 0 1-365-94l-417 134 136-405a736 736 0 0 1-108-389c0-102 20-199.5 60-292.5s93.7-173.2 161-240.5 147.5-121 240.5-161 190.5-60 292.5-60z"/></svg> 

4. Por último, e para ativar a funcionalidade, você deverá acessar o painel de administração da loja, ir até a seção Configurações>WhatsApp e adicionar um número de telefone para WhatsApp. Se você nunca definiu nada em relação ao WhatsApp, verá algo como o seguinte:

Depois de adicionar seu número, você verá esta tela, onde você será possível ativar ou desativar a funcionalidade a qualquer momento:

Pronto! À partir de agora, os clientes podem conversar com o administrador da loja através do WhatsApp.