Como integrar Umappi en tu propia web

Si ya cuentas con una web y no la has creado con servicios como Wordpress o Wix, esta es la manera en la que puedes integrar nuestro sistema de compra en tu página.

Hay dos manera de llevar a cabo la integración:

• Añadir un botón de compra que al seleccionarlo abra la aplicación en la propia página.
• Incrustar en la propia página tu aplicación personalizada.

Añadir un botón

Una de las maneras más sencillas de integración es añadir un botón de compra y que al seleccionarlo, sin salir de la propia página web, te abra la aplicación para poder realizar un pedido.

Para la integración del botón basta con añadir un script js que facilitamos y añadir un tag concreto en la zona de la web donde quieres que aparezca el botón.

Los pasos a seguir sería:

1. Entre las etiquetas <head> del documento HTML, incorporamos la librería jquery en caso de que no esté disponible en nuestra página web.
2. Entre las etiquetas <head> del documento HTML, incorporamos la librería umappi-order-min.js
3. Entre las etiquetas <body>, incorpora el tag correspondiente al botón, que es un elemento con la clase btn-umappi-order
4. ¡Listo!

Mira este ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Integración de botones de compra en web</title>
    <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>
  </head>
  <body>
    <p>
      <span class="btn-umappi-order" data-color="green darken-2" data-label="Hacer pedido online" data-icon="local_dining" data-app="xxxxxxx">comprar</span>
    </p>
  </body>
</html>

Configuración del botón

A la etiqueta del botón, además de la clase btn-umappi-order, se le pueden incorporar varios parámetros que hacen que el botón se integre mejor con la página web.

Estos parámetros son:

• data-app (obligatorio): Hay que poner el identificador de la app que te facilita Umappi para tu aplicación.
• data-label (opcional): El texto que quieres que aparezca en el botón. Por defecto es “Comprar”.
• data-color (opcional): Es el color del botón. Por defecto es orange. Puedes usar cualquier color de la paleta de Materialize.
• data-icon (opcional): Es el icono que quieres que aparezca en el botón. Por defecto es add_shopping_cart. Tienes todos los iconos disponibles en: https://material.io/tools/icons/?style=baseline

Incrustar la aplicación

También está la posibilidad de inscrustar la aplicación en la web, de una manera sencilla.

Los pasos a seguir serían:

1. Entre las etiquetas <head> del documento HTML, incorporamos la librería jquery en caso de que no esté disponible en nuestra página web.
2. Entre las etiquetas <head> del documento HTML, incorporamos la librería umappi-order-min.js
3. Entre las etiquetas <body>, incorpora el tag correspondiente al botón, que es un elemento con la clase zone-umappi-order
4. ¡Listo!

Mira el ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Integración de la aplicación en web</title>
    <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>
  </head>
  <body>
    <div style="text-align:center;width:35%;margin: 0 auto;">
      <div class="zone-umappi-order" data-app="xxxxxxxxx"></div>
    </div>
  </body>
</html>

Configuración la aplicación incrustada

La etiqueta que se usa para incrustar la aplicación permite cierta personalización añadiendo parámetros a ese elemento.

Estos parámetros son:

• data-app (obligatorio): Hay que poner el identificador de la app que te facilita Umappi para tu aplicación.
• data-width (opcional): Es el ancho que se quiere que tenga el elemento incrustado.
• data-height (opcional): Es el alto que se quiere que tenga el elemento incrustado.

De estas maneras ya habrías integrado tu sistema Umappi en una web ya existente.