如何将 Calandly 小部件嵌入到 Angular 应用程序中？

Question

我正在尝试嵌入 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 我在我的组件中添加了以下方法：

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>

我知道我需要 .js api 提供的 Calendly.initInlineWidget 方法，但我不太确定如何访问它。我已经尝试下载文件并将其导入到我的组件中，但是它不起作用（也许我做错了）。我怀疑这与未导出方法的 .js 文件有关，但不确定从这里去哪里。

任何人都可以提供一些方向吗？

Answer 1

我们在我们的 vanilla JS 应用程序中遇到了类似的问题，并找到了他们 Advanced embed options 文档中描述的解决方案。我们通过以下方式做到了这一点：

将 data-auto-load="false" 添加到 calendly-inline-widget div。
将 parentElement 添加到 initInlineWidget 函数参数。

额外信息：@remy-bartolotta 我们确实遇到了您描述的 split 错误，并且上述信息修复了它。

如何将 Calandly 小部件嵌入到 Angular 应用程序中？

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

javascript

widget

angular