Comment intégrer le widget Calandly dans une application Angular?

Question

J'essaie d'intégrer le widget Calendly dans une application Angular et je ne sais pas trop comment y parvenir. Puisque j'appellerai ce widget avec des données variables, j'aimerais appeler le widget avec une fonction activée par l'utilisateur. Sur la base de la documentation et de ce StackOverflow, j'ai ajouté la méthode suivante dans mon composant:

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

et appelez-le avec ce qui suit (dans mon .html)

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

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

Je peux voir que j'ai besoin de la Calendly.initInlineWidgetméthode fournie par l'API .js, mais je ne sais pas trop comment y accéder. J'ai essayé de télécharger le fichier et de l'importer dans mon composant, mais cela n'a pas fonctionné (peut-être que je l'ai fait de manière incorrecte). Je soupçonne que cela a quelque chose à voir avec le fichier .js qui n'exporte pas la méthode, mais je ne sais pas où aller à partir d'ici.

Quelqu'un peut-il donner une direction?

Answer 1

Nous avons eu un problème similaire dans notre application JS vanilla et avons trouvé la solution décrite dans leur documentation sur les options d'intégration avancées . Nous l'avons fait en:

1. Ajouter data-auto-load="false"au calendly-inline-widget div.
2. Ajouter parentElementaux initInlineWidgetparamètres de fonction.

---

Informations supplémentaires: @ remy-bartolotta nous avons eu l' spliterreur exacte que vous avez décrite et les informations ci-dessus l'ont corrigée.