如何在Angular 9应用中内联嵌入Calendly？

1. 添加嵌入容器 #

在目标组件的模板文件（如booking.component.html）中添加Calendly的渲染容器，替换你的Calendly链接为实际的预约页面地址：

<div id="calendly-inline-container" style="min-width: 320px; height: 630px;"></div>

2. 动态加载并初始化Calendly脚本 #

Angular的组件封装机制会导致静态脚本无法正确关联组件DOM，因此需要动态加载脚本并在组件渲染完成后初始化。在组件的TS文件（如booking.component.ts）中添加以下逻辑：

import { Component, OnInit, OnDestroy, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-booking',
  templateUrl: './booking.component.html',
  styleUrls: ['./booking.component.css']
})
export class BookingComponent implements OnInit, OnDestroy {
  private calendlyScript: HTMLScriptElement | null = null;
  private readonly calendlyUrl = '你的Calendly链接'; // 和模板对应

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}

  ngOnInit(): void {
    if (isPlatformBrowser(this.platformId)) {
      this.loadCalendlyScript();
    }
  }

  ngOnDestroy(): void {
    // 组件销毁时清理脚本与全局对象，避免路由切换后异常
    if (this.calendlyScript && document.body.contains(this.calendlyScript)) {
      document.body.removeChild(this.calendlyScript);
      (window as any).Calendly = null;
    }
  }

  private loadCalendlyScript(): void {
    // 避免重复加载脚本
    if (document.querySelector('script[src="https://assets.calendly.com/assets/external/widget.js"]')) {
      this.initCalendly();
      return;
    }

    this.calendlyScript = document.createElement('script');
    this.calendlyScript.src = 'https://assets.calendly.com/assets/external/widget.js';
    this.calendlyScript.async = true;
    this.calendlyScript.onload = () => this.initCalendly();
    document.body.appendChild(this.calendlyScript);
  }

  private initCalendly(): void {
    const container = document.getElementById('calendly-inline-container');
    if (!container) return;

    (window as any).Calendly.initInlineWidget({
      url: this.calendlyUrl,
      parentElement: container,
    });
  }
}

3. 样式与适配调整 #

• 调整容器的height、min-width属性适配页面布局，例如设置height: 100vh占满视口高度
• 若出现样式冲突，可通过自定义类结合::ng-deep（或关闭组件样式封装）修改Calendly组件样式：

::ng-deep #calendly-inline-container .calendly-inline-widget {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

4. 常见问题排查 #

• 确认Calendly预约链接为公开可访问状态，无访问权限限制
• 查看浏览器控制台，排查脚本加载失败、CORS等错误
• 若使用Angular SSR，必须通过isPlatformBrowser确保仅在浏览器环境执行DOM操作

内容的提问来源于stack exchange，提问作者Arik Mozharovski