Skip to main content

I am embedding my scheduling form on my web site. My web site has a black background. 

 

I am using the Calendly embed code but a white background keeps on appearing behind my entire form. And since my website is black, the white form looks terrible. 

 

There is a SO question that addresses this same issue. This is my code to attempt to fix it. 

<div id="calendly-embed"></div>

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

<script>
    Calendly.initInlineWidget({
        url: 'https://calendly.com/MYACCOUNT/MYFORM?hide_gdpr_banner=1&background_color=1a1a1a&text_color=ffffff&primary_color=1ad605',
        parentElement: document.getElementById('calendly-embed'),
        resize: true
        });

    var calendlyEmbed = document.getElementById('calendly-embed');

    calendlyEmbed.setAttribute("style", "background-color:#00000000;min-width:220px;height:920px;");
        </script>

In the last line, you can see that I am trying to make the background-color transparent but that part of the code is simply not implemented. I have verified that the code is firing because changing the min-width and height settings in the exact same line do work as desired.

 

According to the SO answer from 1 year ago, this code should have fixed my problem. But I don’t know why it’s not working now. Or perhaps there are other ways to fix this?

Hey @Data72153 ! The background color you customized in the URL parameter is actually the background of the widget itself. If you are seeing a white background behind the widget, instead of the default transparent background then it sounds like your embed might be iframed instead of embedded using the widget. Your code would imply it’s using our widget, but the results would imply otherwise. 

 

Currently certain customizations to the embed won’t work if the embed is iframed into your website instead of using our conventional widget. Also, the transparent background will appear as a white background for iframes because it’s pulling the website in directly.  The parameters that our widget.js script are embed_type and embed_domain. Both will need to be present in order for the full 'embed' functionality to appear.

If you are embedding a Calendly page directly into an iframe (which it looks like you are in this case), then you will need to add both parameters below if you want those customizations to function.

The modified version with the parameters will be: https://calendly.com/example-page?embed_domain=example.com&embed_type=Inline

The value for embed_domain doesn't really matter in terms of embed functionality.

 

Sign up for CX Hours and meet our CX Experts.'
Terms & ConditionsCookie Settings