💡 TL;DR
Crea la copia de tu widget en el WhatsApp Widget Generator
Copia el código HTML, el enlace CSS y el enlace JS.
Pega esto en el archivo footer.php de tu tema principal.
¡Publica!
1. Crear el widget de WhatsApp
Puedes crear tu propio widget utilizando la herramienta WhatsApp Widget Generator en el sitio web de Hoola.
Allí, ingresa la siguiente información:
Texto del mensaje de bienvenida
Texto del mensaje de avance
Texto del botón de llamada a la acción (CTA)
Color del botón
En el siguiente paso:
Tu número de WhatsApp comercial
Tu mensaje predefinido
Haz clic en ‘Generar’.
Tu información está guardada en un código HTML, que es lo que necesitamos.
Prueba el enlace para asegurarte de que realmente te lleve a WhatsApp y muestre el mensaje predefinido correcto.
Haz clic en ‘Copiar’ para copiar el código HTML.
2. Agregar el código en WooCommerce
2.1. Método Universal:
Accede al panel de administración de WordPress.
Navega a “Editor de archivos de tema”.
Asegúrate de que tu tema activo esté seleccionado (generalmente es el predeterminado).
Haz clic para abrir “footer.php”.
Después, desplázate hasta encontrar la etiqueta de cierre </body>
Este es el lugar donde debes pegar todo el código necesario.
Copia el script y la hoja de estilos:
<!-- Hoola WhatsApp Widget -->
<script defer src="https://cdn.hoola.so/public/scripts/hoola-widget.js"></script>
<link rel="stylesheet" href="https://cdn.hoola.so/public/css/hoola-widget.css" type="text/css">
<div id="hoola-pre-wrapper">
<div id="hoola-widget-wrapper" class="hoola-widget-wrapper">
...
<!-- Your Widget Code from the Generator -->
</div></div>
Debería verse algo así:
Haz clic en “Actualizar archivo” para publicar.
2.2. Best practices
Claro, aquí tienes la traducción:
Los siguientes pasos son un poco más técnicos.
Es posible que necesites un desarrollador o un experto en tecnología.
Si tienes un tema que se actualiza regularmente, corres el riesgo de que el código se elimine del tema después de una actualización. Lo más probable es que esto suceda.
Para evitarlo, puedes considerar 3 métodos alternativos:
Instalar un tema hijo y agregar el HTML, JS y CSS al archivo functions.php.
Instalar un complemento para agregar el código a todos los pies de página.
Utilizar Google Tag Manager para agregar una etiqueta de “HTML personalizado” con el código mencionado anteriormente.
3. Prueba si el widget aparece
Prueba el widget y verifica si se comporta como deseas.
Si no es así, contáctanos.
¡Eso es todo! 😊
💡 Para casos de uso avanzados, como el estilo, la utilización de múltiples widgets y la modificación visual de los mensajes de bienvenida o de avance, consulta la documentación de ayuda Hoola: Guías y Centro de Ayuda.
