Calendly Api integration

Question

Ihave a custom form on my website that users are supposed to use to schedule an event,

Is there a way I could integrate to Calendly where I send this data as a post request to Calendly and a schedule is created with the data provided from the custom form? I have been doing research from the Calendly API docs but I can't find an endpoint where I can send the data to.

In my case I don't think using Calendly webhooks is a good choice since I need to capture the schedule event details as they are created from the form. Please if anyone could assist me on to figure out a way to handle this?

Answer 1

I just started looking at their API for a project also and I don't see anywhere in the API to create new events. I believe it is only for getting information.

I am guessing that you will need to embed their booking form on your site instead.

https://help.calendly.com/hc/en-us/articles/223147027-Embed-options-overview

Answer 2

I know this is a bit late. But I found your question after searching about Calendly webhooks.

I agree with the answer before me. Here's how I embedded Calendly's booking form on my React-NextJS app. I hope this helps other developers in the future: https://www.npmjs.com/package/react-calendly#usecalendlyeventlistener

1. Run this to terminal: yarn add react-calendly
2. Import calendly to your app: import { PopupButton } from 'react-calendly'
3. Add this inside your code:

     // Add this outside the return function
     const [rootElement, setRootElement] = useState<HTMLElement | null>(null)
    
      useEffect(() => {
        // Created the root element for CalendlyPopup as I was having touble using this code: rootElement={document.getElementById("root")}
        if (!rootElement) {
          const newRootElement = document.createElement('div')
          newRootElement.id = 'root'
          document.body.appendChild(newRootElement)
          setRootElement(newRootElement)
        }
      }, [rootElement])

          // Add the widget inside the return function:
          <PopupButton
            url='your-calendly-link'
            rootElement={rootElement!}
            text='Schedule One on One'
          />

Any suggestions to improve my code is very much welcome!