Embedding a Calendly Event into Smart Builder


Calendly is a scheduling platform that makes booking meetings quick and easy. 

By adding a Calendly App in Smart Builder, your page visitors can book appointments and schedule slots in your calendar directly from your landing page. 

This article will explain how to embed your custom Calendly event into Smart Builder. 

  1. Navigate to the Apps tab on the left-hand side of Smart Builder.
  2. Search and locate the Calendly App.
  3. Click the plus button next to Calendly to install the app.
  4. The Calendly app will appear in the Add tab in Smart Builder.

You can now drag and drop the Calendly app anywhere on your page. To learn more about drag and drop, see this article: Using Drag and Drop in Smart Builder.  

Embedding your Calendly Calendar in Smart Builder

You can replace any other element on your page with the Calendly App.

  1. Click the Add tab at the top-left-hand corner of Smart Builder.
  2. Drag and drop the Calendly app into a section in Smart Builder:
    Drag and drop a Calendly app in to Smart Builder.
  3. Click the Calendly placeholder (Set up an Event button).
  4. Click the gear icon at the bottom corner to launch the Calendly Settings
  5. A small window will appear. Here, you can input the Calendly event details:
    Update Calendly event details.
    • The Username/Event:
        1. To locate this in Calendly, visit your list of events.
        2. From the event edit page, click view live page; this will launch the calendar invite page with your event. 
        3. Copy the URL that contains your username and event details. For example:
          If the event URL is https://calendly.com/jane-doe/30min, then in Smart Builder, input jane-doe/30min only.
    • The Height of your calendar (i.e., how you want it to appear in Smart Builder), and 
    • Conversion tracking settings 
      • If you want calendar bookings to count as conversions within the Page Overview, leave this button as-is. To turn off conversion tracking, toggle the radio button to off. See our documentation to learn more about setting conversion goals in Smart Builder.
  6. Click Apply when you're happy with these changes. 
  7. The Calendly event will appear on your page in Smart Builder:
    Realtime Calendly event in Smart Builder.

You're all set - be sure to Save and Publish your page!

To test the functionality of your Calendly event, we recommend navigating to the Preview mode.