Skip to main content
All CollectionsApp 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 year 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?