Q213: How can I customize checkin24-7 using Javascript in advanced integration?

A nice thing about checkin24-7's advanced integration is that the reservation form, search and other items are physically embedded into your page's DOM so you can enhance the default functionality with javascript, if required.

checkin24-7 provides support for using custom javascript on your website by calling the function on_checkin24-7_form_loaded whenever an important event happens. This function takes the event as the single argument of type string. The following events are available:

• 'reservation_done' -- called when the reservation is successfully entered into the system
• 'cancel_code' -- called after the cancellation button along with request to enter the reason is displayed
• 'cancel' -- called after the cancellation is done by client
• 'verify_email' -- called after the email is verified by client
• 'payment_confirmation' -- called after an online payment is done by client
• 'reservation_details' -- called after the reservation details page is displayed
• 'reservation_list' -- called after a list of client's reservations is displayed
• 'payment_form' -- called when the payment form is displayed to client
• 'show_cart' -- in shopping cart mode, this is called when the shopping cart contents are displayed to client
• 'checkout' -- in shopping cart mode, this is called when the client checks out
• 'search' -- called when the search box is displayed
• 'search_success' -- called when the search results are displayed
• 'search_failure' -- called when there search provides no results
• 'reserve' -- called after the reservation form is displayed
• 'resource_list' --called after the resource list is displayed
• 'site_list' -- if using a meta site, called after a list of individual sites in the meta site is displayed
• 'resource_desc' -- called after the resource details page is displayed

Here's a very simple sample which changes the background color of the email field to yellow:

<scrip type='text/javascript'>
function on_checkin24-7_form_loaded(event) {
if (event=='reserve')
document.getElementById('email').style.backgroundColor='yellow';
}
</script>

We recommend using a tool like FireBug for the Firefox browser to examine the DOM elements created by checkin24-7. Most will have an ID for easy access.