diff --git a/extensions/blocks/calendly/calendly.php b/extensions/blocks/calendly/calendly.php
index 88a9718a6ad2..413a85fed440 100644
--- a/extensions/blocks/calendly/calendly.php
+++ b/extensions/blocks/calendly/calendly.php
@@ -79,6 +79,9 @@ function set_availability() {
  * @return string
  */
 function load_assets( $attr, $content ) {
+	if ( is_admin() ) {
+		return;
+	}
 	$url = get_attribute( $attr, 'url' );
 	if ( empty( $url ) ) {
 		return;
@@ -93,7 +96,7 @@ function load_assets( $attr, $content ) {
 		'https://assets.calendly.com/assets/external/widget.js',
 		null,
 		JETPACK__VERSION,
-		false
+		true
 	);
 
 	$style                          = get_attribute( $attr, 'style' );
@@ -105,7 +108,7 @@ function load_assets( $attr, $content ) {
 	$submit_button_classes          = get_attribute( $attr, 'submitButtonClasses' );
 	$submit_button_text_color       = get_attribute( $attr, 'customTextButtonColor' );
 	$submit_button_background_color = get_attribute( $attr, 'customBackgroundButtonColor' );
-	$classes                        = \Jetpack_Gutenberg::block_classes( 'calendly', $attr );
+	$classes                        = \Jetpack_Gutenberg::block_classes( 'calendly', $attr, array( 'calendly-style-' . $style ) );
 	$block_id                       = wp_unique_id( 'calendly-block-' );
 
 	$url = add_query_arg(
@@ -150,10 +153,18 @@ function load_assets( $attr, $content ) {
 		);
 	} else { // Inline style.
 		$content = sprintf(
-			'<div class="calendly-inline-widget %1$s" data-url="%2$s" style="min-width:320px;height:630px;"></div>',
+			'<div class="%1$s" id="%2$s"></div>',
 			esc_attr( $classes ),
-			esc_url( $url )
+			esc_attr( $block_id )
 		);
+		$script  = <<<JS_END
+Calendly.initInlineWidget({
+	url: '%s',
+	parentElement: document.getElementById('%s'),
+	inlineStyles: false,
+});
+JS_END;
+		wp_add_inline_script( 'jetpack-calendly-external-js', sprintf( $script, esc_url( $url ), esc_js( $block_id ) ) );
 	}
 
 	return $content;
diff --git a/extensions/blocks/calendly/edit.js b/extensions/blocks/calendly/edit.js
index 5c9b509c2a99..c21b51637b2b 100644
--- a/extensions/blocks/calendly/edit.js
+++ b/extensions/blocks/calendly/edit.js
@@ -26,6 +26,7 @@ import { getBlockDefaultClassName } from '@wordpress/blocks';
  * Internal dependencies
  */
 import './editor.scss';
+import './view.scss';
 import icon from './icon';
 import attributeDetails from './attributes';
 import { getValidatedAttributes } from '../../shared/get-validated-attributes';
@@ -147,7 +148,6 @@ export default function CalendlyEdit( props ) {
 				frameBorder="0"
 				data-origwidth="100%"
 				data-origheight="100%"
-				style={ { minWidth: '320px', height: '630px', width: '100%' } }
 				title="Calendly"
 			></iframe>
 		</>
@@ -257,8 +257,10 @@ export default function CalendlyEdit( props ) {
 		</InspectorControls>
 	);
 
+	const classes = `${ className } calendly-style-${ style }`;
+
 	return (
-		<div className={ className }>
+		<div className={ classes }>
 			{ inspectorControls }
 			{ blockControls }
 			{ url ? blockPreview( style ) : blockPlaceholder }
diff --git a/extensions/blocks/calendly/view.scss b/extensions/blocks/calendly/view.scss
index 6eacebccc640..59a1b37e52e0 100644
--- a/extensions/blocks/calendly/view.scss
+++ b/extensions/blocks/calendly/view.scss
@@ -1,3 +1,7 @@
 .admin-bar .calendly-overlay .calendly-popup-close {
 	top: 47px;
 }
+
+.wp-block-jetpack-calendly.calendly-style-inline {
+	height: 630px;
+}