Configure default or named parameter sets

All shortcode parameters (as shown on the Parameters page) can be predefined to have sensible defaults for all your Calendly links.
This is particularly useful if you want to have a default type, and some styles defined for those, but at the same time, want to have the opportunity to tweak those parameters for specific pages, or even individuals.

There are four ways to provide parameters for Hugo Calendly Shortcode:

1. A direct parameter in the shortcode itself (see the full list on the previous page),
2. Adding parameters to Hugo’s site configuration file,
3. Adding front matter parameters on a specific page, and
4. Using Hugo data files.

Where to put default parameters

We can provide defaults in three locations:

1. Hugo’s site configuration file (ie. config.toml)

   This is useful for global defaults. A shared style and colors that should apply to all embedded Calendly links/pages.
   We could also provide shared UTM tracking parameters that are common. Such as source and medium.

2. Through Hugo data files (eg. in json format)

   We can define a data file in the data/calendly/ folder, called default.json and set the defaults there instead of using the site configuration, or in conjunction with it.

3. On a specific Hugo page, through its front matter parameters

   Particularly useful for tweaks to the look & feel for a particular page.
   We could also add more default UTM parameters such as campaign and content if w are using UTM.

Where to put prepared custom parameters

Similar to the default data file above, we can also define custom parameters for individual users.

Assuming the shortcode has a dataSet, it will look for a data file in .json, .yaml, or .toml format under data/calendly/ that is starting with the value provided.

For example: If we add dataSet="janedoe" to the shortcode, it will load pre-defined parameters from a prepared janedoe.json (or .yaml, or .toml).

Parameter override order from different sources

Hugo Calendly Shortcode Plus tries to infer parameter values by looking for values in the different locations in a specific order.

In order of priority:

1. Direct parameters on the shortcode itself will override all other values (but not remove values), followed by
2. Named data files (e.g. data/calendly/janedoe.json if dataSet="janedoe" is set on the shortcode),
3. Front matter parameters for the page the shortcode is added to,
4. A default data file (e.g. data/calendly/default.json),
5. Hugo’s site configuration (e.g. config.toml).

All of the above are optional, and higher priority values will be copied over lower ones, without removing parameters that have not been overridden.

Structure of configuration parameters

I will use an example to illustrate the differences between shortcode parameter names.

This example is based on what it would look like in front matter. To see all options (Hugo site configuration, data files, and front matter) on one page, take a look at Complete parameter sets - samples.

Example: A popup link using all possible parameters

In this example, I am using all parameters that makes sense for a popup link, including pageStyle.* and utm.*

{{< calendly 
    calendar="bespokesy/demo1" 
    type="popupLink" 
    text="Find a time to talk with me"
    pageStyle.bgColor=bf3b3b
    pageStyle.textColor=8fa7d0
    pageStyle.primaryColor=0679b2
    pageStyle.hidePageDetails=true 
    pageStyle.hideGDPRBanner=true
    utm.campaign="test campaign"
    utm.source="test source"
    utm.medium="test medium"
    utm.content="test content"
    utm.term="test term"
/>}}

{
    "calendly": {
        "calendar": "bespokesy/demo1",
        "type": "popupLink",
        "text": "Find a time to talk with me",
        "style": {
            "page": {
                "background_color": "bf3b3b",
                "text_color": "8fa7d0",
                "primary_color": "0679b2",
                "hide_gdpr_banner": true,
                "hide_page_details": true
            }
        },
        "utm": {
            "campaign": "test campaign",
            "source": "test source",
            "medium": "test medium",
            "content": "test content",
            "term": "test term"
        }
    }
}

calendly:
  calendar: "bespokesy/demo1"
  type: "popupLink"
  text: "Find a time to talk with me"
  style:
    page: 
      background_color: "bf3b3b"
      text_color: "8fa7d0"
      primary_color: "0679b2"
      hide_gdpr_banner: true
      hide_page_details: true
  utm: 
    campaign: "test campaign"
    source: "test source"
    medium: "test medium"
    content: "test content"
    term: "test term"

[calendly]
  calendar = "bespokesy/demo1" 
  type = "popupLink" 
  text = "Find a time to talk with me"
[calendly.style]
[calendly.style.page]
  background_color = bf3b3b
  text_color = 8fa7d0
  primary_color = 0679b2
  hide_page_details = true 
  hide_gdpr_banner = true
[calendly.utm]
  campaign = "test campaign"
  source = "test source"
  medium = "test medium"
  content = "test content"
  term = "test term"

Note: the parameter prefix (in this example calendly.*) will differ slightly depending on where you want to add them. For a full set of examples in all locations, have a look at Complete parameter sets - samples.

More examples

For more examples take a look at these demo pages:

• Default parameters in front matter, and
• Using a data file with custom parameters.