Search for a command to run...
A Step-by-Step Guide on how to Integrate Calendly with ReactJS.
Hi, Thanks for this amazing article. I implemented the calendly pop widget on my react project. I have a question though. Is there a way for a button to close the widget? ... Like a way to create a button within my site which when clicked, fires off an event to close the pop up widget and return to the home page.
Thank you so much for reading my article, I am glad that you found it to be informative.
This might be helpful https://www.npmjs.com/package/react-calendly#popupbutton
I was looking for appointments implementation in my upcoming project. You got me covered thanks. Great article.
Thank you so much for reading my article, I am glad that you found it to be informative.
Every October, the developer community buzzes with Hacktoberfest energy. PRs fly, t-shirts are earned, and GitHub turns green. But here's what nobody talks about: what happens in November? For most contributors, the answer is simple: nothing. The rep...
The debate over AI coding agents is missing the most important factor. It’s not about prompt engineering, it’s about understanding the context window. Developers are divided. One side claims coding agents suck. The other insists you’re just using the...
Learnings from a Research Paper
Lately, I have been working on a feature to capture images from media streams and scale them down to reduce their size. This helps save storage and reduce costs before uploading the images to a storage service. For this, I used Canvas to render the i...
AI helps you do more, but only if you know the basics well enough to tell it what you want.
Calendly 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.
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:
react-calendly using npm or yarn:npm install react-calendly
# OR
yarn add react-calendly
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.
This widget displays the Calendly scheduling form directly on the page.
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-urlwith the actual URL of your Calendly schedule.
(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.
This widget displays the Calendly scheduling form in a popup window.
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
Click on the button and it will open the popup modal with your calendly page like below.
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:
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.
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.