Wie binde ich das Calandly-Widget in eine Angular-App ein?

Question

Ich versuche, das Calendly- Widget in eine Angular-App einzubetten, und bin mir nicht ganz sicher, wie ich das erreichen soll. Da ich dieses Widget mit variablen Daten aufrufen werde, möchte ich das Widget mit einer vom Benutzer aktivierten Funktion aufrufen. Basierend auf der Dokumentation und diesem StackOverflow habe ich meiner Komponente die folgende Methode hinzugefügt:

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

und nenne es wie folgt (in meiner .html)

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

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

Ich kann sehen, dass ich die Calendly.initInlineWidgetvon der .js-API bereitgestellte Methode benötige, bin mir jedoch nicht ganz sicher, wie ich darauf zugreifen soll. Ich habe versucht, die Datei herunterzuladen und in meine Komponente zu importieren, aber es hat nicht funktioniert (möglicherweise habe ich dies falsch gemacht). Ich vermute, dass dies etwas damit zu tun hat, dass die .js-Datei die Methode nicht exportiert, aber nicht sicher ist, wohin sie von hier aus gehen soll.

Kann jemand eine Richtung vorgeben?

Answer 1

Wir hatten ein ähnliches Problem in unserer Vanilla JS-App und fanden die Lösung, die in der Dokumentation zu den erweiterten Einbettungsoptionen beschrieben ist . Wir haben dies getan durch:

1. data-auto-load="false"Zum hinzufügen calendly-inline-widget div.
2. In parentElementder initInlineWidgetFunktion params.

---

Zusätzliche Informationen: @ remy-bartolotta Wir hatten genau den splitFehler, den Sie beschrieben haben, und die obigen Informationen haben ihn behoben.