All Collections
App Integrations
Booking Widget - Embedding your calendar into your website
Booking Widget - Embedding your calendar into your website

Embed your booking page into your own site.

Mica Manson avatar
Written by Mica Manson
Updated over a week ago

1. Enable Public Booking

  • Enable public booking - How To
    ​Note your handle in the link to the booking page:
    e.g. for https://fons.app/@orgname/book your handle would be orgname.     This link is located settings->Online Booking

    • If you would like your org booking name changed open a chat and let us know what you would like it to be changed to

2. Embed Booking Widget

  • Add a div in your site where the booking page will be embedded.

    <div id="fons-container" data-organization="orgname"></div>

  • the widget script at the end of your content before the closing <body> tag

    <script id="fons-widget" src="https://fons.app/static/js/widget.js"></script>

    Example:

    Your org name(organization name) may be Outer Banks Music LLC however your handle(online booking name) may be @outerbanks, so it would look like the below:

    <div id="fons-container" data-organization="outerbanks"></div> 

    <script id="fons-widget" src="https://fons.app/static/js/widget.js"></script>

Widget Options

Customize the widget using the following attributes to customize the widget to fit the needs of your website

data-organization

  • Required

  • The public id of your organization

data-theme

  • Optional (default: "light")

  • Supported values:
    ​"light" | "dark"

  • Set to "dark" if your web site has a dark theme and you would prefer the widget components to have a darker appearance.

Advanced Attributes

Unless you require advanced customization, these attribute should not be set

data-mode

  • Optional (default: "book")

  • Supported values:
    ​"book" | "individual" | "group" | "package" | "workshop"

  • Sets the initial start page of the widget
    ​

Property

Description

Options

Notes

data-organization

The public id of your organization

n/a

required

data-theme

"light" | "dark"

optional
​default: "light"

data-mode

"book" 
"individual" "group"
"package"
"workshop"

optional

default: "book"

Troubleshooting

  • The booking widget isn't working. What did I do wrong?

    Check to make sure that the id and data-organization attributes on the div tag are included and correct.
    ​Note: the widget expects the div id to be fons-container and script id to be fons-widget.

  • Does the widget work if I have a Content Security Policy?
    Yes! If you site uses a Content-Security-Policy check to make sure that frame-src includes fons.app in the list of allowed domains.

Did this answer your question?