InPage booking

Via de script code van de plugin kan je de boekingmodule op verschillende manieren aanpassen aan de look en feel van jouw website. Met de InPage instelling creëer je in een handomdraai een fraaie boekingmodule voor wanneer je werkt met een webpagina met twee kolommen.

Om de boeking goed te kunnen afronden verwijs je vervolgens door naar een tweede webpagina. In deze pagina staat dezelfde code maar nu zonder de InPage instelling. De plugin wordt in deze tweede pagina over de volledige breedte van de pagina weergegeven dus 100%.

Die 100% breedte is nodig voor het invullen van de klantgegevens en het tonen van de bon (prijsoverzicht) in een desktop of laptop omgeving.

Download de plugin code

  1. Kopieer plugin code 1 (script) en plaats deze in je InPage boekingspagina
  2. Vul bij FilterObjectTypeId / DisplayObjectTypeId en ObjectId de nummers in die je van Denk Digitaal hebt ontvangen
  3. Plaats bij BookingPluginObj.ApiKey de api key die je hebt ontvangen van Denk Digitaal
  4. Maak een nieuwe pagina (landingspagina InPage) en stel deze in op volledige breedte 100%
  5. Kopieer plugin code 2 (script) en plaats deze in je nieuwe pagina 
  6. Kopieer de URL van je nieuwe pagina
  7. Ga terug naar je InPage boekingpagina
  8. Verwijder https://demo.recronizer.nl/reserveren-groepsaccommodatie/ uit het script en plaats hier de URL van je nieuwe pagina
  9. Pas eventueel de kleurcodes aan in het script op beide pagina’

<script src=”https://recronizer.com/Scripts/RecronizerBooking_v1.js” ></script>

<div id=”divBookingPlugin”></div>


<script type=”text/javascript”>

