Skip to content

Instantly share code, notes, and snippets.

@oak-wildwood
Last active September 13, 2022 00:08
Show Gist options
  • Save oak-wildwood/2c7de99a022f1b9f7e9d9707686ff7ba to your computer and use it in GitHub Desktop.
Save oak-wildwood/2c7de99a022f1b9f7e9d9707686ff7ba to your computer and use it in GitHub Desktop.
Calendly Embed React component
import React from 'react';
class CalendlyEmbed extends React.Component {
calendlyScriptSrc = 'https://assets.calendly.com/assets/external/widget.js'
buildCalendlyUrl = (account, eventName) =>
`https://calendly.com/${account}/${eventName}`
componentDidMount() {
const head = document.querySelector('head')
const script = document.createElement('script')
script.setAttribute('src', this.calendlyScriptSrc)
head.appendChild(script)
}
componentWillUnmount() {
const head = document.querySelector('head')
const script = document.querySelector('script')
head.removeChild(script)
}
render() {
const { account, eventName } = this.props
return (
<div id="schedule_form">
<div
className="calendly-inline-widget"
data-url={this.buildCalendlyUrl(account, eventName)}
style={{ minWidth: '480px', height: '640px' }}
/>
</div>
)
}
}
export default CalendlyEmbed
@oak-wildwood
Copy link
Author

Usage:

<CalendlyEmbed account="acmeInc" eventName="consultation" />

@rotimi-best
Copy link

Thank you very much

@haroldao
Copy link

thanks :)

@ghawthorne66
Copy link

Awesome thanks!

@Lundii
Copy link

Lundii commented May 12, 2020

Thanks. Very helpful

@marianods81
Copy link

Thank YOu!

@luizsonego
Copy link

Very nice code.

@josueal1
Copy link

Thank you for sharing this! It's been of great help and starting point! @oak-wildwood Is there a standard way to mention credits to other people's code in react/nodejs/gatsby?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment