How to Integrate Calendly with Angular Application

Staying busy is good for business, but it is difficult to schedule your meetings and appointments with clients, partners, or even employees. All the meetings were planned manually before tools like Calendly came into the market. Calendly aims to fix the problem of scheduling your day with ease. It helps you spend less time fixing the meeting and locking down dates and gives you more time preparing for them. 

So what is Calendly? In this blog, I’ll walk you through the basics of Calendly and how to integrate Calendly with an Angular Application.

What is Calendly ?

Calendly is an application for scheduling appointments, meetings, and events. Everyone is on different schedules and in different time zones. So you have to send four different emails, just to set something up. Calendly eliminates the back and forth. When you want to schedule a meeting, just share your link. Invitees can only pick from time slots that follow the rules you have created. So you are always in control of who you meet and when. The meeting is added to all of your calendars once your invitee picks a time.

Calendly works with your most common business applications, securely integrating with your calendar, so it always knows your availability. You can embed your Calendly link on your website. Next, we will learn how to integrate it with angular.

Calendly Integration

Calendly provides three ways to embed it in your application:

• Inline Embed:- Loads your Calendly scheduling page directly on your website.
• Popup Widget:- Adds a floating button to your site that launches Calendly as a popup.
• Popup Text:- Add a text link to your site that launches Calendly as a popup.

To add Calendly using either of the above ways, click on the Settings button on any of the meeting cards and select the “Add to Website” button to add that particular meeting on the website. Alternatively, you can also click on the settings button of the Home page itself to display all the types of events and let the invitee select which one to choose. Refer to the images below for better understanding.

As clearly visible, the first image is to be considered while displaying a single event on the website and the second image is to be considered while displaying all the available events on the website. After clicking on either of the two, a modal will open offering you the earlier mentioned three ways of integration. The modal will look like this:

Select any one method of your choice and click on continue. You will see a pre-generated code on your screen that can be directly used inside the code to display your Calendly link on the Application. For reference, I am using the Inline Embed method. The code will something like this:

<!-- Calendly inline widget begin -->
<div class="calendly-inline-widget" data-url="https://calendly.com/kartik-tiwari/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 -->

Integration with Angular

If we try to directly insert this code into the template of our component, it will simply not work. The reason is that the script tag will not work during the rendering of the component in which we are trying to embed Calendly. So to overcome this problem, we have two ways:

• Insert the script tag of the above-mentioned code inside the index.html file and then use the rest of the code containing the URL of your Calendly in the template of any component of your choice.
• Download the calendly script file and place it inside the project. Its path must be provided inside the angular.json file to let Angular know that a script file must be rendered at the initial stage of loading the application. The path must be provided inside the build object under which the “styles” array is also present. Remember to use your path inside the double quotes otherwise, the application will break. The code will look like this:

"scripts": [
              "../assets/js/calendly.js"
            ]

Both the methods give the exact same output but the first method is preferred as downloading a javascript file and including it in the building process increases the load on the application. It also disables the application to fetch the latest features as we are using a static javascript file placed inside our project directory.

Conclusion

In this blog, we learned how to integrate Calendly with Angular. As you have seen that it is a very easy task. The only catch is that the script tag does not load the script when placed inside the Angular component template and hence we have to load the script either inside the index.html file or by manually downloading the script file and providing its path inside the angular.json file.

If you have any queries, ask them in the comment section down below. I will answer them as soon as possible. For more information on Calendly, visit: Calendly