Calendar: Add Appointment Booking Calendar to the Page

The Calendar element allows you to embed a dynamic appointment booking widget into your funnel page. This widget seamlessly integrates with your pre-created Event Types from the Appointments app in your ClickFunnels workspace. With this element, users can effortlessly book their preferred time slots directly on your funnel page, ensuring a streamlined booking experience. In this article, you will learn how to use the Calendar element.

---

Requirements

• An active ClickFunnels account

• A funnel page

• An Event Type created in the Appointments app in your workspace

---

Creating an Event Type

1. From the left-hand main menu, click the Appointments app.

2. Select Event Types.

3. Click the Add Event Type button to create a new event.
   

4. Choose the Event Type you wish to create. The available options are:
   

   • One-on-One: This event type is ideal for 1:1 interviews, sales meetings, or casual coffee chats. It involves one host and one invitee.

   • Collective: Perfect for group interviews or group sales calls, this event type involves multiple hosts meeting with one invitee.

   • Round Robin: Ideal for evenly distributing incoming sales calls, this event type features one rotating host meeting with one invitee.

💡 Learn more about creating events: Appointments - How to Create and Manage Event Types

---

Attaching the Appointment Event Type in the Funnel Step

1. Navigate to the funnel step where you want to use the appointment event type.

2. Click the three-dot icon on the funnel step (such as an Opt-in page), and select Manage Event Types.
   

3. In the sidebar, click Attach event and select the event type you want to link to this funnel step. Once you’ve done this, click Save.

---

Adding a Calendar Element in the Page Editor

1. Inside the page editor, add a Section where you want to place the element.

2. Add a Row within that section.

3. Click the orange + Plus or Add New Element button inside the row to insert a new element.

4. From the Misc (Miscellaneous) category, select the Calendar element.
   

Once the Calendar element is added, you can customize its appearance to fit your page design.

Tips:

The Calendar is a fully integrated widget that displays key booking components, such as event details, a calendar, and a contact form. To ensure it displays correctly and avoids content distortion, consider placing this element within a one-column row to provide adequate space.

---

Customizing the Calendar Element

When you hover over an element, its border will be highlighted in orange. To access an element’s settings, click on the gear ⚙️ icon or click directly on the element.

Top Margin

The Top Margin setting lets you control the space between the current container (section, row, flex, and element) and the container directly above it. If no previous container exists, the margin will be applied relative to the parent container. If no preceding container is added, the Body will be the parent.

You can set top margin values independently for desktop and mobile by using the device icons (🖥️ & 📱 ). If no mobile value is specified, it will inherit the desktop setting by default. Use the slider or manually enter a value in pixels (px) or percentage (%) to create consistent spacing across screen sizes.

Texts

The Texts panel lets you change the wording that appears in the booking widget, such as Book Appointment, Select a Date & Time:, + Add Guest, and Phone Number. To find it, open the element’s settings and expand Texts, below Top Margin. Each field is labeled with its default text; type your own wording to replace it. Your edits appear on the live booking widget on your published page.

Control Panel

The Control Panel appears at the bottom of every container(Section, Row, Flex, and Element) in the page editor, offering quick access to essential settings and actions for that container. Here’s what each icon represents:

• ALL: The container will be visible on all devices (desktop, tablet, and mobile).

• Desktop (🖥️) Icon: The container will only be visible in desktop view (screens 771px and wider).

• Mobile (📱) Icon: The container will only be visible in mobile view (screens up to 770px wide).

• Eye (👁️) Icon: Hides the container on all devices. It isn’t deleted. To show it again, select All, Desktop, or Mobile in this panel, or open Layout in the top bar and turn the container’s desktop or mobile toggle back on.

• Code (</>): Opens the code editor for this container, where you can add custom CSS to change its styling. The editor shows the container’s CSS ID Selector so your CSS targets only this container. Open it from the code icon at the top of the settings panel, or hover over the container on the page and click Code in its toolbar.

• Trash (🗑️) Icon: Removes the container from the page editor entirely.

Advanced Settings

To further customize your container (section, row, column, and element), ClickFunnels provides Advanced settings that allow you to control style, advanced CSS, animation, and rendering logic. We’ve separated these advanced features into dedicated articles to avoid overwhelming you with too much content in one place and to keep our documentation concise. Explore the following resources for more details:

• Advanced Settings - Customize Styles: Learn how to populate contents dynamically, position containers, and apply z-index.

• Advanced Settings - Customize Animation: Learn how to add animations, control entry and exit effects, and adjust animation delay.

• Advanced Settings - Customize Logic: Learn how to apply conditional logic to elements and add custom attributes.

---

Previewing

When an Event Type is attached to the funnel step and the Calendar element is added, you can use the Preview 👁️ icon in the editor to view how the appointment widget appears. The widget will dynamically display all necessary details from your Event Type, including the event name, host information, meeting time and location, time zone, and a calendar showing available slots. Depending on your Event Type setup, users will also see options to select a time slot and the booking form.

This preview provides a representation of how your Calendar appears:

---

Limitations

Danger

1. Exclusive to Funnel Pages: The Calendar element is designed to work exclusively within funnel pages. It cannot be used on the site, landing pages, blogs, courses, or other pages of your workspace.

2. Paid Event Types Can’t Be Attached: Event Types that require payment can’t be attached to a funnel step, so they can’t be used with the Calendar element. In the Manage Event Types sidebar, paid Event Types are disabled, and hovering over one shows “Event Types with paid booking can not be added to Funnels at this time.” To offer a paid Event Type, publish it with one of these methods instead:

   • Embed the booking form directly on your webpage (Option 2 in the article below).

   • Share the direct event link with your audience (Option 3 in the article below).

   For detailed instructions on these methods, refer to the article Appointments - How to Publish Your ClickFunnels Appointments.

3. Where Visitors Go After Booking: After a visitor books through the Calendar element, the After Booking setting of your Event Type decides what happens next. If it’s set to Redirect to a Page, Redirect to a Funnel, or Redirect to a Custom URL, the visitor is sent to that location. If it’s set to Display Confirmation Page, the visitor continues to the next step in your funnel.

4. One Scheduler Per Page: Only one Calendar element can function properly on a single page. Adding multiple scheduler elements may lead to display or functionality issues.