---
title: 'JavaScript API'
description: 'This JavaScript library can be used to render booking widgets on your website.'
url: 'https://www.planfy.com/docs/1.0/javascript-api'
version: '1.0'
last_updated: '2026-11-01'
---

# JavaScript API

This is aimed at developers, an simpler way of generating widgets is documented on the [Website Integration](https://www.planfy.com/docs/1.0/website-integration) page.

## Include the Javascript

To start using the API include the following script tag:

```html
<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 `//`.

```html
<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 `//`.

```html
<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:

```html
<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:

```html
<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">`