Custom Code Character Limit *WORKAROUND*

Community resources Webflow Tips
1

As you may or may not know, Webflow has a character limit on the custom code block. This can cause issue with SVG’s, or larger HTML that exceeds this limit.

But there is a workaround.

Just follow these steps:

  1. Make a GitHub account
  2. Make a new repository (call it whatever you like) and make it public
  3. Choose ‘create new file’

Screenshot 2019-07-26 at 10.42.38.png
Screenshot 2019-07-26 at 10.42.38.png1988×198 29.2 KB

  1. Copy your HTML and then paste the code into the new file.
  2. Name your file and add the extension .html (for example [repositoryname]/mycode.html)
  3. Click ‘commit new file’
  4. In your repository, open your file, and then click ‘raw’

Screenshot 2019-07-26 at 10.59.28.png
Screenshot 2019-07-26 at 10.59.28.png2006×224 35.1 KB

  1. Copy the URL of the RAW format, it should, look like this:

https://raw.githubusercontent.com/username/respositoryname/master/filename.html

  1. Go back to your Webflow page where you require the HTML and add a custom code block.
  2. Add the following code to your custom code block:

<div id="ajaxContent"></div><script> var Webflow = Webflow || []; Webflow.push(function() { $.get('YOUR COPIED LINK HERE', function(data) { $('#ajaxContent').append(data); }); }); </script>

  1. Paste your copied RAW url into the ‘YOUR COPIED LINK HERE’ section, and then press save.
  2. Publish your website and test.

I hope this helps! It’s saved me a few times, so I figured I should share it.

19 Likes
2

Hi @JSW ,

Is there a way to achieve this but hosting the html file on my own server instead of creating a Github account for my client? Thanks in advance!

3

Thank you for this @JSW !

Just to add for others who might run into problems when using this script to insert multiple HTML embeds. Make sure you use different id´s in the script, since the script is appending data into the embed (ajaxContent).

<div id="ajaxContent01"></div><script> var Webflow = Webflow || []; Webflow.push(function() { $.get('YOUR COPIED LINK HERE', function(data) { $('#ajaxContent01').append(data); }); }); </script>

<div id="ajaxContent02"></div><script> var Webflow = Webflow || []; Webflow.push(function() { $.get('YOUR COPIED LINK HERE', function(data) { $('#ajaxContent02').append(data); }); }); </script>

just make sure you name your id differently (e.g. ajaxContent01, ajaxContent02)

3 Likes
4

Hi,

As far as I’m aware, this would be possible, as long as the file had a public-facing URL (which you can put in the ‘YOUR COPIED LINK HERE’ part of the snippet).

1 Like
5

This is interesting as right now I have to incorporate a KEAP contact form supplied to me a .HTML into Webflow. How would one Host this off their own server? I have zero programming knowledge but I did follow the GitHub instructions…

6

I’ve just been asked to do the same thing, incorporating a KEAP contact form supplied as an .html file. How did you end up handling this? TIA.

7

The steps outlined by James Whitrow will work. Thanks for posting James!

If you want to keep your files inside of Webflow here’s another work around.

  1. Save your FormAssembly embed code as a .txt file
  2. Upload your .txt file to the Asset manager inside of Webflow
  3. Grab the URL of your .txt file
  4. Follow James’ step 9-11 above
3 Likes
8

You’re the best! Thanks!

1 Like
9

Hello,
Is it possible to change the color of the .svg with your solution?
Thanks

Fleuri

10

Nope, this is for implementing an SVG onto a web page. For animating an SVG check out my other guide.

11

You’re a real one, thank you!

12

Hi, it’s not working for me with a svg: https://rapidprototyping.webflow.io/ (bellow “People who trust us” at the hover image)

You can see the script at the source code but not the svg

Thanks!

13

I wrote a blog post on how to go around the 10000 character code limit on Webflow with Cloudflare CDN: Overcome Webflow custom code 10,000 character limit with CloudFlare CDN

This is basically can be hosted on your server as well.

14

That’s incredible. Thank you so much :hugs: