javascript - How to embed Calendly with Angular 12 - Stack Overflow

admin管理员组

文章数量:1417684

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 ponent's HTML:

<div class="calendly-inline-widget" data-url="; style="min-width:320px;height:630px;"></div>

and this line to the index.html:

<script src=".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: '',
    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?

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 ponent's HTML:

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

and this line to the index.html:

<script src="https://assets.calendly./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./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?

• javascript
• html
• angular
• calendly

Share Improve this question Follow asked Jul 28, 2021 at 12:13 Scotland141Scotland141 34533 silver badges1414 bronze badges 2

• blog.knoldus./… Does this help? – Anglesvar Commented Jul 28, 2021 at 12:53
• That's the article I used initially but it doesn't fix it for me unfortunately. The article describes 2 methods - the first one I describe copying exactly above (that's the one with the div in the HTML and the script in the index.html). The second one requires downloading the Calendly script file, but this contains a Calendly variable, and then I run into the other problem I mention in the question where I get "Cannot find name Calendly" again. – Scotland141 Commented Jul 28, 2021 at 12:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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./my-calendar-link',
    parentElement: document.querySelector('.calendly-inline-widget'),
  });
}

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

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.

1. Copied the external javascript file https://assets.calendly./assets/external/widget.js to src/assets/js/calendly.js

2. Removed 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 ...
   
    }
   

3. Removed the final Calendly._autoLoadInlineWidgets()

4. Added src/assets/js/calendly.js to the "scripts" in angular.json

5. Added the script to index.html

6. Call the shite in the onInit part of the ponent

index.html

...
<head>
   ...
   <script async src="assets/js/calendly.js"></script>
</head>
...

calendly.ponent.html

<div class="calendly-inline-widget" data-auto-load="false"></div>

calendly.ponent.ts

export {};
declare global {
   interface Window {
      Calendly: any;
   }
}
declare var preInitCalendly: Function;

@Component({
   selector: 'app-calendly',
   templateUrl: './calendly.ponent.html',
   styleUrls: ['./calendly.ponent.css']
})
export class CalendlyComponent implements OnInit {
   url = 'https://calendly./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.

本文标签： javascriptHow to embed Calendly with Angular 12Stack Overflow