1. Documentation
  2. Unbounce Apps
  3. Utility Apps

Embedding a Calendly Event into Smart Builder

Follow
Avatar
Tas Kurtu
Last Updated

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. You may see a dialog box that appears, explaining that you can swap an element on your page with this App:
    A pop-up on top of Smart Builder explaining that this App is swappable.

To learn more about changing elements, see our documentation: Changing Elements on your Smart Builder Page. 

Once you've installed the App, you can apply it to the landing page.

Embedding your Calendly Calendar in Smart Builder

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

  1. Single-click the element in Smart Builder you'd like to replace with Calendly.
  2. Click the Change Element icon that appears at the bottom of the element.
  3. A drop-down menu will appear with different element options to swap the existing one with; select Calendly:
    Gif demo of a user swapping a button in Smart Builder to a Calendly element.
  4. Click the Calendly placeholder, and 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:
    Calendly settings window
    1. 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.
    2. The Height of your calendar (i.e., how you want it to appear in Smart Builder), and 
    3. 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:
    Gif demo of a user updating the Calendly settings - a calendar event appears 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. 

Related articles