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: Here's a very simple sample which changes the background color of the email field to yellow:

<scrip type='text/javascript'>
function on_planyo_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 Planyo. Most will have an ID for easy access.

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.
FAQ