CODEWITHSUNDEEP
javascriptreactjsnext.jswidgetcalendly
antonwilhelm
antonwilhelm

Reputation: 7553

Embed Calendly Script in NextJs

I am trying to embed calendly in my nextjs project.

Not sure however how to go about it. Ideally, I just embed it on a single page (and not in _app or _document)

This is what I've got so far:

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;

This obviously doesn't work. I don't really know where to put:

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

I find their example on their website I linked to above pretty unhelpful in this regard. Could somebody give me a hint?

Upvotes: 6

Views: 7686

Answers (3)

Divyesh Parmar
Divyesh Parmar

Reputation: 391

This approach tries to implement the react-calendly based widget in the next.js app in any component or page.js of any route in the next.js app.

  • Calendly widget component

// components/CalendlyWidget.js
import React from 'react';
import { InlineWidget } from 'react-calendly';

const CalendlyWidget = () => {
    return (
        <div className="h-fit">
            <InlineWidget url="https://calendly.com/your-calendly-url" />
        </div>
    );
};

export default CalendlyWidget;

Then use the this component anywhere in the app.


import CalendlyWidget from '../components/CalendlyWidget';

const HomePage = () => {
    return (
        <div>
            <h1>Welcome to My Next.js App</h1>
            <CalendlyWidget />
        </div>
    );
};

export default HomePage;

This has worked out well in few apps that we created. Hope this helps eliminate any confusion around adding more scripts tag manually in the or some other HTML element. This also injects all the possible scripts that comes along with react-calendly library and all it's versions.

Upvotes: 0

cheshireoctopus
cheshireoctopus

Reputation: 1790

Here is an approach to using Calendly.initPopupWidget in a single component within a NextJS app. Note, the app is running Next version 12.

This solution uses Next's Script component to embed the third-party 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>
    </>
  );
}

Upon further thought I am strongly considering using the react-calendly dependency given the number of third-party scripts Calendly injects with this approach.

Upvotes: 0

Nelloverflow
Nelloverflow

Reputation: 1779

Quickly tried this one and it seems to be working just fine, adapt as needed:

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

Upvotes: 6

Related Questions