Inline embedded frame styles

Advanced inline styles cover two additional parameters:

• min-width : to control how wide the embed should be, and
• height : to help get rid of scroll bars when needed

This demo page embeds the parameters in the shortcode directly. Take note that we could also set those in the site configuration, the page’s front matter, or use a data file. For more information on that, visit the parameters overview page.

Controlling the width

The parameter name is inlineStyle.minWidth when using it in the shortcode directly.
Values provided can be in pixel (eg. 440px), or percent (eg. 30%). If a value with neither ‘px’ nor ‘%’ is provided, the shortcode will assume it is pixel, and append ‘px’ to that value.

The default min-width that Calendly provides is 320px.

Controlling the height

The parameter name is inlineStyle.height when using it in the shortcode directly.

The default height provided by Calendly is 630px.

Example

So, let’s increase both, min-width and height to see it

{{< calendly calendar="bespokesy" type="inlineEmbed" inlineStyle.height="780px" inlineStyle.minWidth="900px" />}}

What it looks like

Parameters overview

Check out all parameter options, and where to embed them in the overview.