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: ''
});
return (
<div>
<Script src=".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: ''
});
I find their example on their website I linked to above pretty unhelpful in this regard. Could somebody give me a hint?
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./mycalendlyaccount/30min?month=2022-05'
});
return (
<div>
<Script src="https://assets.calendly./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./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?
Share Improve this question asked May 20, 2022 at 9:36 antonwilhelmantonwilhelm 7,6035 gold badges34 silver badges66 bronze badges3 Answers
Reset to default 6Quickly 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./my-calendar/30min?month=2022-05',
parentElement: document.getElementById('calendly-inline-widget')
});
}, [])
return (
<>
<Head>
<script src="https://assets.calendly./assets/external/widget.js"></script>
</Head>
<>
<div
id="calendly-inline-widget"
style={{minWidth: 320, height: 580}}
data-auto-load="false"
>
</div>
</>
[...]
Here is an approach to using Calendly.initPopupWidget in a single ponent within a NextJS app. Note, the app is running Next version 12.
This solution uses Next's Script ponent 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./foo/bar',
});
return false;
}
return (
<>
<Script
src="https://assets.calendly./assets/external/widget.js"
type="text/javascript"
async
/>
<link
href="https://assets.calendly./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.
This approach tries to implement the react-calendly based widget in the next.js app in any ponent or page.js of any route in the next.js app.
- Calendly widget ponent
// ponents/CalendlyWidget.js
import React from 'react';
import { InlineWidget } from 'react-calendly';
const CalendlyWidget = () => {
return (
<div className="h-fit">
<InlineWidget url="https://calendly./your-calendly-url" />
</div>
);
};
export default CalendlyWidget;
Then use the this ponent anywhere in the app.
import CalendlyWidget from '../ponents/CalendlyWidget';
const HomePage = () => {
return (
<div>
<h1>Wele 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 es along with react-calendly library and all it's versions.