javascript - Upota Calendly-skripti NextJs:ään

Yritän upottaa Calendlyn Next.js-projektiini.

En ole kuitenkaan varma, miten siihen pitäisi ryhtyä. Ihannetapauksessa upottaisin sen vain yhdelle sivulle (enkä _app:iin tai _document:iin)

Tähän mennessä minulla on tämä:

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;

Tämä ei ilmeisesti toimi. En oikeastaan tiedä, mihin laittaa:

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

Pidän heidän verkkosivustollaan, johon linkitin yllä, olevaa esimerkkiä tässä suhteessa melko hyödyttömänä. Voisiko joku antaa minulle vihjeen?

Vastaus #1

Kokeilin tätä nopeasti ja vaikuttaa toimivan ihan hyvin, mukauta tarpeen mukaan:

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

Vastaus #2

Tässä on lähestymistapa Calendly.initPopupWidget -toiminnon käyttämiseen yhdessä komponentissa NextJS-sovelluksessa. Huomaa, että sovellus käyttää Next version 12.

Tämä ratkaisu käyttää Nextin Script-komponenttia upottamaan kolmannen osapuolen Calendly-skriptin.

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

Lisäpohdinnan jälkeen harkitsen vakavasti react-calendly-riippuvuuden käyttöä ottaen huomioon kolmansien osapuolten skriptien määrän, joita Calendly lisää tällä lähestymistavalla.