Integrate Calendly with Contact Form 7

Source From Here https://codepen.io/calendly/pen/KKPzNrB


<!-- Calendly CSS and JS -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
<div id="calendlybooking"></div>

<script>

// Builds the correct URL to pass into the Advanced Embed Code
const buildURL = () => {
  var teamPage = "company Name";
  var eventType = "30min";
  return (generatedURL = "https://calendly.com/" + teamPage + "/" + eventType);
};

// Show Hide the Custom Form
const hideForm = () => {
  document.getElementById("package-form-total-wrapp-id").style.display = "none";
};

const showCalendly = () => {
  // Call the "Build URL" function
  buildURL();

  // Call the "Hide Form" function
  hideForm();

  // Initialize Calendly Embed
  Calendly.initInlineWidget({
	url: generatedURL,
	parentElement: document.getElementById('calendlybooking'),
	prefill: {
	  name: document.getElementById("namebook").value,
	  email: document.getElementById("emailbook").value
	}
  });
};

document.addEventListener( 'wpcf7mailsent', function( event ) {

	showCalendly();

}, false );

</script>