Custom parameters via data file

We can add a named data file to Hugo for the shortcode to pull its parameters from.
On this demo page, I will use such a file and tell the shortcode to use it.

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

The data file

I have created a data file called demofile.json and placed it in the data/calendly/ folder.

This is what the file contains:

{
    "calendar": "bespokesy/demo1",
    "type": "inlineEmbed",
    "style": {
        "inline": {
            "min_width": "700px",
            "height": "880px"
        },
        "page": {
            "background_color": "f6f6f6",
            "text_color": "333c54",
            "primary_color": "d27230"
        }
    }
}

(By the way, I have copied & pasted a few values from this page with sample data files, and modified the colors to be less… obnoxious.)

Example

Now, let’s use the data file in a shortcode:

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

The shortcode above will look in the Hugo’s data folder for a calendly subfolder, and in there for a .json, .yaml, or .toml file starting with demofile.

What it looks like

Example 2: Overriding values on the shortcode

We can also override values by adding them to the shortcode.

So, let’s change it to a link with a custom text, while still retaining the definitions from the data file. And while we’re here, I’ll hide the page details, too.
I’ll change the type to a link, and set the text to show on the link:

{{< calendly 
    dataSet="demofile" 
    type="popupLink" 
    text="Click me to see the page" 
    pageStyle.hidePageDetails=true
/>}}

What it looks like

Click me to see the page <- click here to see the page

More information

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