Log in Sign up

HTML Widget not rendering but works in CodePen

In CodePen the HTML snippet draws the widget with correct information, but when I paste the code to my Markdown page nothing renders. I can see the code is written on the page via Developer Mode, but it's getting a 400.

The widget is from Literal.club and it has the following code:

<div id="literal-widget" handle="<MY_HANDLE>" status="IS_READING" layout="list"></div>
<script src="https://literal.club/js/widget.js"></script>

I've used Substack iframes and they work fine.


2 years ago, 5 replies   bug   resolved   Edit question

Is your text editor possibly modifying the quotation marks in the embed code? Can you post a link to a page on your site with this embed?

Answered 2 years ago · Edit answer

Here is the page, embed should be under the text. Let me know if I've made any stupid mistakes. https://alidoes.xyz/now

Thanks for the help!

Answered 2 years ago · Edit answer

This is the error I see in the developer console on your site:

{"errors":[{"message":"Variable \"$readingStatus\" of non-null type \"ReadingStatus!\" must not be null.","extensions":{"code":"BAD_USER_INPUT"}},{"message":"Variable \"$handle\" of non-null type \"String!\" must not be null.","extensions":{"code":"BAD_USER_INPUT"}}]}

It looks like Blot's markdown parser is adding data- prefixes to your HTML for some strange reason. This is a bug, which I will investigate and fix – sorry about this

Answered 2 years ago · Edit answer

It seems like this is intentional behaviour from my markdown converter.

Try using this embed as a workaround for now:

<div id="literal-widget" handle="ali_a" status="IS_READING" layout="list"></div>
<script type="text/javascript">
var widget = document.getElementById('literal-widget');
['handle', 'status', 'layout']
  .forEach(attr => widget.setAttribute(attr, widget.getAttribute('data-' + attr)));
</script>
<script src="https://literal.club/js/widget.js"></script>
Answered 2 years ago · Edit answer

Awesome, thanks for looking into this. Workaround fixed the issue :D

Answered 2 years ago · Edit answer