Skip to main content

On vue.js + router, I have a Single Page Application
Which means when the index.html is loaded once, all the links in the menus are only linking to routes without refreshing the page but just displaying différent page contents.

So the script part of the embed, i put it in the index.html file which loads usualy when ‘/’ is called :

<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>


Then, under the ‘/contact’ route, I have the div part of the embed :
<div class="calendly-inline-widget” …

What happens is : 
1 : I load the app for the first time by reaching any of the routes.

2 : I navigate to ‘/contact’ (if i wasn’t already there at the first load) » the embed displays and works 

3 : I navigate to another route and then back to ‘/contact’ » the embed doesn’t load, it stays empty

What I tried : 
1 : on contact load : insert again the script part in the header by script » I get rejected by calendly

2 : refresh the page on the second load with window.location.href = ‘/contact’ » I is not sufficient, the embed doesn’t load either

​​​​​​​I don’t know what to try next : do you have any tip ?

Solution : 

 

1- if the widget has no child : remove the script and put it again in the header (it will restart it)

 

onMounted(() => {

 

//get the div widget

let widget = document.getElementById("calendlyInlineWidget")

//get calendly script

let script = document.getElementById("widgetScript")

if(widget && script && !widget.children.length){

script.remove()

var newScript = document.createElement("script");

newScript.id = "widgetScript";

newScript.type = "text/javascript";

newScript.src = "https://assets.calendly.com/assets/external/widget.js";

newScript.async = true;

document.head.appendChild(newScript);

 

}

 

});

 

Terms & ConditionsCookie Settings