HTML Embed issues with character limits

[RyanUK (Ryan)]

I am trying to embed HTML quiz. I love many aspects of Webflow, however, I find some things like character limits on embeds very frustrating.

I am trying embed a HTML quiz. It has well over the character limit. So, I read this thread:

HTML Embed - SVG Code Too Long

I would not suggest hosting on dropbox and such. Seriously impacts load times. Try to host on cdnjs.com or jsdelivr. (google and see how to) to use that script in your webflow project. You would just need to drop a html embed where you need it to appear and reference the script like this; <script src="//cdnjs.com/path-to-your-script.js" type="text/javascript"></script> Thats all.

If I upload my HTML file on Amazon S3, will I be able to embed it in the same way as Dropbox? If so, can someone please help me with script or code needed?

If my file is abc1.com/quiz.html then what is the exact script I need to insert into Webflow for it to show the file on abc1.com/quiz.html ?

I tried to do it many ways, but I couldn’t figure it out. Thanks.

[Fonsume]

Just put the script in a .txt file and upload that to your asset manager in Webflow, then find the link to the file (small arrow next to the file name). Like I’ve done with my test.txt here:

Code is literally what you quoted:

<script src="URL TO THE TEXT FILE" type="text/javascript"></script>

[RyanUK (Ryan)]

Okay, I am going to try that right now. If that works, that would be awesome.

FYI, I figured out how to embed via HTML from Amazon S3/Cloudfront. But your solution could be much better.

Thank you.

[RyanUK (Ryan)]

@Fonsume

<script src="URL TO THE TEXT FILE" type="text/javascript"></script>

I have done what you said, but where the the embed should appear, it’s just a white space, so I assume I made a mistake somewhere along the line. I am wondering, regarding this script:

as I am embedding HTML quiz, should it be:

Or something else?

Thank you.

[Fonsume]

It’s a bit hard to understand exactly what you’re trying to do without seeing the site preview and at least some of what you’re trying to embed.

If you’re trying to embed an entire HTML file then that’s probably not going to work. I haven’t tried it though. You’re going to need to embed the actual code.

When trying to embed a bunch of HTML you can just put everything in a standard text field and run something like this in the custom code field for the page:

 <script>
    var embedId = "YOUR TEXT FIELD ID HERE";
    var target = document.getElementById(embedId);
    var targetText = target.innerHTML;

    function decodeField(target) {
        var dText = he.decode(target);
        document.getElementById(embedId).innerHTML = dText;
    }
    decodeField(targetText);
</script>

This should render it out correctly.

[RyanUK (Ryan)]

@Fonsume

 <script>
    var embedId = "YOUR TEXT FIELD ID HERE";
    var target = document.getElementById(embedId);
    var targetText = target.innerHTML;

    function decodeField(target) {
        var dText = he.decode(target);
        document.getElementById(embedId).innerHTML = dText;
    }
    decodeField(targetText);
</script>

Here are the files. They are both the same file. I realise I have not made your job easy. Thank you for trying. It’s not too much of an issue if it’s not possible because I can embed via amazon.

Temp Share

[webdev (Jeff S)]

That script depends on an external JavaScript library called he which would need to be loaded to decode the document.

[Fonsume]

My bad - and good catch!

[webdev (Jeff S)]

I used it again this week so I know it’s available at cdnjs.com or jsdelivr.com

<script src="https://cdn.jsdelivr.net/npm/he@1.2.0/he.min.js"></script>

[Fonsume]

Put the highlighted script part:

Into a .txt, upload it like I described before.

Then embed the rest in a normal embed on the site (it’s now under the limit, hooray), but with the .txt put in like mentioned earlier:

<script src="THE URL TO YOUR SCRIPT .TXT HERE" type="text/javascript"></script>

Like so:

Result:

[RyanUK (Ryan)]

Thank you. Which Javascript library do you recommend as I will be using a lot of quizzes. The one that people recommend https://cdnjs.com I couldn’t find a link to sign up on their website. Plus no pricing info.

I’ll try it.

[webdev (Jeff S)]

That is a resource site that is free to use when you need to include a library in your project.

[RyanUK (Ryan)]

I wanted to thank you and say that I finally got time to look at it properly, and you instructions helped me a lot.

[RyanUK (Ryan)]

Hi, I may be being stupid, but I can’t figure out how to register with cdnjs.com and how to upload instructions. Am I missing something obvious? Are you supposed to be able to upload files to this site by registering? If so, how do I register. I have been going around in circles. Thank you.

[webdev (Jeff S)]

@RyanUK - I think you may be confused about what cdnjs is. It Is a service that hosts many JavaScript libraries so you don’t have to. Once you figure out which library you want to use on a project, you can then go back and check to see if it’s hosted. If it is then you can use it. If not you find another source or host yourself.

[RyanUK (Ryan)]

Thanks. I think I understand now.