Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Botón de chat a través de WhatsApp

Hoy en día la conversación entre el vendedor y el cliente es clave para que la venta se concrete. WhatsApp es una herramienta que puede mejorar la comunicación entre ambas partes y gracias a esta funcionalidad los compradores podrán entrar en contacto con el administrador de la tienda,  desde un botón. En este tutorial te contamos cómo implementarlo:


1. Primero deberás agregar el botón en el archivo layout.tpl, utilizando un código como el siguiente:

{% 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. Luego, en tu archivo de SASS, (por ejemplo: para la plantilla Trend este se llama main-color.scss.tpl), deberás agregar los siguientes estilos: 

Aclaración: Recordá adaptar las variables de color de acuerdo a tu plantilla.

.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 de la carpeta snipplets deberás crear otra que se llame svg, y en esta última creá el siguiente archivo llamado 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 y para poder activar la funcionalidad, tendrás que ingresar al panel de administración de la tienda, en la sección Configuraciones > WhatsApp y agregar un teléfono de WhatsApp. Si nunca configuraste nada en relación a WhatsApp, verás algo como lo siguiente:

Luego de agregar tu número vas a poder ver esta pantalla, en la que podrás activar o desactivar la funcionalidad cuando quieras:

Y ¡listo! De ahora en más, los clientes podrán chatear con el administrador de la tienda  a través de WhatsApp.

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.