FAQ Q213: How can I customize planyo using Javascript in advanced integration?

A nice thing about planyo'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.

Planyo provides support for using custom javascript on your website by calling the function on_planyo_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
• 'reservation_failure' -- called when the reservation form is submitted but there are errors in the form
• '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
• 'add_to_cart_done' -- if using the shopping cart in the 'quick add to cart' mode, then this is called after each shopping cart item has been added to the cart
• 'add_to_cart' -- called when 'quick add to cart' is opened
• 'add_to_cart_cancelled' -- called when 'quick add to cart' is cancelled
• '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
• 'reserve_new_step' -- called after a new step of a multi-page 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
• 'doc_uploaded' -- called when reservation document is uploaded (see Storage of custom reservation documents)
• 'unit_layout_map' -- called when the visual unit layout map is displayed
• 'show_coupons' -- called when the coupon purchase form is displayed
• 'coupon_payment_form' -- called when the coupon payment form is displayed

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

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

We recommend using Developer Tools to examine the DOM elements created by Planyo. Most will have an ID for easy access.

If you need your script to handle date/time changes, you can create a function called on_planyo_date_picked(). It will be called by planyo whenever a user changes the current dates/times. If you need your function to be called only once the new price / availability information has been updated in the 'your rate' box, then add a function called on_planyo_price_updated().

Please note that it's also possible to include the script tag in your templates. This is the easiest way to add 3rd party widgets (such as the tracking pixel) to specific stages of the booking process (e.g. when the reservation was fully completed). See Q267 for more about this.