Streaming live at 10am (PST)

Custom Code Character Limit *WORKAROUND*

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’

  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’

  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.

13 Likes

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!

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)

2 Likes

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

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…

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.

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

You’re the best! Thanks!

1 Like

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

Fleuri

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