Download This Apps Free
Install Now : F2 Calendly Book Appointment
If you need complete Shopify store development, please message us on WhatsApp. We will give you a response just in one minute. Or mail to us, Amzadhossen420360@gmail.com.
Embed Calendly in your Shopify store for instant, in-page bookings.
F2 Calendly Book Appointment embeds your Calendly booking page directly in your Shopify store. Paste your Calendly URL to display the appointment form inline, or switch to a sleek button that opens the form in a modal. Control iFrame height separately for mobile and desktop—no scroll bars, always a perfect fit. Customize button text, alignment, and color. No code required; Online Store 2.0 block, fast and responsive. Use on any page so customers book without leaving your site.
- Paste Calendly URL to embed booking form anywhere.
- Inline view or modal button; toggle instantly.
- Separate iframe height for mobile and desktop.
- Scrollbar-free, responsive layout for clean UX.
- Custom button text, alignment, and colors; no code.
Search terms:
- calendly embed
- booking button
- appointment form
- meeting scheduler
- calendar popup
F2 Calendly Book Appointment — Installation & Setup Guide
This guide explains how to install, configure, and troubleshoot the F2 Calendly Book Appointment app for Online Store 2.0 themes.
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
- Install the app from your Apps list.
- Go to Online Store →
- Choose the page where you want the booking (Home, Contact, a custom page, or Product page).
- Click Add section or Add block → choose “F2 Calendly Appointment”.
- 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
- Open the page on desktop & mobile.
- If you see any inner scroll, raise the Mobile/Desktop height a bit.
- In Button mode, click the button to verify the modal opens and loads the correct Calendly link.
