Embed HTML Table

[protopad]

Hi I'm very new to developing a Shopify site, I'd like to embed a leaderboard of scores that I have developed on elastic beanstalk and externally rendered as an HTML table.

URL: http://protopadsix.us-east-1.elasticbeanstalk.com/scores-html

Is there anyway in which I can embed this into a custom .liquid page? 

I've tried using fetch() or iframe but with no luck, any help very much appreciated and I apologise in advance if I've not provided enough detail to answer.

[suyash1]

@protopad - is this table dynamically updated regularly? if yes then iframe is recommended

[protopad]

Yeah the table is intended to be updated dynamically, problem is each time I attempt to add an iframe it seems to be blocked when previewing the page, on the beanstalk end, I've made the URL public and my security group allows http, https, shh traffic. Thanks for your response. 

[Kyle_liu]

I edited the custom.liquid code and found that the referenced URL crosses domains. Are you also experiencing this issue?

<iframe
          allowtransparency="true"
          frameborder="0"
          id="gnewtonIframe"
          scrolling="no"
          src="http://protopadsix.us-east-1.elasticbeanstalk.com/scores-html"
          width="100%"
          style="overflow: hidden; height: 585px;"
        ></iframe>

[protopad]

Thanks for taking the time, yeah this appears to be similar to the issue I am experiencing. 

[tim]

That's because you're including HTTP resource in HTTPS document which is a no-no.

[protopad]

Understood, what would be the best way to resolve this? thanks

[tim · Accepted solution]

I guess, the only way is to create a secure https version of your beanstalk page. 

[protopad]

Dude you're an absolute genius, after 20 hours of trial and error it worked!! thanks, iframe worked perfect once beanstalk was https secured with a custom SSL certified subdomain, very very happy

[abdullahshahid_]

Hey There,

You can also try to embed your leaderboard directly into your store using the link (or make it look like a card) using EmbedAny app. Let me know if that works easily without using liquid,