How to Embed Your Fitli Calendar Into Your Website (The Easy Way)

1. Overview: Make Your Fitli Calendar Look Amazing on Your Website

Adding your Fitli schedule to your website should be easy — and look professional.

This guide shows you how to:

• Embed your Fitli calendar with simple copy-paste code

• Make it mobile-friendly and beautiful with no coding experience

• Install it into any major website builder (Wix, Squarespace, WordPress, GoDaddy, etc.)

• Help yourself, your web designer, or even use AI to do it for you!

2. Step 1: Find Your Fitli Calendar Link

1. Log into Fitli

2. Click "Admin" (top menu)

3. Select "Business Tools" (left menu)

4. Your Book Link is shown at the top — this is the link you'll embed.

Example:

https://app.fitli.com/business/spartan-dreams-llc/schedule

(You can click the "Copy" button next to it to copy it instantly!)

✅ You will use this link inside the code snippets provided below.

3. Step 2: Use Our Fitli Embed Code Generator

To make it even easier, we've built a simple tool for you!

Click here to open the Fitli Calendar Embed Code Generator

• Paste your Fitli URL into the tool.

• Click "Generate Code."

• Copy your custom embed code!

✅ This tool helps you generate clean, professional code in seconds.

(Note: Due to platform limitations, we can't embed the tool directly inside this FAQ page.)

4. Step 3: Choose Your Embed Style

5. Step 4: Copy the Code

Base HTML Embed Code:

<div style="max-width: 1200px; margin: 0 auto; padding: 20px;">
  <iframe 
    src="https://app.fitli.com/business/YOUR-BUSINESS-NAME/schedule"
    style="width: 100%; height: 1000px; border: none; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);"
    allowfullscreen>
  </iframe>
</div>

✅ Replace YOUR-BUSINESS-NAME with your actual Fitli URL part.

6. Step 5: Specific Instructions for Each Website Builder

🛠 Wix

• Use the Embed > Embed a Widget element.

• Drag it onto your page.

• Paste the code from above.

• Stretch to full width if needed.

• Mobile tip: Use the mobile editor to check iframe resizing.

🛠 Squarespace

• Add an Embed Block.

• Click "Edit" > "+" > Embed > Code.

• Paste the code.

• Adjust margins in section settings if needed.

🛠 Weebly

• Use the "Embed Code" element.

• Drag and drop it where needed.

• Paste the code.

• Check mobile preview.

🛠 WordPress (Classic)

• Add a Custom HTML block in the editor.

• Paste the code.

🛠 WordPress (Elementor)

• Drag an HTML Widget onto your page.

• Paste the code.

• Adjust responsive settings if needed.

🛠 GoDaddy Website Builder

• Use the HTML Code block under "Add Section > More".

• Paste the embed code.

🛠 Shopify

• Open your page editor.

• Add a Custom HTML block.

• Paste the code.

🛠 Webflow

• Use an Embed Element.

• Paste the code.

🛠 Duda

• Drag the HTML Widget.

• Paste the code.

7. Bonus: AI Website Builders

If you're using AI-driven builders like Lovable.dev, Durable.co, or others:

Use this AI prompt:

"Embed this external booking calendar iframe at full width inside a clean container with subtle padding and a mobile-responsive design. Add a slight border-radius and a soft box shadow for a modern look."

✅ Just paste your Fitli link when prompted.

8. Advanced Tips

• Height: Adjust height: 1000px; to fit your design.

• Border Radius: Remove border-radius if you want sharp corners.

• Shadow: Remove box-shadow if you want a flat design.

• Full Bleed: Remove padding: 20px; if you want edge-to-edge.

• Mobile Tuning: Use a small media query if needed.

Example:

@media (max-width: 600px) {
  iframe {
    height: 1200px;
  }
}

9. Troubleshooting

10. Still Need Help?

• Ask your web designer to insert the code.

• Or send them this guide!

• Or contact Fitli Support — we're happy to help!