Calandly 위젯을 Angular 앱에 어떻게 삽입하나요?

Question

Calendly 위젯을 Angular 앱 에 삽입하려고하는데 어떻게해야할지 모르겠습니다. 변수 데이터로이 위젯을 호출 할 것이므로 사용자가 활성화 한 기능으로 위젯을 호출하고 싶습니다. 설명서 와이 StackOverflow를 기반으로 구성 요소에 다음 메서드를 추가했습니다.

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

다음으로 호출하십시오 (내 .html)

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

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

Calendly.initInlineWidget.js api에서 제공 하는 메소드 가 필요하다는 것을 알 수 있지만 액세스 방법을 잘 모르겠습니다. 파일을 다운로드하고 내 구성 요소로 가져 오려고했지만 작동하지 않았습니다 (잘못했을 수도 있습니다). 나는 이것이 메소드를 내 보내지 않는 .js 파일과 관련이 있다고 생각하지만 여기서 어디로 가야할지 모르겠습니다.

누구든지 방향을 제시 할 수 있습니까?

Answer 1

vanilla JS 앱에서 비슷한 문제가 발생했으며 Advanced embed options 문서에 설명 된 솔루션을 찾았습니다 . 우리는 다음과 같이했습니다.

1. 추가 data-auto-load="false"받는 사람 calendly-inline-widget div.
2. 추가 parentElement받는 initInlineWidget기능 PARAMS.

---

추가 정보 : @ remy-bartolotta 우리는 split당신이 설명한 정확한 오류를 가지고 있었고 위의 정보는 그것을 수정했습니다.