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