How to Add Calendly to Your ReactJS Project
Tags: react, javascript, tutorial, webdev
Published: 2022-12-30 07:05:51

## What is calendly 🤔

[Calendly](https://calendly.com/) is a scheduling and appointment scheduling software that helps individuals and organizations schedule and manages appointments and meetings with clients and colleagues.

It allows users to create customizable scheduling links that can be shared with others, allowing them to easily schedule appointments or meetings with the user at a time that works for both parties.

Calendly integrates with various calendar and email platforms, including Google Calendar, Outlook, and Office 365, and offers features such as automated email and calendar event notifications, as well as the ability to set up recurring appointments and meetings.

Calendly is useful for a wide range of professionals, including consultants, salespeople, coaches, and therapists, as it helps to streamline the scheduling process and reduce the time spent coordinating appointments.

## How to integrate calendly with ReactJs 👨🏻‍💻

If you are working on a ReactJS project and want to incorporate Calendly into your project, you can use the `react-calendly` library.

Here are the steps you can follow to add Calendly to your ReactJS project:

* Install `react-calendly` using npm or yarn:
    

```bash
npm install react-calendly
# OR
yarn add react-calendly
```

* Add a calendly widget to your ReactJs application.
    

Calendly provides 2 widget options to choose from, you can choose which Calendly widget you want to use in your project.

Let's see all of them one by one.

### InlineWidget

This widget displays the Calendly scheduling form directly on the page.

```javascript
import React from 'react';
import { InlineWidget } from 'react-calendly';

const InlineComponent = () => {
  return (
    <div className="inline-widget">
      <InlineWidget url="https://calendly.com/your-calendly-url" />
    </div>
  );
};

export default InlineComponent;
```

> Make sure to replace [`https://calendly.com/your-calendly-url`](https://calendly.com/your-calendly-url) with the actual URL of your Calendly schedule.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671953487804/5d3f4d93-6ed4-48a1-b73d-58255370462b.png align="center")

(Optional) You can also customize the appearance of the Calendly widget by passing a styles object to the InlineWidget component. The styles object should contain CSS properties and values in camelCase, such as width and height.

### PopupWidget

This widget displays the Calendly scheduling form in a popup window.

```javascript
import React from 'react';
import { PopupWidget } from 'react-calendly';

const PopupComponent = () => {
  return (
    <div className="popup-widget">
      <PopupWidget
        url="https://calendly.com/your-calendly-url" 
        rootElement={document.getElementById('root')}
        text="Schedule Time with me"
        textColor="#ffffff"
        color="#319795"
      />
    </div>
  );
};

export default PopupComponent;
```

`PopupWidget` accepts the rootElement prop to specify the root element where you want to render the popup. it also accepts styling props like `textColor`, `color`, and `text`.

Once you add this component to your app it will render the popup button with the text `Schedule Time with me`

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671953942135/ab3db125-38dc-4379-a150-a78b3dee4f5f.png align="center")

Click on the button and it will open the popup modal with your calendly page like below.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671953960808/df1ea584-ab11-4f1f-bef6-a63ceee2ed6a.png align="center")

## Listen for events in the widget 👂

You can also use the `useCalendlyEventListener` hook to listen for events in the Calendly widget, such as when a user schedules an appointment or cancels an appointment.

To use the hook, import it from `react-calendly` and add it to your component like this:

```javascript
import React from 'react';
import { InlineWidget, useCalendlyEventListener } from 'react-calendly';

const InlineComponent = () => {

useCalendlyEventListener({
    onEventScheduled: (e) => console.log(e.data.payload)
  });

  return (
    <div className="inline-widget">
      <InlineWidget url="https://calendly.com/your-calendly-url" />
    </div>
  );
};

export default InlineComponent;
```

In the above component, we are listening to `schedule` events. so, when the user schedule an event you can listen to that and do something.

## Conclusion 📝

That's all you need to do to add Calendly to your ReactJS project using `react-calendly`! Whether you want to display the Calendly form directly on the page, in a popup window, or with a customizable button, the `react-calendly` library has you covered. You can also use the useCalendlyEventListener hook to listen to events and take actions based on them.

And that’s it for this topic. Thank you for reading.

If you found this article useful, please consider liking and sharing it with others. If you have any questions, feel free to comment, and I will do my best to respond.

## Resources ✨

* [React Calendly](https://www.npmjs.com/package/react-calendly)
    
* [Code Sandbox Example](https://codesandbox.io/s/reactjs-calendly-p22qts?file=/src/Widgets/InlineComponent.jsx:182-272)
    

## Connect with me 👋

* [LinkedIn](https://www.linkedin.com/in/sachin-chaurasiya)
    
* [Twitter](https://twitter.com/sachindotcom)