文章/答案/技术大牛

发布

社区首页 >问答首页 >在NextJs中嵌入Calendly脚本

问在NextJs中嵌入Calendly脚本
EN

Stack Overflow用户

提问于 2022-05-20 09:36:44

回答 1查看 1K关注 0票数 1

我是试着按时间嵌入在我的下一个项目。

不过，我不知道该怎么做。理想情况下，我只是将其嵌入到单个页面(而不是在_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'
    });

在这方面，我发现他们的我链接到他们的网站上的例子非常没有帮助。谁能给我个提示吗？

widget

calendly

javascript

reactjs

next.js

回答 1

Stack Overflow用户

发布于 2022-05-20 14:27:06

很快就试了一下，它似乎工作得很好，可以根据需要进行调整：

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>
      </>
[...]

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72316716

复制

相似问题

问在NextJs中嵌入Calendly脚本
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在NextJs中嵌入Calendly脚本EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在NextJs中嵌入Calendly脚本
EN