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.
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.
- 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.
- Commit the changes.
- To use JSDelivr as the CDN - the template URL is:
So in this case:
- 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
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: