Default front matter parameters

We can use front matter on a Hugo page to set default parameters for the shortcode.
On this demo page, I will use front matter parameters to control the look & feel of the Calendly embed.

To read more about these types on configurations, head over to the page about configuring default or custom parameters.

Front matter parameters for this page

Below is a copy of this page’s front matter with a few added comments for clarification.

--- # start of front matter block; '---' indicates yaml format
title: "Calendly configured with front matter"
weight: 5 # a specific parameter for the theme this site uses
date: 2021-05-13T12:25:39+10:00
draft: false
# start of Calendly shortcode specific parameters
calendly:
  calendar: "bespokesy/demo2"
  type: "inlineEmbed"
  style:
    page: 
      background_color: "f6f6f6"
      text_color: "333c54"
      primary_color: "d27230"
      hide_page_details: false
    inline:
      min_width: "700px"
      height: "880px"
--- # end of front matter block

For more details about front matter itself, visit Hugo’s page about it.

For other formats like toml or json, refer to my page with sample files.

Example

Now, let’s add the shortcode:

{{< calendly />}}

The shortcode will find the front matter parameters and apply those.

What it looks like

Example 2: Overriding values on the shortcode

As always, we can override values by adding them to the shortcode.

Let’s make two minor tweaks to the default:

  • replace the the orange (#d27230) primary color with a more reddish one (#bf3b3b), and
  • hide the page details (little strip on the right)
{{< calendly 
    pageStyle.primaryColor="bf3b3b" 
    pageStyle.hidePageDetails=true 
/>}}

What it looks like

More information

For more on how this works, check out these two pages: