CODEWITHSUNDEEP
javascriptangularwidget
Remy Bartolotta
Remy Bartolotta

Reputation: 147

How do I embed the Calandly widget into an Angular app?

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?

Upvotes: 1

Views: 1630

Answers (1)

Jacob Orellana
Jacob Orellana

Reputation: 38

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.

Upvotes: 1

Related Questions