By specifying “data-callback” when including the Sirvoy widget, you will be able to catch events and run your own custom scripts (see example below). In most scenarios, you will only be interested in the ‘booking_completed’ event.
The following events are currently available:
- page_search – fires when displaying the search form.
- Data: user_data (arrivalDate, departureDate, totalAdults, category)
- page_results – fires when displaying the search results.
- Data: user_data (same as page_search)
- page_details – fires when displaying the guest details input form.
- Data: user_data (same as page_search)
- page_payment – fires depending on the payment solution being used, when the payment information is displayed.
- Data: payment_data (payment_processor), booking (JSON object of booking – may be provisional or final, depending on whether payment is required or optional)
- booking_completed – fires when booking is final and completed, this usually happens in combination with the ‘page_thanks’ event. However, if payment is set as optional, it might fire in combination with the ‘page_payment’ event.
- Data: booking (JSON object of completed booking)
- page_thanks – fires when displaying the confirmation page.
- Data: booking (JSON object of completed booking)
Below is an example that can be used to explore the different available events and associated data. Make sure to replace “data-form-id” with your own booking engine ID.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<html> <head> <script> function customEventHandler(data) { //Handle the possible events coming if(data.event == 'page_search') { // This will fire every time the first step showing the search form is loading. // Data will contain the selections made by the guest if returning from subsequent steps, // otherwise it will contain the default values. //echoing just to demonstrate access to it console.log('"page_search" registered'); console.log('Arrival: ' + data.user_data.arrivalDate); console.log('Departure: ' + data.user_data.departureDate); console.log('Adults: ' + data.user_data.totalAdults); console.log('Category: ' + data.user_data.category); } if(data.event == 'page_results') { // This will fire when search results are displayed. // Data will contain the selections made by the guest. //echoing just to demonstrate access to it console.log('"page_results" registered'); console.log('Arrival: ' + data.user_data.arrivalDate); console.log('Departure: ' + data.user_data.departureDate); console.log('Adults: ' + data.user_data.totalAdults); console.log('Category: ' + data.user_data.category); } if(data.event == 'page_details') { // This will fire when rooms have been selected and guest details are requested. // Data will contain the selections made by the guest. //echoing just to demonstrate access to it console.log('"page_details" registered'); console.log('Arrival: ' + data.user_data.arrivalDate); console.log('Departure: ' + data.user_data.departureDate); console.log('Adults: ' + data.user_data.totalAdults); console.log('Category: ' + data.user_data.category); } if(data.event == 'page_payment') { // This will fire when payment information is displayed (might fire more than once). // Data will contain payment_data.payment_processor and, if available, the booking object. //echoing just to demonstrate access to it console.log('"page_payment" registered'); console.log('Payment processor used: ' + data.payment_data.payment_processor); console.log('Full booking object: ' + JSON.stringify(data.booking)); } if(data.event == 'booking_completed') { // This will fire when the booking is completed and should only fire once. // Data will always contain booking in final state. //echoing just to demonstrate access to it console.log('"booking_completed" registered'); console.log('Full booking object: '+ JSON.stringify(data.booking)); } if(data.event == 'page_thanks') { // This will most often fire as the last "page load" (for some payment providers this may never fire). // Data will always contain booking in final state. //echoing just to demonstrate access to it console.log('"page_thanks" registered'); console.log('Full booking object: '+ JSON.stringify(data.booking)); } } </script> </head> <body> <script async type="text/javascript" data-callback="customEventHandler" data-form-id="123456789" src="https://secured.sirvoy.com/widget/sirvoy.js"></script> </body> </html> |
For information on adding a script in order to use a custom gallery for the booking engine of your website, please see this article.
Tip: If no payment solution or prepayment is activated, the booking_completed event will fire normally. However, if you activate a payment provider and set payments to be required, the page displaying the link to the payment provider will only trigger the event “page_payment”.
And only if the guest clicks the link at the end of the payment process, which takes him back to the confirmation page for the hotel, the “page_thanks” and “booking_completed” events will be triggered. In most cases, the guest will consider it done when the payment is completed (depending on the payment provider’s procedure.