How to embed Calendly with Angular 12

I'm trying to embed a calendly widget into my angular app, but I find that it doesn't work consistently.

Firstly I add this line to my component's HTML:

<div class="calendly-inline-widget" data-url="https://calendly.com/my-calendar-link" style="min-width:320px;height:630px;"></div>

and this line to the index.html:

<script src="https://assets.calendly.com/assets/external/widget.js" async></script>

This works initially but then the embedded calendar vanishes whenever the page reloads.

By reading the Advanced Embed Options in Calendly's documentation, I attempted a slightly different approach, where my ngOnInit() function looks like this:

ngOnInit(): void {
  Calendly.initInlineWidget({
    url: 'https://calendly.com/my-calendar-link',
    parentElement: document.querySelector('.calendly-inline-widget'),
  });
}

and I've also added data-auto-load="false" to the div in the HTML, but I get the error message "Cannot find name 'Calendly'" and I'm unsure where Calendly should be declared or imported from.

Any suggestions on how I can get the calendar working?

Solution

I've managed to get this working by adding the following:

export {}; declare global { interface Window { Calendly: any; } }

and then changing ngOnInit() to :

ngOnInit(): void {
  window.Calendly.initInlineWidget({
    url: 'https://calendly.com/my-calendar-link',
    parentElement: document.querySelector('.calendly-inline-widget'),
  });
}

Credit to comment here Calendly Widget not working in IE (Angular App)