F2 Calendly Book Appointment — Installation & Setup Guide

Prerequisites
⦁ A public Calendly booking link (e.g., https://calendly.com/username/30min).
⦁ A Shopify theme that supports Online Store 2.0.

Install & Add to a Page
1. Install the app from your Apps list.
2. Go to Online Store → Customize.
3. Choose the page where you want the booking (Home, Contact, a custom page, or Product page).
4. Click Add section or Add block → choose “F2 Calendly Appointment”.
5. Drag the block/section to the position you want and Save.

Configure the Block
Calendly URL: Paste your booking link (e.g., “…/30min”).
⦁ Display Settings
⦁ Inline (default): Shows the Calendly form directly on the page.
⦁ Show as Button: Toggle On to show a button that opens Calendly in a modal.
⦁ Button Options (if Button is On)
⦁ Button Text: e.g., “Book Appointment” / “View Appointment”.
⦁ Alignment: Left / Center / Right.
⦁ Background Color: Match your brand color.
⦁ iFrame Height Controls
⦁ Desktop Height: e.g., 1000–1200px for a 30‑min flow.
⦁ Mobile Height: e.g., 1200–1500px for scroll‑free fit.
⦁ Tip: Increase height until no internal scrollbar appears.

Add to Multiple Pages
Repeat Customize → Add block/section on any other page where you want the booking flow.

Test the Flow
1. Open the page on desktop & mobile.
2. If you see any inner scroll, raise the Mobile/Desktop height a bit.
3. In Button mode, click the button to verify the modal opens and loads the correct Calendly link.