Calendly Inline Widget

Support
#1

Hello dear team,

it’s about an error that appears on the heldenfinder.de website after a Calendly code has been implemented. Actually, the footer area should end at the bottom, but it is extended by a blind set piece on every single subpage of the website.

https://heldenfinder.de/kontakt/

I have implemented Calendly on a contact page on a PRO website and the (new) iframe is working as well so far. I got the new code from Calendly support because there are some problems with another code since a while. I absolutely cannot locate the code, which I find very strange as I have searched everything already.

What do you think could be the reason for this?

Here you can see what Calendly Support has already shared:

[…] I took a look into your code, and from some reason, there is an extra bit of code being produced near the bottom of your body code:

Screenshot 2023-10-13 at 10.05.44 AM
Screenshot 2023-10-13 at 10.05.44 AM3930×2310 708 KB

One step you can try, is to embed the iframe directly to see if that mitigates the issue:

<iframe src="https://calendly.com/heldenfinder/erstgespraech?embed_domain=heldenfinder.de&amp;embed_type=Inline&amp;hide_event_type_details=1&amp;hide_gdpr_banner=1" style="width: 100%; min-width: 320px; height: 700px;" frameborder="0"></iframe>

You will need to reach out to your theme owner to help you troubleshoot from here.

This isn’t being caused by our code, however, sometimes, when you manually initialize the inline embed by calling Calendly.initInlineWidget() , an optional parentElement can be included which determines which element the embed will be loaded in. (See Advanced embed options for an example.)
If no parentElement is provided, the script will add the iframe to the <body> . Because there is no special styling applied to the iframe, it will normally appear as a short section at the very bottom of the webpage (although the content can sometimes be hidden by a footer which overlays it).

I mention all of this because it may help you with troubleshooting with your theme owner and it may point them in the right direction.

Best, Christopher

#2

Hi Christopher,

I checked your page source and the issue is indeed caused by the calendly-inline-widget, you can temporarily fix this by adding the following code in the Global CSS:

.calendly-inline-widget {
    height: auto !important;
}

However you should remove the code to properly fix the issue. I checked you contact page and I only found the iframe added to the page but no code was found. I also checked your child theme’s functions.php file and no code was there as well. How did you implement the code? Because I see a script tag in the page source which seems to be creating the issue by adding calendly-inline-widget div tag in your page (see screenshot)

image
image918×221 10.9 KB

Removing this script should fix the issue. Thanks!

#3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.