Another variation of the 10000 character limitation for custom code issue

Design help Custom code
1

Hey guys, yes, I know this topic has come up quite a bit. But I have new version of the problem I think.

I’m trying to display an onchain Cardano NFT on my home page. I’ve done my best to follow the suggestions of helpful community members here, but it is still not working.

The NFT needs to be displayed in an iframe. I’ve coped the HTML from the site and pasted it into a text file as suggested. Uploaded that to the assets folder in webflow and then embedded the code on the home page.

Here is the page where the NFT is stored:

This is the embedded code that I tried after realizing that you cannot include HTML code in the test file.
iframe src=“https://uploads-ssl.webflow.com/61d4f88c6eed94bacd280641/63d00a8a9a6009e40ffcd245_Block%20Clock%20062.txt”></iframe

Thanks for any help!

2

Use script to load the content into the src attribute.

Here’s an approach;

Put the URL of your uploaded txt file into a custom attribute called load-src;

<iframe 
  load-src="https://uploads-ssl.webflow.com/61d4f88c6eed94bacd280641/63d00a8a9a6009e40ffcd245_Block%20Clock%20062.txt" 
  style="border:0;width:100vw;height:100vh" 
  sandbox="allow-scripts" 
  allow="geolocation;magnetometer;gyroscope;accelerometer"></iframe>

Then add this script to your </body> page custom code.
It will look for IFRAMEs with that attr, AJAX-load the content, and then embed it in your src attr.

<script>
$(function() {

 $("iframe[load-src]").each(function() {
    
    const nftUrl = $(this).attr("load-src");
    const $iframe = $(this);
    
    $.get(nftUrl, function (data) {
      $iframe.attr("src", data);
    });
 
  });

});
</script>
3

Thanks so much, I got it working! You can view it here: