Booked includes a lot of features that you may not know about. In this article we’ll talk about a simple way to display reservations from Booked on your website.

If you just want to display reservations from Booked to your guests without needing them to navigate to the application and browse the schedule, there is a simple JavaScript snippet you can include on your website.

The first thing you’ll need to do is make schedules or resources public. Anything that has not been marked as public will not be displayed.

The next task is a little bit more technical. Servers have a security feature that prevent loading JavaScript from different domains (Cross Origin Resource Sharing). You’ll need to tell your web server that it’s OK to serve this content. In Apache you can accomplish this by adding the following line to your .htaccess file.

Header Set Access-Control-Allow-Origin "*"

Once that’s done you’re ready to add the snippet to your website. If you open Help and go to the section titled “Embedding a Calendar Externally” we give you the full snippet. It will look something like this.

<script async src="https://demo.bookedscheduler.com/Web/scripts/embed-calendar.js" crossorigin="anonymous"></script>

You can drop this anywhere in your HTML body content and we’ll load reservations using the default snippet settings.

The snippet displays a very simple HTML component that isn’t the prettiest thing to look at.

My feeling is that you’ll want to fit the component in with your website’s theme, so you can take advantage of the CSS classes we provide to style it however you like. All of the CSS class names start with booked-

Customizing the Contents

There are multiple options you can include on the script to customize what’s shown.

Name	Possible Values	Default	Details
type	agenda, week, month	agenda	Controls the view that is shown
format	date, title, user, resource	date	Controls the information shown in the reservation box. Multiple options can be passed. For example, to show date and title request date,title
d	Any digit between 1 and 30	7	Limits the number of days shown for the agenda view
sid	Any schedule public ID	All schedules	Limits the reservations shown to a specific schedule
rid	Any resource public ID	All resources	Limits the reservations shown to a specific resource

For example, to show the month view for schedule 123 and the date and title for reservations, you would use the following.

<script async src="https://your-booked-url/Web/scripts/embed-calendar.js?type=month&sid=123&format=date,title" crossorigin="anonymous"></script>

Hosting and Support

Did you know that I offer professional hosting and support for Booked? You can set up a free trial in minutes and get unlimited support.

This article was written on November 15, 2019, so check your documentation for the latest options.