How to update your custom code in Webflow

without having to republish the site?

TUTORIAL

Who likes to wait?

It's really great to be able to add custom code on Webflow, but there's something really not so great when you update it....

Waiting for the site to be published to be able to see the effect of the changes you made, here in Paris France where I work, in the afternoon, it can take up to 20 seconds (each time I say to myself that it is because the Americans are awake and saturate the servers).

It's a long time especially when you're stuck on a JavasScript bug. That's the reason why I said to myself that I had to find a solution to avoid that. My first thought was: ok I'll host the script on my server and just put the reference to the script in my custom Weblow code.

An absolutely great idea, except that it doesn't work.

Because in fact the browser keeps the first version of the script and doesn't update it when we make change on it. If you want the browser to update the script you have to change its name. Ok great. So you have to change the name of the reference script in its custom code in Webflow and republish....

It seemed really fucked up.

That's when I thought I'd create a script in Webflow that would automatically change the script name using additional parameters. So here's what happens. My script is hosted on this address :

https://my-personnal-server/my-script.js

And my script in Webflow calls a script at this address :

https://my-personnal-server/my-script.js?version=19090289

Each time we reload the page the number after "version=" changes randomly. This change does not affect the real address of the script, the browser will always look for the script at the same address. The parameters after the "?" do not change anything in this case.

The solution

As a consequence, to see the updated script result, you just have to save the script and reload the published page. We save an incredible time in the development process. Feel free to share this tip and if you know someone who is looking for a Webflow developer in the Paris time zone. Pass on my address.

Have fun. Here is the code to use in your Webflow ( Before </body> tag)

All you want, is  the code, I know it

<script>  
var script = document.createElement('script');
 var myRandom= Math.floor(Math.random() * 100000000);  
//Change the adress of the script bellow
 script.src = "https://my-personnal-server/my-script.js?version="+myRandom+'"';
 document.head.appendChild(script);
</script>

IMPORTANT: in the code change only "https://my-personnal-server/my-script.js" do not touch anything from "?"

For those who do not have a server to host their script.

Take a basic subscription at any host, otherwise you can work locally and upload your script on Github. Longer but it works.

ABOUT ME

I am a Webflow expert based in Paris and working remotely. You can check my "demo tape" and you can contact me for your Webflow projects.