Podemos integrar el botón de compra de Umappi, en un wordpress de un modo muy sencillo. Vamos a indicarlo con un ejemplo sencillo, creando una página nueva, pero se puede realizar en cualquiera de las páginas.


Los pasos serían:

  1. Crear o entrar en la página donde vamos a integrar el botón.

  2. Añadimos que nos cargue el script de jquery y de Umappi en el header.

  3. Añadimos el tag del botón configurando color, texto, icono, etc..

  4. Comprobar el botón de compra.



  1.  Creación de página nueva

Desde el panel lateral creamos o accedemos a la página donde queremos integrar el botón de compra.




  1.  Incluir librerías necesarias

En la página, en la sección de “scripts”, apartado “header” deben incluirse dos scripts necesarios:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="https://storage.googleapis.com/umappi-cdn/umappi-order-min.js"></script>


para ello, en la página donde estamos, vamos a la sección de “scripts”, apartado “header” y añadimos esas dos líneas, indicando que esos dos scripts se deben cargar en esa página.




  1.  Incluir el botón de compra.


Finalmente, escogemos el sitio donde queremos el botón de compra y en ese sitio hay que incluir el código del botón. El código del botón, ha de insertarse en modo html. Un ejemplo sencillo es crear un bloque de tipo párrafo y seleccionar “editar modo html”.




Finalmente añadimos el código correspondiente al botón, este código es del tipo:


<span class="btn-umappi-order" data-color="green darken-2" data-label="Hacer pedido online" data-icon="local_dining" data-app="xxxxxxx">comprar</span>


Donde xxxxxxx se debe reemplazar con el código de app que te facilitamos en umappi. El botón es configurable, cambiando los parámetros data-color, data-label, data-icon.




  1.  Comprobar el botón de compra.

Una vez se han realizado los pasos anteriores, guardamos los cambios y recargamos la página.



En el sitio donde se ha puesto el código del botón, ha de aparecer un botón con los colores que has escogido, el texto, el icono, etc.. y al pulsarlo debe enlazar correctamente con la aplicación web de Umappi.


Configuración del botón de umappi: 


En el tag configurar el botón que aparecerá con los siguientes parámetros.

  • data-app (obligatorio): Es el identificador de la app que vas a abrir. Umappi te facilitará ese valor en tu caso.

  • data-label (opcional): Es el texto que aparecerá en el botón renderizado. Por defecto es “Comprar”

  • data-icon (opcional): Es el icono que aparecerá al lado del botón renderizado. Por defecto es “add_shopping_cart”. Puedes consultar iconos disponibles en: https://material.io/tools/icons/?style=baseline

  • data-color (Opcional): Es el color del botón. Por defecto es “orange”. La paleta de colores disponible está al final del documento.



A continuación le proporcionamos un listado de colores para que pueda personalizar su botón acorde a los colores de su web.