Estoy tratando de incrustar calendly en mi proyecto nextjs.
Sin embargo, no estoy seguro de cómo hacerlo. Idealmente, simplemente lo incrusto en una sola página (y no en _app o _document )
Esto es lo que tengo hasta ahora:
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;Esto obviamente no funciona. no se muy bien donde poner:
Calendly.initInlineWidget({ url: 'https://calendly.com/mycalendlyaccount/30min?month=2022-05' });Encuentro su ejemplo en su sitio web al que me vinculé anteriormente bastante inútil en este sentido. ¿Alguien podría darme una pista?
Probé rápidamente este y parece estar funcionando bien, adáptalo según sea necesario:
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> </> [...]