0

The calendly widget works at first, but if you refresh the page it stops working but only when the website is live. In local development, no such issue occurs.

Also noticed that when I route to the page through navigation, it works. But if I enter the link to the specific page directly, it doesn't work.

Here's the code:

    <template>
  <client-only>
    <vue-calendly url="link" :height="650"></vue-calendly>
  </client-only>
</template>

<script>
import Vue from 'vue';

export default {
  created() {
    if (process.isClient) {
      const VueCalendly = require('vue-calendly').default;
      Vue.use(VueCalendly);
    }
  }
};
</script>

The Vue application is running on Gridsome so it's SSR. I set the widget to only display in client side. Not sure what the issue is.

BURGERFLIPPER101
  • 1,231
  • 4
  • 24
  • 41

2 Answers2

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
  • 361
  • 1
  • 9
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
  • 40,416
  • 14
  • 65
  • 133
  • I forgot to mention this issue only occurs when the website is live. In local development, no such issue occurs. I tried that import format, but I get an error saying it must be written in "top level". – BURGERFLIPPER101 Feb 22 '21 at 17:13
  • Did you installed it at the equivalent of `main.js` file for Gridsome with the `Vue.use(VueCalendly);` and so on ? Did you add the env variable key of the calendly API to your production build ? – kissu Feb 22 '21 at 17:17
  • Yes, the widget works when you initially route to the page it is on. But if you hit refresh, it disappears. The HTML element then has 0 height. The page is blank. – BURGERFLIPPER101 Feb 22 '21 at 17:35
  • You did not answered the 2 questions above. Also, maybe try to `console.log` after the `if (process.isClient) {` to see if it reaches the code inside of it. – kissu Feb 22 '21 at 17:36
  • The Calendly link is set correctly and the component is imported correctly. What I noticed is that if I hit the full URL of the page into the browser directly, it will not work. But when I visit the page via navigation, it works. – BURGERFLIPPER101 Feb 22 '21 at 18:12
  • Probably comes from the fact that `process.isClient` is behaving a bit differently when you do first render the page, Pretty sure it's not triggered. Double check that it's run (as told above..). For me, `isClient` is only used during builds and alike. You should probably just use `` here. More details: https://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component – kissu Feb 22 '21 at 18:24