javascript - Nhúng Script Calendly trong NextJs

Tôi đang cố gắng nhúng Calendly vào dự án Next.js của mình.

Tuy nhiên, không chắc cách thực hiện. Lý tưởng nhất, tôi chỉ nhúng nó trên một trang duy nhất (và không phải trong _app hoặc _document)

Đây là những gì tôi có được cho đến nay:

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;

Điều này rõ ràng không hiệu quả. Tôi thực sự không biết nên đặt ở đâu:

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

Tôi thấy ví dụ của họ trên trang web mà tôi đã liên kết ở trên khá không hữu ích trong vấn đề này. Có ai có thể cho tôi một gợi ý không?

Câu trả lời #1

Nhanh chóng thử cái này và có vẻ hoạt động khá tốt, điều chỉnh khi cần:

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

Câu trả lời #2

Đây là một phương pháp để sử dụng Calendly.initPopupWidget trong một thành phần duy nhất trong một ứng dụng NextJS. Lưu ý, ứng dụng đang chạy phiên bản Next 12.

Giải pháp này sử dụng thành phần Script của Next để nhúng kịch bản Calendly của bên thứ ba.

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>
    </>
  );
}

Sau khi suy nghĩ kỹ hơn, tôi đang cân nhắc mạnh mẽ việc sử dụng thư viện phụ react-calendly do số lượng các script bên thứ ba mà Calendly chèn với phương pháp này.