javascript - Incrustar script de Calendly en NextJs

Estoy intentando incrustar Calendly en mi proyecto Next.js.

Sin embargo, no estoy seguro de cómo hacerlo. Idealmente, solo lo incrusto en una sola página (y no en _app o _document)

Esto es lo que he conseguido hasta ahora:

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;

Obviamente esto no funciona. Realmente no sé dónde poner:

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

Encuentro que su ejemplo en su sitio web al que enlacé arriba es bastante poco útil en este sentido. ¿Alguien podría darme una pista?

Respuesta #1

Rápidamente probé este y parece estar funcionando bien, adáptalo según sea necesario:

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

Respuesta #2

Aquí hay un enfoque para usar Calendly.initPopupWidget en un solo componente dentro de una aplicación NextJS. Nota, la aplicación está ejecutando la versión 12 de Next.

Esta solución utiliza el componente Script de Next para incrustar el script de Calendly de terceros.

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

Después de pensarlo más, estoy considerando seriamente usar la dependencia react-calendly dado el número de scripts de terceros que Calendly inyecta con este enfoque.