How To Integrate Calendly (ReactJs — Frontend Edition)

At work, I had been tasked to integrate a calendar system that allows user to book onboarding meeting and was looking into a solution beside creating a GCP (Google Cloud Platform) project like I did in the previous blog that can be read here “How to use Directory from Google API using Node.js & JWT”.

Looking at alternative was Calendly, which was an online calendar application that does the booking, scheduling, and events. One good part of this was free to use, however, the user has two options to use this product: (i) used their embedded code onto their website or (ii) use their npm package with Node.

So this is where the coding begins….

Part I: Embedded Coding Solution

After registering with Calendly…you would get these “Event Types” and there would be 3 in default:

If you click on the cog, you get the option of using the embedded code as shown below:

You get to choose “Inline Embed”, “Popup Widget” & “Popup Text”:

And I choose “Inline Embed” for the sake of what I need to accomplished at work, also you do some customisation to your liking for links, text and etc..:

Now, look at the code given to you and we need to translate this:

<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/username/15min" style="min-width:320px;height:630px;"></div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>
<!-- Calendly inline widget end -->

Into this solution, which I credit and found from Stack Overflow:

class Calendly extends Component {
  componentDidMount() {
    const head = document.querySelector('head');
    const script = document.createElement('script');
    script.setAttribute('src',  'https://assets.calendly.com/assets      
                        /external/widget.js');
    head.appendChild(script);
  }
  componentWillUnmount() {
    // whatever you need to cleanup the widgets code
  }
  render(){
    return (
      <div>
        <div id="schedule_form">
          <div 
            className="calendly-inline-widget"
            data-url="https://calendly.com/username/15min"
            style={{ minWidth: '320px', height: '580px' }} />
        </div>
      </div>
    );
  }
}

You get something like this in your web application:

So … mission complete? NOPE, the problem with this is that it would hard to maintain and would be better if it was written in separate components for re-usability. And if you look at Calendly API, there are a lot more customisation and you could set more parameters as an example below:

Part II: ReactJs NPM Package Solution

So hitting up google, I’d searched for a ReactJs solution and came into a package that was written from one of their developers. Here is a challenge I came upon when reading their documentation, it showed how to install and has good visual documentation using Storybook but does not show a simple tutorial on how to use it.

I went to their support and got in touch with the Senior Product Specialist, who was kind enough of him to go through the issue of me not understanding the documentation. He gave me a detailed rundown of which component to use and how to integrate it into my application.

Installation:

npm install react-calendly --save

or

yarn add react-calendly

Code:

import React from 'react'
import {InlineWidget} from 'react-calendly'
class Calendly extends Component {
  componentDidMount() {
    // whatever stuff you need here
  }
  componentWillUnmount() {
    // whatever cleanup stuff you need here
  }
  render(){
    return (
      <div>
        <InlineWidget url="https://calendly.com/username/15min" />
      </div>
    );
  }
}

So this allows more customisation with component and I could add more proprieties within such as:

Embed Height

styles={{
  height: '1000px'
}}

Page Settings

pageSettings={{
  backgroundColor: 'ffffff',
  hideEventTypeDetails: false,
  hideLandingPageDetails: false,
  primaryColor: '00a2ff',
  textColor: '4d5055'
}}

Prefill Values

prefill={{
  email: 'test@test.com',
  firstName: 'Jon',
  lastName: 'Snow',
  name: 'Jon Snow',
  customAnswers: {
    a1: 'a1',
    a2: 'a2',
    a3: 'a3',
    a4: 'a4',
    a5: 'a5',
    a6: 'a6',
    a7: 'a7',
    a8: 'a8',
    a9: 'a9',
    a10: 'a10'   
  }
}}

UTM Parameters

utm={{
  utmCampaign: 'Spring Sale 2019',
  utmContent: 'Shoe and Shirts',
  utmMedium: 'Ad',
  utmSource: 'Facebook',
  utmTerm: 'Spring'
}}

So roughly the component could have:

<InlineWidget 
  url="https://calendly.com/username/15min"   
  styles={ ... some code }
  pageSettings= { ...some code }
  prefill = { ... some code }
  utm = { ... some code }
/>

And finally, you get roughly the same results as the embedded code but I prefer this route because it much simpler also this package is supported by the company. I hope you found this reading was enjoyable and hopefully for useful.