Writing and managing custom code in Webflow can be challenging. It can be very easy to quickly go over the 10,000 on-page custom code character limit, or the 20,000 project level custom code character limit. In this short article, I will go through two solutions.
To help illustrate these solutions, I have put together a very simple Webflow site, whereby if you click the button, a custom JavaScript file will run and an alert will pop up.
The JavaScript file has been expanded to be 10,108 characters long.
Solution 1: Host in Webflow Assets
- The first thing you want to do is copy/cut all the custom code and paste it into a new file in whatever code editor you use. In this example I'm using VS Code.
- Don't include <script> tags in the code you've pasted.
- Save the file as a .txt file.
- Upload the file to your Webflow assets folder.
- Copy the file's asset link.
- In the on-page custom code area, or in an embedded custom code box set up <script> tags and be sure to include type="text/javascript". Paste the copied asset link in as the "src" attribute's value.
- Publish your page and your code will work. If you inspect your page using Dev Tools you will see the functioning <script>
Solution 2: Host with GitHub & JSDelivr
- Assuming you have a functional GitHub account, login to it, and create a new repo.
- Give it a name and description & then upload the custom JavaScript file you need hosted.
- Commit the changes.
- To use JSDelivr as the CDN - the template URL is:
https://cdn.jsdelivr.net/gh/user/repo@version/file
So in this case:
https://cdn.jsdelivr.net/gh/myusername/webflow-custom-code/long-code.js
- Add the above into a couple of <script> tags either in the main project custom code area, the on-page custom code area, or an embed code box. Like so:
- Publish your project and it should read the code perfectly.
* A note about updating / editing your code
An important addendum to the JSDelivr solution, is that if you make changes to your GitHub hosted JavaScript code, you need to commit these either as a new file, or more simply on a new branch. This is because JSDelivr fetches the code only once from GitHub as they state in their documentation:
To get around this, you can use branches. Here is what that looks like:
- Click on the branch drop-down menu and type in the name of a new branch. Click to create this new branch. Your current code will be in the new branch.
- Making sure the new branch is selected from the dropdown menu, click on the pencil icon to edit the code.
- Write or paste in your code changes and then commit your changes to the new branch.
- Update the <script> "src" attribute in your Webflow project to include the branch after the repo name like so:
- If you then inspect the code, you will see that it is now utilising the updated version of your code from the new branch:
