1

I am trying to embed the Calendly widget into an Angular app and am not quite sure how to accomplish this. Since I will be calling this widget with variable data, I would like to invoke the widget with a user activated function. Based on the documentation and this StackOverflow I have added the following method in my component:

getEventCalender() {
    Calendly.initInlineWidget({
      url: myVariable.url,
      parentElement: document.querySelector('.calendly-inline-widget'),
     });
  }

and call it with the following (in my .html)

<div>
  <button (click)='getEventCalender()'>view cal</button>
</div>

<div class="calendly-inline-widget"></div>

I can see that I need the Calendly.initInlineWidget method supplied by the .js api, however I'm not quite sure how to access it. I have tried downloading the file and importing it into my component, however it didn't work (maybe I did this incorrectly). I suspect this has something to do with the .js file not exporting the method, but not sure where to go from here.

Can anyone provide some direction?

Remy Bartolotta
  • 147
  • 13
  • Did you check the demo code : https://plnkr.co/edit/mpl6l8ifxc1amS611DMD?p=preview&preview What are the errors in the console ? The best way to help you would be to provide a quick example. Try to build something here: https://stackblitz.com/ you can create an Angular App, import whatever you need and share it. – gabrielstuff Sep 01 '20 at 20:27
  • Thanks @gabrielstuff. Yes, I tried simply copying the Plunker code and the widget seems to function intermittently. I get the below error: – Remy Bartolotta Sep 01 '20 at 20:39
  • 1
    Uncaught TypeError: Cannot read property 'split' of null at Iframe.Calendly.Iframe.Iframe.parseOptions (widget.js:550) at new Iframe (widget.js:530) at createInlineWidgets (widget.js:483) at widget.js:409 at HTMLDocument.completed (widget.js:24) – Remy Bartolotta Sep 01 '20 at 20:39
  • I will build a plunker example and share...thanks – Remy Bartolotta Sep 01 '20 at 20:39

1 Answers1

1

We had a similar issue in our vanilla JS app and found the solution described in their Advanced embed options documentation. We did this by:

  1. Add data-auto-load="false" to the calendly-inline-widget div.
  2. Add parentElement to the initInlineWidget function params.

Extra info: @remy-bartolotta we had the exact split error you described and the above info fixed it.

Jacob Orellana
  • 28
  • 3
  • 3
    Thank you... this is relevant, however, in order to make this functional I needed to declare Calendly as a variable like so `declare var Calendly: any;`. If this doesnt happen, the `initInlineWidget` method throws an error. Thanks again for the info – Remy Bartolotta Dec 10 '20 at 19:53