How to embed Calendly with Angular 12
Question
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?
2 answers
solution1
0 ACCPTED 2021-07-28 13:06:47
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)
solution2
0 2021-11-04 10:58:06
This still gave me errors when reloading the page, so I, not being either an expert Angular nor Javascript developer, did an ugly workaround based on the helpful answer already given in order to force the Calendly object to always be there when I need it. I'll leave it here for whom it might be useful for.
Copied the external javascript file https://assets.calendly.com/assets/external/widget.js to
src/assets/js/calendly.jsRemoved the implicit anonymous function call and wrapped the whole damned thing in a named function - not called immediately, like so:
function preInitCalendly() { console.debug('Calendly pre-initialization for ' + this); this.Calendly = {}; this.Calendly._util = {}; Calendly._util.domReady = function(callback) { ... }; ... and the rest, all the way to the end of the file ... }Removed the final
Calendly._autoLoadInlineWidgets()Added src/assets/js/calendly.js to the
"scripts"in angular.jsonAdded the script to index.html
Call the shite in the onInit part of the component
index.html
...
<head>
...
<script async src="assets/js/calendly.js"></script>
</head>
...
calendly.component.html
<div class="calendly-inline-widget" data-auto-load="false"></div>
calendly.component.ts
export {};
declare global {
interface Window {
Calendly: any;
}
}
declare var preInitCalendly: Function;
@Component({
selector: 'app-calendly',
templateUrl: './calendly.component.html',
styleUrls: ['./calendly.component.css']
})
export class CalendlyComponent implements OnInit {
url = 'https://calendly.com/my_calendly_location';
constructor() {
}
ngOnInit(): void {
preInitCalendly();
window.Calendly.initInlineWidget({
url: this.url,
parentElement: document.querySelector('.calendly-inline-widget'),
prefill: {}
});
}
It's not pretty, but it seems to be working reliably.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.