▼
Streaming live at 10am (PST)

Page's Custom Code 10,000 Character Limit Reached 👎

Design help Custom code
#1

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?

#2

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>
1 Like
#3

Nice! Good to hear it was helpful @vitaliyg !

1 Like
#4

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
#5

Thanks @gvdias! Will check it out!

#6

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

#7

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

#8

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:

#9

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