Calendly

How to set up a Calendly integration

Calendly is a popular tool for scheduling meetings. You can integrate it with your Meya app to automate the booking process and to update existing bookings.

Before you start

To integrate Calendly with your Meya app, you’ll need to have a paid Premium or Pro Calendly account so you can access the Calendly API and webhooks.

Find your Calendly API key

Sign in to your Calendly account. Click the Integrations tab. Click the Copy Key button.

Find the event link

Navigate to the Home tab of your Calendly account. Click Copy Link on the event you want to add to your Meya app.

Update the vault

The vault is where secret information, like an API key, is stored. You can read more about the vault here.

Let’s add your Calendly API key and event link to the vault. In your flow code, you’ll reference the vault key, instead of the actual values. In addition to being more secure, this makes it easy to update the values from a single location, such as when you have to reset your API key.

  1. In your app’s root folder, open vault.yaml. Add this code to it on a new line:
calendly.api_key: xxx
calendly.event_link: xxx

🚧

Recall that vault.yaml should not contain any secret data like API keys. This file informs developers what secrets are stored in the actual vault.

  1. Open vault.secret.yaml and add this code to it on a new line:
calendly.api_key: API_KEY
calendly.event_link: EVENT_LINK

Replace API_KEY with your actual Calendly API key.

Replace EVENT_LINK with the Calendly event link.

📘

You can add more event links. Just make sure each one has a unique name in the vault (e.g. calendly.15_min, calendly.30_min, etc).

  1. Save the files and upload the changes to your vault using these commands in your terminal:
meya format
meya vault upload --file vault.secret.yaml

Create the integration

In your app’s root folder, create a folder called integration. Inside the integration folder, create a file called calendly.yaml. Copy this code into the file:

type: meya.calendly.integration
api_key: (@ vault.calendly.api_key )

Save the file and upload it to the Grid using these commands in your terminal:

meya format
meya push

Add flows

  1. First we’ll add a flow that lets the user book a meeting using the event link you copied earlier.

In your app’s flow folder, create a folder called calendly. Inside the new folder, create a file called calendly.yaml. Copy this code into it:

triggers:
  - regex: ^calend.*

steps:
  - (book)
  - calendly: (@ vault.calendly.event_link )
    title: Book a demo date
    description: Click "Schedule time" below to setup a face-to-face meeting.
    button_style: text
    prefill:
      name: (@ user.name )
      email: (@ user.email )
    rows:
      -   - cell: Customer specialist
            value: Victor
      -   - cell: Email
            value: [email protected]
  - if: (@ flow.result )
    then: next
    else:
      jump: fail

  - (success)
  - say: >
      Meeting booked with (@ flow.result.payload.event.assigned_to[0] )
      @ (@ flow.result.payload.event.start_time_pretty )
  - end

  - (fail)
  - say: Nothing booked. Try again?
    quick_replies:
      - text: Try again
        action:
          jump: book
  1. In order to get updates from Calendly (e.g. event cancellation), we’ll need to configure a webhook in Calendly. Meya provides a component that does this for you. Let’s use it in a new flow.

In the integration/calendly folder, create a new file called webhook.yaml. Copy this code into the file:

triggers:
  - keyword: calendly_webhook

steps:
  - (set webhook)
  - say: Setting Calendly webhook ...
  - type: meya.calendly.component.webhook.create
    integration: integration.calendly
    wait_for_response: true
  - if: (@ flow.ok )
    then: next
    else:
      jump: webhook fail
  - (done)
  - say: Done. hook_id = (@ flow.result.id )
  - end
  - (webhook fail)
  - say: Something went wrong. (@ flow.result )

Save the files and push them to the Grid:

meya format
meya push

Add Calendly HTML snippets

To render the Calendly interface, you’ll need to import some CSS and Javascript from Calendly. To do this, add the following to your website’s HTML:

<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet" media="print"/>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async=""></script>

Set up the webhook

In your browser, navigate to your app’s simulator and type calendly_webhook. The flow will set your Calendly webhook for you. You only need to do this once.

Test it out

In the simulator, type calendly. You should see a card inviting you to book a meeting. Click Book a meeting to schedule the meeting. Check your calendar to confirm the meeting was booked.

👍

You have successfully added the Calendly integration to your app.

Customization

While the Calendly component has sensible default values for the card’s appearance, these values can be customized using the component’s many optional properties. Check out the full list here.