(function () {

//This is the post function,inside this you can write whatever UI,CSS related changes you want to do
function postExecutionFunction()
{
jQuery(‘#recroBookingMain #btnReservation’).attr(‘style’, ‘display:none !important’);
jQuery(‘#recroBookingMain #btnReservation’).removeClass(“bk-btn”);

jQuery(‘#recroBookingMain #btnInPageNext’).attr(‘style’, ‘display:block !important’);
jQuery(‘#recroBookingMain #btnInPageNext’).addClass(“bk-btn”);
}


var BookingPluginObj = {};
BookingPluginObj.ApiKey = “QQ_M1e_-SJ-2nMLUbDgrKQwsNo4iTvtmyF48_NkQ”;
BookingPluginObj.Language = “nl”;
BookingPluginObj.OrderType = “booking”;
BookingPluginObj.FilterObjectTypeId = “1”;
BookingPluginObj.DisplayObjectTypeId = “1”;
BookingPluginObj.ObjectId = “2”;
BookingPluginObj.Version = “in”;
BookingPluginObj.MainBookingURL = “https://demo.recronizer.nl/reserveren-groepsaccommodatie/”;
BookingPluginObj.GoogleAnalyticsKey = “”;
BookingPluginObj.PackageId = “”;
BookingPluginObj.CustomPeriod = “”;
BookingPluginObj.ThankYouPageURL = “”;
BookingPluginObj.ShowOnlinePaymentButton = “”;
BookingPluginObj.HideSalutation = “”;
BookingPluginObj.CustomFilterType = “”;//Value=”filter” ,your above version property must have value ‘obj’ (Version = “obj”), if you provide value then do not pass “FilterObjectTypeId” and “DisplayObjectTypeId”
BookingPluginObj.ShowImageGallery = “”;
BookingPluginObj.ShowDescription = “”;
BookingPluginObj.InitialColorCode = “#3c8dbc”;
BookingPluginObj.ButtonColorCode = “#F39200”;
BookingPluginObj.ButtonHoverColorCode = “#e26e0e”;
BookingPluginObj.PriceColorCode = “”;
BookingPluginObj.FooterBackgroundColorCode= “”;
BookingPluginObj.FooterPriceTextColorCode= “”;
BookingPluginObj.FooterButtonTextColorCode= “”;
BookingPluginObj.FooterButtonHoverTextColorCode= “”;
BookingPluginObj.FooterButtonBackgroundColorCode= “”;
BookingPluginObj.FooterButtonHoverBackgroundColorCode= “”;
BookingPluginObj.FooterReservationButtonTextColorCode= “”;
BookingPluginObj.FooterReservationButtonHoverTextColorCode= “”;
BookingPluginObj.FooterReservationButtonBackgroundColorCode= “”;
BookingPluginObj.FooterReservationButtonHoverBackgroundColorCode= “”;
BookingPluginObj.FooterQuestionMarkBackgroundColorCode = “”;

//if you want to make OBJ work as inpage add below line function,otherwise remove it
//if you want to make any color code changes then write that code inside function

BookingPluginObj.Postfunction = postExecutionFunction

initRecroBooking(BookingPluginObj);
})();

</script>

<script src=”https://recronizer.com/Scripts/RecronizerBooking_v1.js” ></script>

<div id=”divBookingPlugin”></div>


<script type=”text/javascript”>

(function () {

//This is the post function,inside this you can write whatever UI,CSS related changes you want to do
function postExecutionFunction()
{
jQuery(‘#recroBookingMain #btnReservation’).attr(‘style’, ‘display:none !important’);
jQuery(‘#recroBookingMain #btnReservation’).removeClass(“bk-btn”);

jQuery(‘#recroBookingMain #btnInPageNext’).attr(‘style’, ‘display:block !important’);
jQuery(‘#recroBookingMain #btnInPageNext’).addClass(“bk-btn”);
}


var BookingPluginObj = {};
BookingPluginObj.ApiKey = “QQ_M1e_-SJ-2nMLUbDgrKQwsNo4iTvtmyF48_NkQ”;
BookingPluginObj.Language = “nl”;
BookingPluginObj.OrderType = “booking”;
BookingPluginObj.FilterObjectTypeId = “1”;
BookingPluginObj.DisplayObjectTypeId = “1”;
BookingPluginObj.ObjectId = “”;
BookingPluginObj.Version = “”;
BookingPluginObj.MainBookingURL = “”;
BookingPluginObj.GoogleAnalyticsKey = “”;
BookingPluginObj.PackageId = “”;
BookingPluginObj.CustomPeriod = “”;
BookingPluginObj.ThankYouPageURL = “”;
BookingPluginObj.ShowOnlinePaymentButton = “”;
BookingPluginObj.HideSalutation = “”;
BookingPluginObj.CustomFilterType = “”;//Value=”filter” ,your above version property must have value ‘obj’ (Version = “obj”), if you provide value then do not pass “FilterObjectTypeId” and “DisplayObjectTypeId”
BookingPluginObj.ShowImageGallery = “”;
BookingPluginObj.ShowDescription = “”;
BookingPluginObj.InitialColorCode = “#3c8dbc”;
BookingPluginObj.ButtonColorCode = “#F39200”;
BookingPluginObj.ButtonHoverColorCode = “#e26e0e”;
BookingPluginObj.PriceColorCode = “”;
BookingPluginObj.FooterBackgroundColorCode= “”;
BookingPluginObj.FooterPriceTextColorCode= “”;
BookingPluginObj.FooterButtonTextColorCode= “”;
BookingPluginObj.FooterButtonHoverTextColorCode= “”;
BookingPluginObj.FooterButtonBackgroundColorCode= “”;
BookingPluginObj.FooterButtonHoverBackgroundColorCode= “”;
BookingPluginObj.FooterReservationButtonTextColorCode= “”;
BookingPluginObj.FooterReservationButtonHoverTextColorCode= “”;
BookingPluginObj.FooterReservationButtonBackgroundColorCode= “”;
BookingPluginObj.FooterReservationButtonHoverBackgroundColorCode= “”;
BookingPluginObj.FooterQuestionMarkBackgroundColorCode = “”;

//if you want to make OBJ work as inpage add below line function,otherwise remove it
//if you want to make any color code changes then write that code inside function

//BookingPluginObj.Postfunction = postExecutionFunction//

initRecroBooking(BookingPluginObj);
})();

</script>