Skip to main content

My Calendly embed isn’t displaying the way I think it should be on my website. What are some things I should check?

Hey there!
 

Check out this handy overview of our embed options! You can also take a look at this website for examples of each one.

 

When it comes to troubleshooting a faulty embed, there are a few things to keep in mind when using Chrome DevTools: 

 

  1. Check the embed code for any typos, missing or additional characters, invalid Calendly URL, etc.

  2. In the console, check to see if the Calendly object was created by logging console.log(Calendly).
    1. If the Calendly object does not exist, that tells us that widget.js has not loaded. Check to see if the widget.js script is in the code.blob
  3. If a popup widget embed is not displaying, you can use the console to check if the issue relates to the window.onload function. We assign the Calendly widget to window.onload, but there may be another function being assigned to this afterwards that overrides the Calendly widget.

    1. Manually trigger the .initBadgeWidget() function to determine if the widget.js loadsblob

    2. Log the window.onload event console.log(window.onload) to see if it contains the Calendly function. If it does not, it is likely that the user’s web builder is assigning another function to it and overriding the Calendly widget.

    3. In this scenario, a solution is to use a different event listener to trigger the Calendly widget. For example window.addEventListener('load', function()

Plain Text

<!-- Calendly badge widget begin --><link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet"><script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script><script type="text/javascript">window.addEventListener('load', function(){Calendly.initBadgeWidget({ url: 'https://calendly.com/YOURLINK', text: 'Schedule time with me', color: '#f53900', textColor: '#ffffff', branding: true }); } )</script><!-- Calendly badge widget end --> 

 

You can also select your website provider to learn more about how to embed Calendly on your website:


Reply