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 quickly and easily.
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. 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 sign up for one. 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:
- InlineWidget
- PopupText
- PopupWidget
- 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 you 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 the “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.
#tutorial #gatsbyjs #scheduling #reactjs #calendly #react
