Company Blog Support
Frank Hagan
posted

Contents

    Back to Top

    Integrating with Calendly via Zapier

    About

    Calendly is a popular scheduling application that ONTRAPORT uses to schedule demo and client success appointments. The integration uses Zapier and Calendly to add or update a Contact Record in ONTRAPORT with the date and time of an appointment. 

     

    Prerequisites

     

    Getting Started

    1. Connect your ONTRAPORT account with Zapier following their instructions.

    2. Connect your Calendly account with Zapier following their instructions.

    3. Obtain the Calendly embed code and copy it to a text file for use later. Click your account name in the upper right and select Share Your Link

      Calendly share your link

    4. Click the Embed on Your Website option.

      embed code

    5. Copy the Embed Code by clicking the Copy Code link. Paste the code into a text file. We will modify this code slightly when we embed it into an ONTRApage Custom HTML block.

      copy inline embed code

    6. In ONTRAPORT create a custom date field. Navigate to Contacts > Settings > Field Editor and add a new field named "Calendly Appt Date". Be sure to make it a Date field.

      Calendly custom date field in ONTRAPORT


    7. Create another field in ONTRAPORT. Name the field "Calendly Appt Time" and make it a Text field in the Field Type drop down.

      Calendly custom text field for the time in ONTRAPORT


    8. If you plan on having more than one appointment possible in the Contact Record, add additional custom fields. Each additional appointment you allow for needs one date field and one text field. 

    9. Remember to click the Save button at the top right of the Field Editor when done adding fields. 

      save button

    10. Create an ONTRApage to use for your Calendly appointment calendar. Add a Custom HTML Block and paste the Calendly embed code into it. It will look something like this (hover over the image to enlarge):

      embed code - hover over image to enlarge

      We are going to modify this code so the appointment calendar is pre-filled with the Contact's name and email address. To do that, look for the data-url= portion of the code. It will look something like this:

      data-url="https://calendly.com/frank-hagan"

      Add the text ?name=[First Name]%20[Last Name]&email=[Email] to the end of the data-url, but still inside the quotes. You can copy and paste that line above if you like. It should look like this:

      data-url="https://calendly.com/frank-hagan?name=[First Name]%20[Last Name]&email=[Email]"


      This uses the merge fields for first name, last name and email address to prevent errors in registration. 

    11. Continue designing your page. In this example, you can see the Calendly calendar doesn't render inside the ONTRApages editor in the Custom HTML block at the bottom , but we can design a header, use merge fields for the new contact's first name, etc. This page will be used as the "Thank You" page after they opt in to have the session (hover over the image to enlarge).

      calendly appointment page in ONTRApages editor


    12. Create another ONTRApage with an opt-in form on it. Name it "Calendly Opt In Page". Use at least the First Name, Last Name and Email fields, and make them all required. On the Smart Form Settings tab, select the appointment calendar page published in step 11 from the drop down box labeled "Use this landing page" (hover over the image to enlarge). 

      Set appointment page as thank you page


      This is the method ONTRAPORT uses for setting appointments for demos and new client orientation appointments. The advantage is that the opt in form fields are forwarded to Calendly's appointment form; this eliminates the possibility of errors by the new contact in filling out the second form.


    13. Publish the "Calendly Opt In Page" and test it out! When someone fills out the opt in form on the page you just created in step 12 they are taken to the Calendly appointment page. ONTRAPORT has their contact information and does not need to have them enter it again. The Calendly sign up process can allow them to select the type of appointment, select a day, then a time, and finally confirm the appointment. All of this happens within the Custom HTML Block you added without refreshing the page.

      calendar displayed on thank you page

      The last step is for the contact to schedule the event. Because of the modification to the Calendly code done in step 10 the Contact's first name, last name and email address are pre-filled from the ONTRAPORT Contact Record (hover over the image to enlarge).

      Calendly fields prefilled

    Creating the Appointment Zap

    We have both the ONTRAPORT and Calendly opt in process completed, but the date and time of the appointment is in Calendly only. This portion of the integration uses Zapier to grab that information from Calendly and push it back into the Contact Record in ONTRAPORT.

    In this example, we show the minimum required for a solo entrepreneur with one calendar attached to Calendly to finish the process. See the Other Use Cases section for possible variations on this basic process, including tagging the contact for the right team member when multiple calendars are involved.

    1. In Zapier, create the Zap using Calendly as Trigger app. Select Invitee Created as the Calendly Trigger.

      invitee created trigger

    2. On the next screen select your Calendly account and test the connection.

    3. In the Action step, Step 2, choose Zapier and Formatter by Zapier as the Action app. In the Choose Action dialog select Date / Time.

      zapier formatter for date and time


    4. In the Set Up Template step select Format for the Transform value at the top. Fill in the rest of the fields. 

      1. Set Input (required) to Event Start Time.
      2. Select Use a Custom Value in the To Format (required) drop down.
      3. Type in the Custom Value for To Format (required) field.
      4. Select your time zone from the drop down in the To Timezone (optional) field.
      5. Select YYYY-MM-DDTHH:mm:ssZ (2006-01-22T23:04:05-0000) in the From Format (optional) drop down.
      6. Choose UTC as the From Timezone (optional) in the last drop down.

      The screen should look like this (hover over the image to enlarge).


      transform date

    5. Click the plus sign in the left column to add another Action. In this Action step, choose Zapier and Formatter by Zapier as the Action app again. In the Choose Action dialog select Date / Time, just as you did in step 3 above.

    6. Select Format for the Transform field. Fill in the rest of the fields. 

      1. Set Input (required) to Event Start Time.
      2. Select Use a Custom Value in the To Format (required) drop down.
      3. Type HH:mm A in the Custom Value for To Format (required) field.
      4. Select your time zone from the drop down in the To Timezone (optional) field.
      5. Select ddd MMM DD HH:mm:ss Z YYYY (Sun Jan 22 23:04:05 -0000 2006) in the From Format (optional) drop down.
      6. Select your time zone again in the last drop down. 

      The screen should look like this.

      format time

    7. Create another step in the left column. Choose ONTRAPORT for the app, select your ONTRAPORT account, and choose Create or Update Contact for the Action.

      add ONTRAPORT

    8. In the Edit Template step, select the drop down next to Email (required), and expand the Step 1 | Invitee Created section. Select the Invitee Email from the drop down selections.

      select the invitee created section

    9. Scroll down to your custom field created in ONTRAPORT named "Calendly Appt Date". Click the plus sign to the right and select a Date / Time field. It will expand to show if it is the date format or the time format. Select the one that is the date format. 

    10. Repeat this process for the field named "Calendly Appt Time", choosing the the Date / Time step that has the time format:

      time reveal

    11. Finish the Zap, and test the integration by creating a Calendly appointment from the opt-in page created in step 13 in Getting Started. Check the Contact Record to verify the Calendly Appt Date and Calendly Appt Time fields are updated. 

     

    Using the Calendly Appt Date Field

    ONTRAPORT can act when the custom Calendly Appt Date field is updated.

    • If you want to alert a team member or yourself when the field is updated, create a message using merge fields you would like to see. In this example, we have used the HTML Editor to create a short message with merge fields for the contact's first name, last name, email address  and the contents of the Calendly Appt Date and Appt Time fields. 

      email contact owner

     

    • You can use a global Rule to send this message to yourself or a team member when a Contact has the Calendly Appt Date field updated. The message will populate with that contact's information:

      rule notification


    • Calendly will send their own notification message to the Contact. You can also add the Contact to a Step Sequence using the opt-in form, and send them a more detailed confirmation email, use a Rule Step to send the notification email to yourself or a team member, create a Task for follow up etc.

      notification sequence

    • Consider using a Date Sequence with the Calendly Appt Date field as the trigger. Date Sequences allow you to schedule actions before, on or after a date in the Contact Record. Any of the Steps, Email, SMS, Tasks, Postcards, Rules and Fulfillment Lists can be triggered this way.

      create a date sequence

    Other Use Cases

    • Calendly seamlessly aggregates your entire team's individual calendars into a single appointment calendar for your new customer to use, selecting the available representative in the background. How can you automate creating a Task for team member Bob Smith instead of Bill Smiley? 

      1. In ONTRAPORT, create a Tag for each of your team members using their name.
      2. Add a step right after the first step of the Zap. Choose Filter by Zapier as the application.
      3. The action is Only continue if ....
      4. Use the drop down field in the first box to select Event Assigned To.
      5. For the second drop down box, choose (Text) Exactly Matches.
      6. Type in the team member's name exactly as it appears in Calendly.

        filter by team member name

      7. Go to the last step, Create or Update a Contact in ONTRAPORT and set the Tag field to the team member's name.

        add tag for team member

      8. Use a global Rule triggering on that tag being added to notify the team member they have an appointment using an Email or Task. 

      9. Create a separate Zap for each team member. The filter in the second step will ensure that only the Zap for the correct team member will update the Contact Record. 


    FAQs

    Q. Can I trigger an SMS 30 minutes before the "Calendly Appt Time" field?

    A. No, the Calendly Appt Time field in ONTRAPORT is a text field. You could trigger an SMS to go out in a Date Sequence using the date field, Calendly Appt Date, and time it for the AM before any of your appointments. Use the merge field for the time field, e.g. - [Calendly Appt Time], to put the time in the SMS message as text. 

    Q. Does ONTRAPORT really use ONTRAPORT to run its business and Calendly to schedule appointments?

    A. Yes, ONTRAPORT is the software we use to run our business, and we use a slightly more complex version of this integration to schedule appointments with our clients. 

    Have more questions? Submit a request

    Comments

    • Avatar
      Brad Dobson

      Just wanted to say thanks for this. I've added a setup to have it also schedule a Zoom meeting, get the Zoom meeting link back into Ontraport, and embed that in the followup messages to the Contact. We're using this for podcast interview schedules, next up will be for client coaching sessions.

    • Avatar
      Frank Hagan

      Thanks Brad! You've shown that It is a technique that can be used to integrate virtually any calendaring application that is supported by Zapier, but it does take some work.

    Powered by Zendesk