All parameters

List of all parameters

Paremeters with the Plus tag are only available for Hugo Calendly Shortcode Plus. Otherwise, the parameter is available for both, free and Plus versions.

The list shows the names for shortcode parameters only. Beware that the names may be different when using site configuration parameters, front matter parameters, or Hugo data files.
Those differences are shown as part of the next page, Configuring default parameters.

Top-level parameters

These are general purpose parameters. Primarily used to set a specific calendar, and the type of the Calendly widget.

calendar (required)

Defines which calendar to link to. We can either use the account-level calendar name for Calendly which will show all visible calendar events to select from, or target a calendar event directly.

For example, when using a specific calendar event, the calendar name should look something like bespokesy/demo1. “bespokesy” is the account level name, and the event name is “demo1”

Shortcode

{{< calendly ... calendar="bespkesy/demo1" ... />}}

type

Defines which Calendly embed type to use. Defaults to popupLink.
See also Calendly’s embed options overview page for additional information.

Available types are:

• popupLink (default)

  Shows a text link. Clicking on it will open a modal showing the Calendly page.

• popupWidget

  Shows a floating badge at the bottom of your screen.

• inlineEmbed

  Embeds the booking page inside an iframe on your page.

Shortcode

{{< calendly ... type="popupWidget" ... />}}

Aliases Plus

The Plus version has additional aliases defined for:

• Alias for popupLink: link
• Aliases for popupWidget: badge, widget
• Aliases for inlineEmbed: inline, embed

text

Set the text on the popup link, or floating badge. Defaults to Schedule time with me.

Shortcode

{{< calendly ... text="Book a time" ... />}}

Alternatively, use opening and closing shortcode tags, and keep the text in the middle. For example:

{{< calendly ... >}}
Book a time
{{< /calendly >}}

hideBranding

See also badgeStyle.hideBranding

This actually belongs under badge styles, but I kept it to avoid compatibility issues between the free and Plus versions.

When set to true, hides Calendly’s branding on the floating badge.

Shortcode

{{< calendly ... type="popupWidget" hideBranding=true ... />}}

dataSet Plus

The data set parameter is a special parameter. It is used in conjunction with Hugo data files to extract parameters from a a specific data file.

So, let’s say you have a calendly parameter data file located under data/calendly/demo1.json (or demo1.toml or demo1.yaml - they all should work). It contains values for the calendar, styles, and more.
We can now tell the shortcode to load and apply those values, like so:

{{< calendly dataSet="demo1" />}}

This will work in conjunction with default parameters. For more information on how those work together, check out the page showing how to configure default parameters.

Page style parameters Plus

These parameters only apply to all types. They will control what the booking page looks like.

pageStyle.bgColor, pageStyle.textColor, pageStyle.primaryColor (optional)

Change the appearance of Calendly’s booking page. Works only if you have a Calendly Pro subscription.

Values should be hexadecimal colors, with or without leading hash character (eg. #1f1f1f or just 1f1f1f).

• bgColor: Sets the background color for the page
• textColor: Sets the text color on the page
• primaryColor: Sets the color used for buttons and links on the page.

Shortcode

{{< calendly ... 
    pageStyle.bgColor=bf3b3b
    pageStyle.textColor=8fa7d0
    pageStyle.primaryColor=0679b2
/>}}

pageStyle.hidePageDetails

Hide page details when opening the Calendly page. Defaults to false.

From Calendly’s advanced embed options page:

Remove any information that is duplicated by the content of your web page by hiding the event details, such as your Calendly account picture, event location and event description.

Shortcode

{{< calendly ... pageStyle.hidePageDetails=true ... />}}

pageStyle.hideGDPRBanner

Hide the GDPR banner on the Calendly page. Defaults to false.

Shortcode

{{< calendly ... pageStyle.hideGDPRBanner=true ... />}}

Badge style parameters Plus

These parameters only apply when using type="popupWidget".

badgeStyle.bgColor, badgeStyle.textColor

Change the appearance of Calendly’s floating badge/widget.

Values should be hexadecimal colors, with or without leading hash character (eg. #1f1f1f or just 1f1f1f).

• bgColor: Sets the background color for the badge
• textColor: Sets the text color on the badge

Shortcode

{{< calendly ... 
    type="popupWidget"
    badgeStyle.bgColor=bf3b3b
    badgeStyle.textColor=8fa7d0
    ...
/>}}

badgeStyle.hideBranding

Only applicable for type="popupWidget". Defaults to false.

When set to true, hides Calendly’s branding on the floating badge.

Shortcode

{{< calendly ... type="popupWidget" badgeStyle.hideBranding=true ... />}}

Inline style parameters Plus

These parameters modify the embedded view when using type="inlineEmbed".

inlineStyle.height, inlineStyle.minWidth

Only applicable for type="inlineEmbed".

We can use these parameters to customize the width and height of the embedded frame.
We have the following two parameters:

• inlineStyle.height - defaults to 630px

  We can use this to fine-tune the embedded frame’s height - often used when trying to get rid of scroll bars.

• inlineStyle.minWidth - defaults to 320px

  Adjust the width of the embedded page.

These parameters can accept:

• numbers (eg. inlineStyle.minWidth=450) which will be interpreted as pixel,
• percentages (inlineStyle.minWidth="50%"), or
• pixel (inlineStyle.minWidth="450px")

Shortcode

{{< calendly ... 
      type="inlineEmbed"
      inlineStyle.minWidth="400px"
      inlineStyle.height="880px"
      ...
/>}}

UTM tracking parameters Plus

These parameters take advantage of the Calendly Pro feature of tracking engagement.
For example, we can use them to assign a Calendly link or embed with a campaign, source, and other relevant UTM tracking parameters.

Hugo Calendly Shortcode Plus will attach the provided parameters to the query, so that Calendly can use them for you to track conversions.

See this Wikipedia page for more information about UTM.
And see Calendly’s help page for tracking conversions.

utm.* parameters

There are five basic UTM parameters used:

• utm.source - to identify the site from which the referral occurred
• utm.medium - typically used to identify what type of link was used (eg. email or cost-per-click)
• utm.campaign - for a specific promotion or a strategic campaign
• utm.term - usually used for tracking specific search terms
• utm.content - might be used to identify which specific page/area/section/link/button has been clicked.

The parameter values are all assumed to be some, non-empty string.

Shortcode

{{< calendly ... 
      utm.source="my-hugo-site.com"
      utm.medium="Hugo Calendly Shortcode embed"
      utm.campaign="book-a-geddon 2021"
      utm.term="n/a"
      utm.content="Book a call blog post"
      ...
/>}}