Are you looking to integrate or add your fitli calendar to your business website? It's easy, just add some custom content to your hosted website, and your calendar will appear! Your clients can click to schedule, login and book. Below are specific instructions for how to get setup depending on your hosted provider.

How to 'Build' Your Own Embedded Calendar?

Step 1: Find your Business Calendar Link

First, you'll need to locate your business calendar link. After logging into fitli.com, head to the 'Admin' section, and click on 'Business Tools' under 'Business Setup & Customization' on the left. Look for the section titled "Book Link". Beside the 'Book Link' field click the copy icon to copy the link.



Step 2: Determine What Business Website Hosting Provider you Use

Each business hosting provider is different. We've researched some of the common ones below, and have some short information on how to get started. However, this is not an exhaustive list, and each provider's instructions are different. You should use the 'help' or support features for your business website provider to help you determine how to embed custom code.

Godaddy Website Builder:

Depending on which version of Godaddy Website Builder you have access to, you may or may not be able to 'embed' your calendar onto your Scheduling page. Click the link below to read and follow the directions for Godaddy:

https://www.godaddy.com/help/add-scripts-and-html-7684

Squarespace:

To add our embedded calendar to your site on Squarespace, head to Squarespace, log in and go to the page you'd like to have the calendar on. We usually recommend the main page, or the 'schedule' or 'calendar' page. Then use the instructions on this article to get to the "Embed code" page.

https://support.squarespace.com/hc/en-us/articles/206543617-Using-the-Embed-Block

Weebly:

To add our embedded calendar to your site on Weebly, head to Weebly, log in and go to the page you'd like your calendar or schedule to be on. We usually recommend the main page, calendar page, or 'schedule' page. Then, use the following instructions provided by Weebly to access the 'embed code' feature:

How to Embed Code on Weebly

Wix:

How to Embed Code on Wix

Wordpress:

To add embed or custom code to your Wordpress business site, view the following link to a quick tutorial guide:

Embedding Code in WordPress


Additional Options:

In addition to embedding the calendar on your page, you can select WHERE on the page you'd like the calendar to start. Options are in the filter selection area, or the calendar/schedule section. To link directly to the selection area or calendar, add the following 'anchor' to your embedded code above, as follows:

Selection area link:

HTML

<iframe src="link from above in red circle#filter" height="700" width="1000" border:none></iframe>

   

Calendar link:

HTML

<iframe src="link from above in red circle#calendar" height="700" width="1000" border:none></iframe>

  

Other options:

Additionally, if you'd like to make your embedded calendar more 'mobile responsive', you can change the fixed height and width to percentages. And, wrapping the <iframe> tag in a div, and adding "border:none" and percentage widths will allow viewing on devices such as mobile phones and tables to better fit the calendar inside the frame. Here's an example of a mobile responsive embedded calendar, with inline styles including some centering, percentage widths and automatic margins.

HTML

<div><iframe src="link from above in red circle#calendar" height="700" width="90%" border:none></iframe></div>

Step 3: Build YOUR custom embedded Calendar Link

Now that you have your business tools link, AND you know your business website provider, you'll need to build your custom embedded calendar link. Let's get started! Note that each step in this process BUILDS upon the prior HTML code.

Start with an <iframe> tag...

HTML

<iframe></iframe>

Then, add the SRC tag to the iframe, that's the part from the red circle above in Step 1.....

HTML

<iframe src="https://app.fitli.com/business/fitli-yoga/schedule"></iframe>

Then, choose to add an 'anchor' to the link, making the calendar load the schedule directly, ignoring the pulldowns and filters at the top.....

<iframe src="https://app.fitli.com/business/fitli-yoga/schedule#calendar"></iframe>

Then, depending on the template or the layout of your business website, you may want to add a <div> tag around the iframe. This will help divide or section the iframe from other elements.

FINAL:

HTML

<div><iframe src="https://app.fitli.com/business/fitli-yoga/schedule#calendar" height="700" width="100%" border:none></iframe></div>

Now you're done!  Take this final HTML code and PASTE it into your embedded code section of your business website (again, depending on which provider you use above). You'll see your Fitli business calendar appear!

If you have questions about your specific implementation, make sure to reach out to our support team at support@fitli.com