Change background color to transparent in Calendly widget

Question

I am trying to make the background color of my Calendly widget transparent, but I can't figure out how to do it.

I am trying to make this color transparent

Changing the color in the URL also doesn't work, the URL only accepts RGB hex codes instead of RGBA hex codes.

I tried changing the color with a style tag in the div at first, but it gets overwritten.

<div class="calendly-inline-widget" data-url="https://calendly.com/caroline-williams/30min?month=2023-02e?hide_event_type_details=1&hide_gdpr_banner=1" style="min-width:320px;height:630px;">
</div>
<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js">
</script>
<style>
    .calendly-inline-widget {
        background: transparent !important;
    }
</style>

I also copied the javascript given by Calendly and added a new variable in the widget.js like so:

buildContent() {
        const t = document.createElement("div");
        return (
          (t.className = "calendly-badge-content"),
          "#ffffff" === this.options.color &&
          "transparent" === this.option.trans &&
            (t.className += " calendly-white"),
          (t.onclick = this.options.onClick),
          (t.innerHTML = this.options.text),
          (t.style.background = this.option.trans),
          (t.style.color = this.options.textColor),
          this.options.branding && t.appendChild(this.buildBranding()),
          t
        );

And also added the css that Calendly uses in the head of my html, which gives back a white background (https://i.stack.imgur.com/dfQDo.png)

I am trying to change the color into: rgba(217, 168, 45, 0.5) Hex code: #d9a82d80

I want to inline embed this into a WordPress website

Does anyone know how to solve this problem?

Answer 1

I ran into the same problem:

1. Calendly's URL params do not style the div and appear to update the containing div appearance on iFrame load which means any inline styling you do is overridden.
2. I have only been able to make it work by using the advanced inline embed option detailed here: https://help.calendly.com/hc/en-us/articles/223147027?tab=advanced
3. Use the following as your HTML embed.

<div id="calendly-embed" style="min-width:100%;height:1200px;"></div>

<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js"></script>

<script>
Calendly.initInlineWidget({
url: 'https://calendly.com/YOUR_WORKSPACE/YOUR_EVENT_ID?YOUR_PARAMS',
parentElement: document.getElementById('calendly-embed')
});
var calendlyEmbed = document.getElementById('calendly-embed');
calendlyEmbed.setAttribute("style", "background-color: #00000000;min-width:100%;height:960px;");
</script>

1. First step create a div with id you can refer back to.
2. Import the Calendly JS package
3. Inject the calendly widget into the pre-made div.
4. Restyle the div after the IFrame has been loaded, in this case I hve set the "background-color" to 00000000 (transparent).

Hope this helps!