Integración mediante el plugin de WordPress de Funbutler
Si utiliza WordPress, el proceso es sencillo.
Funbutler ofrece un plugin para WordPress.
Este plugin proporciona una lista de shortcodes que puede utilizar para insertar el formulario de reservas en la ubicación deseada.
Integración manual
Para sitios web que no utilizan WordPress, el formulario de reservas puede añadirse manualmente al código HTML.
Si tiene problemas con este método, utilice el método Bootstrapper (iframe) descrito más abajo.
Añadir los scripts y estilos necesarios
Añada lo siguiente en la sección <head> de su HTML:
<link rel='stylesheet' id='procommerca-booking-style-css' href='https://booking.funbutler.com/apps/public-app/styles.css' type='text/css' />
Añada lo siguiente al final de la sección <body>:
<style> .loader-wrapper{text-align: center;} .loader-icon{display: inline-block;width: 64px;height: 64px;} .loader-icon.padded{margin: 15px;} .loader-icon.large{width: 150px;height: 150px;} .loader-icon.large.padded{margin: 50px;} .loader-icon:after{ content: " "; display: block; width: 100%; height: 100%; margin: 1px; border-radius: 50%; border: 5px solid black; border-color: black transparent black transparent; animation: loader-icon 1.2s linear infinite; } @keyframes loader-icon{ 0%{transform: rotate(0deg);} 100%{transform: rotate(360deg);} } </style> <script type='text/javascript' src='https://booking.funbutler.com/apps/public-app/runtime.js'></script> <script type='text/javascript' src='https://booking.funbutler.com/apps/public-app/polyfills.js'></script> <script type='text/javascript' src='https://booking.funbutler.com/apps/public-app/main.js'></script>
Formulario de reservas
Para integrar el formulario, necesita CLIENT_ID y BOOKING_FORM_ID.
Si no puede encontrarlos, contacte con [email protected].
Añada el siguiente código donde desee que aparezca el formulario:
<booking-form clientId="CLIENT_ID" formId="BOOKING_FORM_ID"> <div id="main-loader" class="loader-wrapper"><div class="loader-icon large padded"></div></div> </booking-form>
Carrito
Cuando un usuario añade una reserva al carrito, se muestra un icono en el lado derecho de la pantalla.
Si desea mostrar el icono del carrito en otras páginas, añada lo siguiente en cualquier parte de la sección <body>:
<side-cart clientId="CLIENT_ID"></side-cart>
Tienda de tarjetas regalo
Para permitir que los usuarios compren tarjetas regalo, puede integrar la tienda de tarjetas regalo en cualquier página.
Añada el siguiente código donde desee que aparezca la tienda:
<gift-card-store clientId="CLIENT_ID"> <div id="main-loader" class="loader-wrapper"> <div class="loader-icon large padded"></div> </div> </gift-card-store>
Integración mediante el Bootstrapper de Funbutler (iframe)
Este método integra el formulario de reservas en un iframe utilizando un script Bootstrapper.
Debido a la implementación mediante iframe, existen algunas limitaciones, principalmente relacionadas con eventos de seguimiento (tracking) y la posición del icono del carrito.
Formulario de reservas (Bootstrapper)
Añada lo siguiente donde desee que aparezca el formulario:
<script src="https://booking.funbutler.com/assets/bootstrapper/bootstrap.js" data-client-id="CLIENT_ID" data-booking-form-id="BOOKING_FORM_ID"> </script>
Tienda de tarjetas regalo (Bootstrapper)
Añada lo siguiente donde desee que aparezca la tienda de tarjetas regalo:
<script src="https://booking.funbutler.com/assets/bootstrapper/bootstrap.js" data-client-id="CLIENT_ID" data-embed="giftCardStore"> </script>