Skip to content

Instantly share code, notes, and snippets.

@rotimi-best
Forked from oak-wildwood/CalendlyEmbedReact.js
Created February 11, 2020 19:07
Show Gist options
  • Save rotimi-best/8efc34ae73abeff99a66e93a0884848c to your computer and use it in GitHub Desktop.
Save rotimi-best/8efc34ae73abeff99a66e93a0884848c 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