Skip to main content

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 10 months ago

1. Copy your Booking Link

  • Go to Booking > Booking Link
    ​Note your handle in the link to the booking page:
    ​example: for https://fons.app/@orgname/book your handle would be orgname.

    • 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.

  • If you need additional help open a chat and send, we will do our best to help but because of the nature of website hosting companies the builds are all different, some with a lot of extra html and and sometimes nested iframes that cause the widget not to resize properly. We recommend just to use a button with your calendar url or hire a professional website builder to help.

    • a screenshot of any errors,

    • screenshot of view issues

    • the code you are using

    • booking link

Did this answer your question?