El CMS de Odoo es una herramienta potente que permite a los usuarios crear y gestionar sitios web de forma sencilla. Sin embargo, en ocasiones puede ser necesario insertar código HTML personalizado en el sitio web. Por ejemplo, puede ser necesario insertar un widget de redes sociales, un mapa de Google o un código de seguimiento de Google Analytics.
En este artículo, te mostraremos cómo embeber código HTML en el CMS del ERP Odoo, y utilizaremos como ejemplo, el añadir un botón de Whatsapp que suele ser uno de los casos de uso más demandados.
El botón de WhatsApp es una forma sencilla de que los visitantes de tu sitio web puedan ponerse en contacto contigo a través de la aplicación de mensajería instantánea.
Disclaimer importante; las últimas versiones de Odoo ya traen de caja la opción de vincular Whatsap al chat público de Odoo, sin embargo, hacemos este ejemplo añadiendo un botón de whatsapp porque ilustra muy bien cómo aprovechar las opciones de edición Website avanzadas de Odoo, además que te servirá si utlizas versiones antiguas de Odoo.
Paso 1: Añadir nuevos estilos con el editor de Código CSS
El tutorial específico para cumplir con este 1er Paso, se explica en el video del final de esta publicación. En el editor de CSS debemos añadir este código:
.whatsapp {position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
z-index:100;
}
.whatsapp-icon {
margin-top:13px;
}
Paso 2: Añade etiqueta HTML al <Head> de tu Website Odoo
El siguiente código debes de añadirlo a la sección <Head> de tu sitio Web.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Prueba WhatsApp</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Paso 3: Añade etiqueta HTML al <Body> de tu Website Odoo
Finalmente añades el siguiente código HTML al <body> de tu página web con Odoo para que el botón de Whatsapp aparezca en la esquina inferior derecha y se desplace por toda la página.
<a href="https://wa.me/51946377197?text=Me%20gustaría%20saber%20el%20precio%20de%20implementar%20el%20ERP" class="whatsapp" target="_blank"> <i class="fa fa-whatsapp whatsapp-icon"></i></a>
Conclusiones
Es muy fácil personalizar tu website y e-commerce de Odoo utilizando las herramientas de bloque de incrustado de código (embeber código html). En el siguiente video se muestra cómo se sigue los pasos mencionado en esta publicación, para que crees y añadas el botón Whatsapp a tu sitio Web.
Añade un botón de Whatsapp a tu website Odoo