Embedda via Funbutlers WordPress-plugin
Om du använder WordPress är processen enkel.
Funbutler tillhandahåller ett WordPress-plugin som kan installeras via WordPress.
Pluginet ger tillgång till shortcodes som används för att placera bokningsformuläret där du vill på webbplatsen.
Embedda manuellt
För webbplatser som inte använder WordPress kan bokningsformuläret läggas till direkt i HTML-koden.
Om problem uppstår med denna metod kan bootstrapper-metoden (iframe) användas istället.
Lägg till nödvändiga scripts och stilmallar
Lägg till följande i <head>-sektionen i din HTML:
<link rel='stylesheet' id='procommerca-booking-style-css' href='https://booking.funbutler.com/apps/public-app/styles.css' type='text/css' />
Lägg till följande i slutet av <body>-sektionen:
<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>
Bokningsformulär
För att Embedda bokningsformuläret behöver du CLIENT_ID och BOOKING_FORM_ID.
Kontakta [email protected] om du behöver hjälp att hitta dessa uppgifter.
Lägg till följande kod där formuläret ska visas:
<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>
Varukorg
När en användare har lagt en bokning i varukorgen visas en ikon till höger på skärmen.
Om du vill visa varukorgsikonen på andra sidor, lägg till följande i <body>:
<side-cart clientId="CLIENT_ID"></side-cart>
Presentkortsbutik
Om du vill att användare ska kunna köpa presentkort kan du bädda in presentkortsbutiken på valfri sida.
Lägg till följande där butiken ska visas:
<gift-card-store clientId="CLIENT_ID"> <div id="main-loader" class="loader-wrapper"> <div class="loader-icon large padded"></div> </div> </gift-card-store>
Embedda via Funbutler Bootstrapper (iframe)
Denna metod bäddar in bokningsformuläret i en iframe via ett bootstrapper-script.
Observera att iframe-lösningen medför vissa begränsningar, främst gällande spårning (tracking events) och positionering av varukorgsikonen.
Bokningsformulär (Bootstrapper)
Lägg till följande där formuläret ska visas:
<script src="https://booking.funbutler.com/assets/bootstrapper/bootstrap.js" data-client-id="CLIENT_ID" data-booking-form-id="BOOKING_FORM_ID"> </script>
Presentkortsbutik (Bootstrapper)
Lägg till följande där presentkortsbutiken ska visas:
<script src="https://booking.funbutler.com/assets/bootstrapper/bootstrap.js" data-client-id="CLIENT_ID" data-embed="giftCardStore"> </script>