Embed using the Funbutler Wordpress plugin
If you are using Wordpress, the embedding process is very simple. Funbutler provides a Wordpress plugin that can be found here.
This plugin will provide you with a list of shortcodes that you can use to embed the booking form where you want it.
Embed manually
For websites not using Wordpress, the booking form can be manually added to the HTML.
If you are facing problems using this method, please consider the bootstrapper method below.
Add necessary scripts and styles
Add this to the <head> section in your HTML:
<link rel='stylesheet' id='procommerca-booking-style-css' href='https://booking.funbutler.com/apps/public-app/styles.css' type='text/css' />
Add this to the end of the <body> section in your HTML:
<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>
Booking form
To embed the booking form, you need the obtain the CLIENT_ID and the BOOKING_FORM_ID.
Please contact [email protected] if you are having trouble finding these.
Add this to the HTML where you want the booking form to show up:
<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> <side-cart clientId="CLIENT_ID"></side-cart><
Cart
When a user has added a booking to the cart, a cart icon is displayed on the right side of the screen.
If you want this cart icon to be displayed on other pages of the website, you can do the following;
Add this anywhere in the <body> section of your HTML:
<side-cart clientId="CLIENT_ID"></side-cart>
Gift card store
If you want the users to be able to buy gift cards, you can do this by adding the gift card store to any page.
Add this to the HTML where you want the gift card store to show up:
<gift-card-store clientId="CLIENT_ID"> <div id="main-loader" class="loader-wrapper"><div class="loader-icon large padded"></div></div> </gift-card-store>
Embed using the Funbutler Bootstrapper(iframe)
This method embeds the booking form in an iframe using a bootstrapper script.
This method - due to its iframe implementation - comes with some limitations. These mostly refers to the tracking events and positioning of the cart icon.
Booking form
Add this to the HTML where you want the booking form to show up:
<script src="https://booking.funbutler.com/assets/bootstrapper/bootstrap.js" data-client-id="CLIENT_ID" data-booking-form-id="BOOKING_FORM_ID"></script>
Gift card store
Add this to the HTML where you want the gift card store to show up:
<script src="https://booking.funbutler.com/assets/bootstrapper/bootstrap.js" data-client-id="CLIENT_ID" data-embed="giftCardStore"></script>