Bookings

Free/busy resource planner

Let people know the availability of certain resources by embedding our free/busy resource planner within your website.

Embed using an iFrame

The Bookings module includes a helpful website integration that enables you to easily embed a free/busy resource planner in your website so that website visitors can visualise resource availability before making a booking request. Once embedded, your website planner remains up to date as booking changes are made in ChurchSuite.

Check out our Support Article to see how you can do it, just by copying and pasting a single line of code to your website!

Code

<iframe frameborder="0" allowtransparent="yes" scrolling="yes" src="https://demo.churchsuite.com/-/bookings/940cb3b1-eaaf-478c-b981-37dcb5d3ec39" style="border-width:0" height="860px" width="100%"></iframe>

Example

Booked Resources JSON

For customers looking to build their own Booked Resources planner, or build other integrations that need easy access to when certain resources are in use, we also offer a JSON feed of Booked Resource data. The JSON feed is still controlled by an Embed Configuration, so will need setting up in ChurchSuite before use, but can then be found at 

https://<your-church-subdomain>.churchsuite.com/-/bookings/<embed-configuration-uuid>/json
To easily find this URL, preview the Embed Configuration from within ChurchSuite, and add "/json" to the end of the URL! The data is paginated: the first page of data has extra keys for related models such as Sites and Resources, and then subsequent pages (accessed with a ?page=x query) only contain extra booked resource data.

The full documentation for this endpoint can be found here.

In order to make life as easy as possible, we have written a Javascript script (based on AlpineJS) that handles all the complexity of getting multiple pages of data from the JSON endpoint, and accessing it conveniently, letting you concentrate on designing your website. Simply import AlpineJS, import our script, give it your ChurchSuite URL and Embed Configuration UUID, and get designing!

See the Pen by ChurchSuite (@churchsuite) on CodePen.

These are the properties that are available on the Booked Resource model within our Javascript package, which you can use in your website:

  • bookedResource.id
    • The integer ID of the Booked Resource.
  • bookedResource.end
    • A day.js instance representing the end date/time. See https://day.js.org/ for more information about formatting.
  • bookedResource.quantity
    • The number of resources that have been booked.
  • bookedResource.resourceId
    • The integer ID of the Resource that has been booked.
  • bookedResource.start
    • A day.js instance representing the start date/time. See https://day.js.org/ for more information about formatting.

Other models that are available for use are:

We have prepared a number of examples to demonstrate how this can be used, with code available:

Upcoming bookings for a specific resource

See the Pen Upcoming bookings for a specific resource by ChurchSuite (@churchsuite) on CodePen.

FullCalendar Example (https://fullcalendar.io/)

See the Pen FullCalendar Example (https://fullcalendar.io/) by ChurchSuite (@churchsuite) on CodePen.

Bookings Support Articles

Room and resource management made beautifully simple.

Start your free trial today!

Don't just take our word for it. Try it for yourself!

We'd love you to take up this 30 day free trial so you can see how ChurchSuite will benefit you.

Free trial