我正在尝试将calendly嵌入到我的nextjs项目中。
但不确定如何去做。理想情况下，我只是将其嵌入到单个页面上（而不是在
_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'
});
我发现他们的在我上面链接到的网站上的示例在这方面非常没有帮助。有人可以给我提示吗？
快速尝试了这个，它似乎工作得很好，根据需要进行调整：
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>
</>
[...]
这是在 NextJS 应用程序内的单个组件中使用
Calendly.initPopupWidget此解决方案使用 Next 的
Scriptimport 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>
</>
);
}
经过进一步思考，考虑到 Calendly 通过这种方法注入的第三方脚本的数量，我强烈考虑使用 react-calendly 依赖项。