Integración de Umappi en Wordpress

Si has creado tu web con Wordpress esta es la manera en la que puedes integrar el botón de compra de Umappi en tu página.

En este ejemplo vamos a crear una página nueva pero el proceso sería el mismo en cualquiera de las página de tu web.

Estos son los pasos a seguir:

1. Crear una nueva página o entra en la página donde vas a integrar el botón.
2. Incluir y cargar en la página los script de jquery y de Umappi en el Header.
3. Añadir el tag del botón configurando color, texto, icono, etc..
4. Comprobar el botón de compra.

1. Crea una página nueva

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

2. 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.

3. Incluir el botón de compra.

Escogemos el lugar donde queremos situar el botón de compra de Umappi y añadimos ahí el código correspondiente al botón. Este ha de insertarse en modo html. Una manera sencilla de hacerlo 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>

Cuando lo hagas, xxxxxxx tendrás que reemplazarlo con el código de la app que te facilitamos en Umappi. El botón es configurable, cambiando los parámetros data-color, data-label y data-icon.

4. Comprobar el botón de compra

Una vez hayas realizado los pasos anteriores, guarda los cambios y recarga tu página.

En el lugar donde hayas incluido el código del botón ahora 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.

5. Configuración del botón de Umappi

En el tag configura 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. Puedes usar cualquier color de la paleta de Materialize, por ejemplo green darken-2.

Estos son todos los pasos a seguir para configurar tu botón de compra Umappi en una web creada en Wordpress.