javascript - Legg inn Calendly-skript i NextJs

Jeg prøver å integrere Calendly i mitt Next.js-prosjekt.

Er imidlertid ikke sikker på hvordan jeg skal gå frem. Ideelt sett legger jeg det bare inn på en enkelt side (og ikke i _app eller _document)

Dette er hva jeg har så langt:

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 fungerer åpenbart ikke. Jeg vet egentlig ikke hvor jeg skal sette:

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

Jeg synes eksemplet deres på nettsiden jeg lenket til ovenfor er ganske lite hjelpsomt i denne sammenhengen. Kan noen gi meg et hint?

Svar #1

Prøvde dette raskt, og det ser ut til å fungere helt fint, tilpass etter 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 tilnærming til å bruke Calendly.initPopupWidget i en enkelt komponent i en NextJS-app. Merk at appen kjører Next versjon 12.

Denne løsningen bruker Nexts Script-komponent for å bygge inn tredjeparts Calendly-skriptet.

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

Etter nærmere overveielse vurderer jeg sterkt å bruke react-calendly-avhengigheten gitt antallet tredjepartsskript som Calendly injiserer med denne tilnærmingen.