Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save felipe-ssilva/bc40652b21d559f88cce8a451db4bacf to your computer and use it in GitHub Desktop.
Save felipe-ssilva/bc40652b21d559f88cce8a451db4bacf 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment