DEV Community

Cover image for Add Calendly to your React website, quickly and easily.
Kayla Gordon
Kayla Gordon

Posted on • Updated on • Originally published at kayla-gordon.com

Add Calendly to your React website, quickly and easily.

In this blog post I'll show you how to add your Calendly scheduler to your react website. For this situation we will imagine that we are a company and want to allow others to "Book a demo" for your product. We've all seen this "book a demo" button, some time or another. Now you'll learn how to do it the best way. Quick and easy.

Visit my personal blog for more content like this: Kayla's Coding Blog

What is Calendly?

Alright, first things first. In short, Calendly is a tool that helps you schedule meetings or events. Basically it helps you keep track of who you have to meet with or where you need to be. Still need more details? Have a look at their website.

Give me the code already!

Alright, alright. Here is the package that you'll need.

react-calendly

You can find more information about it here.

If you don’t already have an account with Calendly, you'll need to do that. Once you have your account, make a note of your user name. It will be found at the end of the Calendly url. For example: www.calendly.com/your-username

Next you need to decide on how you want your Calendly widget to look. For this, go here:

https://tcampb.github.io/react-calendly

Have a look at their components and decide which is best for you. The available components for this package are:

  1. InlineWidget
  2. PopupText
  3. PopupWidget
  4. CalendlyEventListener

For this example we will go with the "PopupWidget".

Click the PopupWidget and you'll see a section below appear with some inputs. That is the data for the widget. In those inputs you can change the text on the widget, the color, prefilled data, and utm info. Do your remember the Calendly username that I mentioned earlier? Make sure to add that to the url line. Add it to the end of the Calendly url. It should look something like this: url="https://calendly.com/your-username"

Note If, for whatever reason, you don't see the section below, click ths "Show Info" button at the top right hand side.

Moving on. Now that you've customized the widget, you'll see a "Show Info" button at the top right hand side. Click that. What you see is the code you'll use in your app. Copy that.

Back to your app. In your terminal:

npm install --save react-calendly

After it’s installed, create a new page (or go to the page where you want the Calendly widget to appear) and add this:

import { PopupWidget } from "react-calendly"

Remember the code you copied? Now is the time to paste it.

<PopupWidget
     color="#00a2ff"
     text="Request a Demo"
     textColor="#ffffff"
     url="https://calendly.com/your-username"
   />
Enter fullscreen mode Exit fullscreen mode

It’s that easy. Now save and run your code. You now have a quick and easy Calendly widget.

Personally, I had no need for the prefilled data or the utm. The above code works just fine.

Conclusion

This post demonstrated a quick and easy way to use your Calendly account with your React web app. For this situation, we allowed users to book a product demo, but you can do anything you like with it, even to simply arrange business meetings.

Top comments (3)

Collapse
 
alsmith808 profile image
Alan Smith

Hi Turq84,

Thanks for your post.  Scheduling is something I need to implement in my react app.  Everything I found until now was VERY expensive!  Do you think Calendy would suffice for my use case below..

Landlords can create calendars to create viewing times for users trying to find accommodation
Both landlord and tenant can interact with the calendar to agree times

Thanks for your time and post!

Alan

Collapse
 
turq84 profile image
Kayla Gordon

Hi Alan,

I'm sorry for my delayed response. I should log in more often.

Calendly is there to show when someone has free time to meet, or in this case, provide available viewing times to potential tenants. For your situation, the landlord would make his schedule available through Calendly and potential tenants could see when he/she has free time to have a viewing. I don't think through Calendly you can interact to agree on a time. That would be more for email or chat widget, etc. Calendly is just there to book the appointment.

If you want to know what all Calendly can do, I recommend having a look at their docs. I'll fetch their website for you: calendly.com/

I hope I helped answer your question. Once again, I'm sorry for my late reply. Take care!

Collapse
 
alsmith808 profile image
Alan Smith

No problem, thanks for your reply!