How to make Calendly booking widget background semi-transparent

Other Questions Calendly
1

I’m working on integrating a Calendly scheduling widget into my WordPress site and need to make the background semi-transparent. The default white background doesn’t blend well with my page design.

I’ve attempted several approaches without success:

  1. Using CSS styles directly on the container div, but they get overridden
  2. Modifying the URL parameters (only supports standard hex colors, not RGBA)
  3. Trying to customize the widget.js file

Here’s my current setup:

<div class="scheduling-widget-container" data-url="https://calendly.com/john-smith/consultation?month=2023-03&hide_event_type_details=1&hide_gdpr_banner=1" style="min-width:300px;height:600px;">
</div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js">
</script>
<style>
    .scheduling-widget-container {
        background: rgba(0,0,0,0) !important;
    }
</style>

I also attempted to modify the buildContent function:

createWidget() {
    const container = document.createElement("div");
    container.className = "booking-widget-content";
    
    if ("#ffffff" === this.settings.backgroundColor && "transparent" === this.settings.opacity) {
        container.className += " widget-transparent";
    }
    
    container.style.background = this.settings.opacity;
    container.style.color = this.settings.fontColor;
    
    return container;
}

My goal is to achieve a semi-transparent gold background: rgba(217, 168, 45, 0.5). Has anyone successfully implemented transparent backgrounds with Calendly widgets?

2

Had this exact problem last year working on a client project. Calendly’s iframe loads after your CSS runs, so you can’t style it directly. Here’s what actually worked for me: wrap the widget in a container with your gold background, then use CSS blend modes like mix-blend-mode: multiply or mix-blend-mode: overlay on the iframe once it loads. You could also try a JavaScript mutation observer to wait for the iframe to load fully, then inject custom CSS - but that breaks whenever Calendly updates their code. My most reliable fix was throwing a semi-transparent div behind the widget and using CSS filters on the parent container to get the look I wanted.

3

Hit this same wall on three projects. Calendly’s iframe sandbox locks out any external CSS from touching their content.

I gave up fighting their styles directly and went with a fake transparency effect using backdrop filters instead.

Wrap the widget in a parent div with backdrop-filter: blur(1px) and put your gold background there. Then stick an absolutely positioned div behind the iframe with your rgba(217, 168, 45, 0.5) background and negative z-index.

Key part: use pointer-events: none on the overlay so clicks still reach Calendly.

.widget-wrapper {
  position: relative;
  backdrop-filter: blur(1px);
}

.gold-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(217, 168, 45, 0.5);
  pointer-events: none;
  z-index: 1;
}

Not perfect but gets you the visual blend without breaking when Calendly updates. Running this for 8 months with zero issues.