javascript - 在 NextJs 中嵌入 Calendly 脚本

我正在尝试在我的 Next.js 项目中嵌入 Calendly。

不过不确定该如何着手。理想情况下，我只是把它嵌入在单个页面上（而不是在 _app 或 _document 中）

到目前为止，我得到的是：

import Script from 'next/script';
import React from 'react';

const Page = () => {
    Calendly.initInlineWidget({
        url: 'https://calendly.com/mycalendlyaccount/30min?month=2022-05'
    });

    return (
        <div>
            <Script src="https://assets.calendly.com/assets/external/widget.js" />

            <div
                className="calendly-inline-widget"
                style="min-width:320px;height:580px;"
                data-auto-load="false"></div>
        </div>
    );
};

export default Page;

这显然不起作用。我真的不知道该把它放在哪里：

    Calendly.initInlineWidget({
        url: 'https://calendly.com/mycalendlyaccount/30min?month=2022-05'
    });

我觉得我在上面链接到他们网站上的例子在这方面相当没有帮助。有人能给我一个提示吗？

答案＃1

快速尝试了这个，看起来运行得很好，根据需要进行调整：

import Head from 'next/head';

[...]
  useEffect(() => {
    window.Calendly.initInlineWidget({
      url: 'https://calendly.com/my-calendar/30min?month=2022-05',
      parentElement: document.getElementById('calendly-inline-widget')
    });
  }, [])
  return (
    <>
      <Head>
        <script src="https://assets.calendly.com/assets/external/widget.js"></script>
      </Head>
      <>
          <div
            id="calendly-inline-widget"
            style={{minWidth: 320, height: 580}}
            data-auto-load="false"
          >
          </div>
      </>
[...]

答案＃2

这是在 NextJS 应用的单个组件中使用 Calendly.initPopupWidget 的一种方法。注意，应用正在运行 Next 版本 12。

此解决方案使用 Next 的 Script 组件来嵌入第三方 Calendly 脚本。

import Script from 'next/script';
import { useEffect } from 'react';

export default function CalendlyButton() {
  function handleClick() {
    // @ts-ignore
    window.Calendly.initPopupWidget({
      url: 'https://calendly.com/foo/bar',
    });
    return false;
  }

  return (
    <>
      <Script
        src="https://assets.calendly.com/assets/external/widget.js"
        type="text/javascript"
        async
      />
      <link
        href="https://assets.calendly.com/assets/external/widget.css"
        rel="stylesheet"
      />

      <button onClick={handleClick}>Schedule</button>
    </>
  );
}

经过进一步考虑，我正在认真考虑使用 react-calendly 依赖，因为 Calendly 通过这种方式注入了大量第三方脚本。