Event Type Scheduler: Add Appointment Booking Calendar in the Page

  • Updated on Nov 20, 2024
  • Published on Nov 19, 2024
  • 4 minute(s) read

The Event Type Scheduler 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 “Event Type Scheduler“ element.

  1. An active ClickFunnels account

  2. A funnel page

  3. An Event Type created in the Appointments app in your workspace

  1. Exclusive to Funnel Pages: The “Event Type Scheduler“ 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. No Payment Processing for Paid Events: If your Event Type requires payment, the Event Type Scheduler element will not handle payment processing during the booking. Instead, you can use one of the following alternative methods:

    • Option 2: Embed the booking form directly on your webpage.

    • Option 3: Share the direct event link with your audience for seamless access.

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

  3. Automatic Funnel Navigation After Booking: When using the “Event Type Scheduler” element in a funnel, users will automatically be redirected to the next funnel step after booking. The “After Booking” settings defined in the “Event Type” will not take priority. If you prefer not to show the next funnel step after booking, consider publishing your event using Option 2 or Option 3.

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

  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 you want to link to this funnel step. Once you've done this, click Update.

Adding an Event Type Scheduler 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 Event Type category, select the Event Type Scheduler element.

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

Tips:

The Event Type Scheduler 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.

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 to open its' settings panel.

The Top Margin setting allows you to control the space between the current element and the element directly above it. If no previous element exists, the margin will be applied relative to the parent container, such as a row, section, or flex container. You can adjust the margin using the slider or manually input a value (px or percentage %), ensuring the spacing is consistent with your design needs.

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

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

  • Desktop Icon: The element will only be visible on the desktop view.

  • Mobile Icon: The element will only be visible on mobile view.

  • Eye Icon: Use this to hide the element from the page. The element will still be present in the editor but invisible to visitors.

  • Code Icon: This icon opens the code editor, where you can insert custom CSS or JavaScript code to modify the element's behavior or styling.

  • Trash Icon: Removes the element from the page editor entirely.

To further customize your container (section, row, column, and element), ClickFunnels provides powerful Advanced settings options 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:

When an Event Type is attached to the funnel step and the Event Type Scheduler element is added, you can use the Preview 👁️ icon in the editor to view how the appointment widget will appear. 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 Event Type Scheduler appears:

Related articles