We can change the style with parameters for badgeStyle. …
hideBranding - hide/show Calendly’s brandingalign - left/right/centerbgColor - the background colortextColorOn 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.
The default alignment is to the right. Other values available are center and left.
As with other colors, the shortcode needs hex colors. Either with leading hash character (eg. “#ffffff”), or without (ffffff).
By default, Calendly will add its own branding. We can set badgeStyles.hideBranding to true to turn that off.
Let’s align the badge to the left, hide the branding, and use some colors from this palette to make it stand out a bit.
I’ll use the bright yellow (#eadd46) as background, and dark green (#485123) as text:
{{< calendly
calendar="bespokesy"
type="popupWidget"
text="Let\'s have a chat!"
badgeStyle.bgColor="#eadd46"
badgeStyle.textColor="#485123"
badgeStyle.align="left"
badgeStyle.hideBranding=true
/>}}
Look at the bottom left of this page. If you can’t spot it, I might need to pick more outrageous colors next time.
Check out all parameter options, and where to embed them in the overview.