Calendly Embed React component

CalendlyEmbedReact.js

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

Usage:

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

Thank you very much

thanks :)

Awesome thanks!

Thanks. Very helpful

Thank YOu!

Very nice code.

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?