Question

Calendly Embed Error: Inline embed visually showing twice but only embedded once

  • 14 March 2024
  • 2 replies
  • 70 views

Hi everyone,

I’m having the issue where all of a sudden starting yesterday our embedded calendly inline widgets started appearing visually twice on the website. It looks super unprofessional and annoying and we’ve never had this issue before. All of the embed have existed prior to yesterday and have worked great for months, nothing’s changed. I

t’s happening on our wordpress site AND our hubspot landing pages. I’ve tried everything debugging wise on wordpress etc and I can’t find any reason for this to happen out of the blue. I’ve hidden the doubles under a white backround from the section beneath right now, but the site is grandcircus.co if anyone wants to look at the code.

Please help!

 

Oliver

 

 


2 replies

Userlevel 2

Hi @grandcircus! I took a look at your site and I see you are currently using both the default inline embed code and the advanced inline embed code, which is creating two embeds on your page.

We will typically see a second embed at the bottom of the body if you try to use the inline embed code outlined in our advanced embed code article (Calendly.initInlineWidget()) without specifying a parentElement. This will usually initialize the embed at the bottom of the body - visually, it looks like this is the case on your page.

I see you have the default inline embed code on the page as well, so it will automatically load based on the data-url as normal. I also see that you’ve added some variables to the URL which are not actually acting as variables, so I would recommend removing this entirely. Please also note that you won’t be able to target the calendly-inline-widget div in the advanced embed code if an embed has already loaded inside it/.

Typically, we see this when people have tried to replace the default inline embed code with the advanced embed code because they want to pass parameters to the embed. I see that this is what you’re trying to do, so you’ll just need to completely remove the default code and replace it based on the directions in our article!

I see you already have the advanced embed code added to your page so you’ll just need to add in the element you want to initialize the embed in and pass it as the parentElement. I see that you may be trying to pass UTM parameters so I would also recommend reviewing this page to understand how to automatically or manually pass them to the embed.

@marion-calendly thank you so much! Let me take a look at these and I’ll write back if I’m able to solve it! Thanks for your quick response! :D 

Reply