I have a ton of custom code on one of my pages (over 10,000 characters) and webflow is telling me I’m over my limit. I have read a couple of suggestions—one, host your code off-site and reference it in the page, and two, split the code up into multiple html embeds.
A lot of my custom code is referencing CMS fields. Is it still possible to host the code off-site and reference it on the page?
Really bummed webflow put this limit in place. What’s the best solution here?
I managed a workaround once where I hosted the code on Netlify and embedded it on Webflow. The best thing was to be able to use a normal code editor and push changes without having to publish the site every time.
@vitaliyg One solution to accessing CMS data when using externally hosted javascript is store the CMS data in session storage when the page loads.
<script>
window.sessionStorage.setItem("KEY", "{{ CMS_FIELD }}" ) // Replace {{ CMS_FIELD }} with the CMS variable in the custom code editor. Make sure to include the "" around the CMS variable otherwise the browser will throw a ReferenceError (unless you the value is a number or boolean).
</script>
Do this for each of the CMS fields you want to be able to access.
Also ensure that this code is executed before your external JS file.
The below code can be used in your external JS to get the values:
You could also create a single object containing the all of the key/value pairs, stringify it, and then store the string as a single sessionStorage item.
<script>
var jsonStr = window.sessionStorage.getItem("WF_CMS_DATA")
var obj = JSON.parse(jsonStr)
console.log(obj.slug) // will log "my-page" to the JS console
</script>
Thank you so much for everyone’s and OP’s help on this. You are lifesavers. Also? If the js is footer code, you don’t have to above “var Webflow” code.
Secret pro tip:
Code is text, which means that it can be read from a .txt file =>
If you save your code as a .txt file (without the <script> tags) you can upload it to Webflow and then load it as an external file like so- <script src="YOUR_FILENAME.TXT"></script>
Thanks so much.
From what I have seen, this seems to be the simplest solution to add large code to webflow sites. I don’t know if it works for pulling CMS field data though.
Slight addition to the answer - you need to get the link of the text file you upload by going to Assets > File you uploaded > Settings > Link icon. The link will be copied to clipboard and you can use that in the script tag <script src="PASTE LINK HERE"></script>