Calendly page styles

With page styles we can change the way the popup page (or embedded if inline) looks like.

We can adjust:

  • background color,
  • text color,
  • link/button colors (“primary color”),
  • show/hide the GDPR banner if applicable - depends on your Calendly setup, see their FAQ)
  • show/hide page details

On this demo page I will embed 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.

Note

Page styles apply to inline embedded pages, popup links, and badges, too. So you can combine specific badge and inline styles with page style values.

On this page, I used popup links to keep it simple.

Controlling colors

We have three parameters pageStyle. …

  • bgColor for the background
  • textColor, and
  • primaryColor used by Calendly for links/buttons.

Values provided should be in hex (eg. “#FFFFFF”). The hash character is optional. If it isn’t provided the shortcode will prepend that.
It is important to use enclosing quotes when using the hash character in the value, otherwise Hugo’s engine will not recognize the value correctly.

Hide/show GDPR banner

The parameter pageStyle.hideGDPRBanner is assumed false by default. We can set it to true.

Beware the the value must be assigned as boolean (ie. not enclosed in quotes):
pageStyle.hideGDPRBanner=true will hide it, whereas pageStyle.hideGDPRBanner="true" will not.

Hide/show page details

The parameter pageStyle.hidePageDetails is assumed false by default. We can set it to true.

Example

Let’s use a combination of the above. I want to hide page details, and adjust the color scheme.

{{< calendly 
      calendar="bespokesy" 
      type="popupLink" 
      text="Click me to see the page"
      pageStyle.bgColor=596a71
      pageStyle.textColor=fff9f1
      pageStyle.primaryColor=eadd46
      pageStyle.hidePageDetails=true
      pageStyle.hideGDPRBanner=true
/>}}

What it looks like

Click me to see the page

Parameters overview

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