This is aimed at developers, an simpler way of generating widgets is documented on the Website Integration page.
Include the Javascript
To start using the API include the following script tag:
<script src="https://www.planfy.com/assets/js/widget.js"></script>Popup Widget
The following code displays a floating widget trigger which launches a popup booking modal when clicked.
Remember to substitute your actual URL_KEY, optional parameters have been commented with //.
<script>
Pfy.init({
url: 'URL_KEY',
// color: '#000000',
// square: false,
// triggerTitle: 'Book Now',
// triggerDescription: 'Click here to book our services',
// locale: 'en',
// newTab: true // opens new tab on mobile
// serviceId: null, // preselect a service
// serviceGroupId: null, // preselect a service group
});
Pfy.displayTrigger();
</script>On-Page Inline Widget
The following code embeds the booking widget directly on a web page. It will expand to the with of its container.
Remember to substitute your actual URL_KEY, optional parameters have been commented with //.
<script>
Pfy.init({
url: 'URL_KEY',
// color: '#000000',
// locale: 'en'
});
Pfy.displayTrigger();
</script>Custom Popup Trigger
Firstly add the following code to initialize the config:
<script>
Pfy.init({
url: 'URL_KEY',
// color: '#000000',
// locale: 'en',
// newTab: true, // opens new tab on mobile
});
</script>Then add Pfy.clickTrigger() to the onClick event of your custom trigger like below:
<a onClick="Pfy.clickTrigger()">Book Now</a>Responsive Website
All of our widgets our mobile friendly, but this will only work if your own website is mobile friendly and contains a responsive meta tag <meta name="viewport" content="width=device-width">