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:
Crear o entrar en la página donde vamos a integrar el botón.
Añadimos que nos cargue el script de jquery y de Umappi en el header.
Añadimos el tag del botón configurando color, texto, icono, etc..
Comprobar el botón de compra.
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.
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.
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.
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.