[Vuejs]-Calendly widget doesn't work after page refresh when live

by

4👍

✅

There is a solution possible to integrate Calendly without using their widget. You can try it as well. This solution should not produce the error mentioned and was tried in an SSR application.

<template>
  <!-- Calendly inline widget begin -->
  <div class="calendly-inline-widget" data-url="YOUR_CALENDLY_URL" style="min-width:320px;height:630px;"></div>
  <!-- Calendly inline widget end -->
</template>
    
<script>
export default {
  mounted () {
    const recaptchaScript = document.createElement('script')
    recaptchaScript.setAttribute('src', 'https://assets.calendly.com/assets/external/widget.js')
    document.head.appendChild(recaptchaScript)
  }
}
</script>
👤Tanya Jain

0👍

From this link, we can see that he is importing the component with

import Vue from 'vue';
import VueCalendly from 'vue-calendly';

Vue.use(VueCalendly);

Then with

<vue-calendly url="your Calendly URL" :height="600"></vue-calendly>

I’m not sure if you are trying to use a syntax like es2020 import here but the require('vue-calendly').default is probably the issue here.

Try importing it in the basic way as suggested above, and then you will be able to make some lazy-loading of it later on if you wish.

Also, you may use your devtools to see why your Calendly instance is not present.

Addy Osmani did a great article on how to import on interaction if you’re interested into optimizing your loading time. If it’s not that much needed, simply use the usual method or even simpler, load the vanilla JS solution.

👤kissu

Leave a comment