Page's Custom Code 10,000 Character Limit Reached đź‘Ž

Bummer, Webflow!

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 decided to split my code up into html embeds with code from my friend @ChrisDrit. Hope someone finds this useful :+1:

<script>
  var Webflow = Webflow || [];
  Webflow.push(function() {

    //insert javascript you want to embed here

  });
</script>
5 Likes

Nice! Good to hear it was helpful @vitaliyg !

1 Like

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.

You should give it a try :wink:

2 Likes

Thanks @gvdias! Will check it out!

Thats interesting Gustavo. I take it you were using a free Netlify account as your CDN for the Javascript?

Yes the free account does the trick.
I also sync it with GitHub so I can push the changes quicker.

Yea…I’ve been using a free Netlify account linked to my Github for awhile and really loving it. I like the idea of using it as a CDN, though :slightly_smiling_face:

@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:

<script>
    window.sessionStorage.getItem("key")
</script>

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 = JSON.stringify({ slug: "my-page" })
    window.sessionStorage.setItem( "WF_CMS_DATA", jsonStr )
</script>

Then access it with

<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.

Hi Vitaliy, could you elaborate on this? How do you do it exactly?

1 Like

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>

5 Likes

Hi Aviv, for areas where you need to pull CMS field data in the code, how did you approach this in writing the code that you put in the text file?

Just wrote a blog on how to circumvent that: Overcome Webflow custom code 10000 character limit with CloudFlare CDN

1 Like

Veer,

Thank you so much, bro. Your method has saved me a lot of time, and its really easy to maintain the whole code now. A big thanks :pray:

1 Like

A workaround I wrote a blog about: Overcome Webflow custom code 10,000 character limit with CloudFlare CDN

Maybe this will help a few people.

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>