javascript - Integrer Calendly-script i NextJs

Jeg prøver at integrere Calendly i mit Next.js-projekt.

Er dog ikke sikker på, hvordan man går frem. Ideelt set integrerer jeg det bare på en enkelt side (og ikke i _app eller _document)

Dette er, hvad jeg har indtil videre:

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;

Dette virker åbenlyst ikke. Jeg ved egentlig ikke, hvor jeg skal sætte:

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

Jeg synes, deres eksempel på deres hjemmeside, som jeg linkede til ovenfor, er ret ubrugeligt i denne henseende. Kan nogen give mig et hint?

Svar #1

Prøvede hurtigt denne her, og det ser ud til at fungere helt fint, tilpas efter behov:

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

Svar #2

Her er en tilgang til at bruge Calendly.initPopupWidget i en enkelt komponent i en NextJS-app. Bemærk, at appen kører Next version 12.

Denne løsning bruger Next's Script-komponent til at indlejre den tredjeparts Calendly-script.

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

Efter nærmere overvejelse overvejer jeg stærkt at bruge react-calendly-afhængigheden på grund af antallet af tredjepartsscripts, som Calendly injicerer med denne tilgang.