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 set up depending on your hosted provider. You'll need a bit of technical knowledge on adding custom HTML or embedded code on your business website.
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 your Fitli business portal, 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:
Wix:
Wordpress:
To add embed or custom code to your Wordpress business site, view the following link to a quick tutorial guide:
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:
This process below will show you several HTML code examples of using YOUR business link.
Selection area link with anchor:
HTML code
<iframe src="link from above in red circle#filter" height="700" width="1000" border:none></iframe>
Calendar link with anchor:
HTML code
<iframe src="link from above in red circle#calendar" height="700" width="1000" border:none></iframe>
Different Views:
In addition to the default 'weekly' view, you can also now choose a clean 'LIST' style view (also daily, weekly, monthly, and list). This view looks great, is very clean, and works very well on mobile responsive sites. To choose the default view for your link, use the pulldown menu and select a default view for your calendar link.
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 tablets to better fit the calendar inside the frame. Here's an example of a mobile responsive embedded calendar, with inline styles including 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 the 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