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

编程问答 2022-08-13

问题描述

我正在尝试将Calendly小部件嵌入到Angular应用中，并且不确定如何实现。由于我将使用可变数据来调用此窗口小部件，因此我想使用用户激活的函数来调用该窗口小部件。根据文档和this 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>

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

有人可以提供指导吗？

解决方法

我们的原始JS应用程序中存在类似的问题，并在其Advanced embed options文档中找到了解决方案。我们这样做的方式是：

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

其他信息：@ remy-bartolotta我们有您描述的确切split错误，以上信息已解决。

angularangularjavascriptwidget