Embed free cloud notebook in web page

Question

I want to add interactivity to my web pages via the cloud, but don't want to use the buggy, expensive cloud-notebook-only paradigm. I'd much prefer to use static HTML and JS.

Can I load a cloud notebook into an otherwise static page?

Can I do for free because I am cheap?

Answer 1

Fun Example

I've made use of that here.

I stuck the notebook in an accordion with an opener-thumb so I could generally display the page with it closed:

But people reading the tutorial can click on the thumb to open a notebook in which to run the code:

---

Explanation

Yes! And it's easy!

The trick is to use the notebook that gets loaded here:

"https://sandbox.open.wolframcloud.com/app/view/newNotebook"

And once we have that it's incredibly simple to just make an iframe that wraps this. Add this to a notebook (with appropriate tweaks for positioning and sizing) and you'll have a little pane where your users can run your code.

<div style="width: 100% px; height: 400px; position: relative; overflow: hidden;">
    <iframe 
        src="https://sandbox.open.wolframcloud.com/app/view/newNotebook"
        style="position: absolute; left:-2px; top: -85px;"
        width="100%" height="485px "
        >
    </iframe>
</div>

I set up an example page that does this:

markdown=
Uncompress@
"1:eJxlU1FvmzAQ7sP+wP7BlWrSWiVAWLtVJKk0TZq0SZu2Zm8sDwaO2CvYCF8CWdX/vjOMsGpIBn/H+e777s7nqbnfvHxxdrYiRSXewRdBEitBKhPwUeV5ibAKhn8/w0W0KpV+gAbLtWfpWKKViOSBbLBYe5KotnEQtG3rt6YsGlFlpdnnfmaqoEEbuND8yawNWqkI/Uppn5E3xO4j3gG7a0JN8AiVaHZKxxDd1B08MZPBxXm7dXFxsRFVzRyFti020CqSoLRFgg8uM3w1hKkxD0AGCC2B0ePhK5LKng4KC7URmcQcisZUkEhscPt6lFRNZfEtiewBu0wKvcNemwgWb6MoXARvbqPw5vJqTAH964dEUDkKMAX0OXOT7SsnkPfMy+7rujwyE8BuVJM7qLgMjchIHRBqodGHTyygZhtLAasqVYqGT3KM5PNm6NZE+ZcteouvkYLLiQ4/AtZwsxxRymgRnmDG8N0J3eNOGf2tNJSMJp6RLnmf2qSDOYjtDNz+yPt0u4XVGrLZKRE8djOYR+EMovDpX/NxMm/Hap0nU7JtsjjZARjEMOpSQwN8Ve32TV9++f13W/i13g3e03uVqwP0I7P2WpWTjFlo+ArqbgkS1U5SDNdh6GBtrCJOHrvhFq7kSzAHbIrStJybK4l66Y2Tt1gpN90II3bLNtl0Byz3MDWdz+3S/18GUdfBQWEbaGzHEfWexRpIT6xEak25J2ZVYkHxPHKkydQxzG/5ciyfne61rj2n1fsrdO1dOz945jfJCQY9wz0MuGx3fwBkPkwq";

CloudExport[
 ExportString[
  MarkdownToXML@markdown /.
   XMLElement["body", b_, {a___, c_}] :>
    XMLElement["body", b,
     {
      XMLElement["div", {"class" -> "content"}, {a}],
      c
      }],
  "HTMLFragment"
  ],
 "HTML",
 "fiddle-test.html",
 Permissions -> "Public"
 ]

CloudObject["https://www.wolframcloud.com/objects/b3m2a1.testing/fiddle-test.html"]

Simply go to that URL: https://www.wolframcloud.com/objects/b3m2a1.testing/fiddle-test.html and you'll see there's a cloud notebook at the bottom you can put the code above into. And it runs! And it's free! How nice.

One thing to note is that the top-bar on a cloud notebook is ~85 px. So my set up chops it off by default.

To get a not-chopped version do this:

<div style="width: 100% px; height: 400px; position: relative; overflow: hidden;">
    <iframe 
        src="https://sandbox.open.wolframcloud.com/app/view/newNotebook"
        style="position: absolute; left:-2px; top: 0px;"
        width="100%" height="100%"
        >
    </iframe>
</div>

Or if you just want to see this in I deployed a version of this:

markdown2=
Uncompress@
"1:eJxlU1FvlEAQ7oPv/oUpjYltrsChp4Y7mhgTE0002vqG97DAcLsWdgk7d3A2/e/Oghw2kizsN8zOfN/M7Hlmbu+ePzs725CiCm/giyCJtSCVC/ioiqJC2ATjv5/hMtpUSt9Di1XiWTpWaCUieSBbLBNPEjU2DoKu6/zOVGUr6rwy+8LPTR20aAMXmj+5tUEnFaFfK+0z8sbYQ8QbYHdNqAkeoBbtTukYolXTwyMzGV2ct1sXFxd3om6Yo9C2wxY6RRKUtkjwwWWGr4YwM+YeyAChJTB6OnxFUtnTQWGhMSKXWEDZmhpSiS1uX06S6rksviWR32OfS6F3OGgTwfJNFIXL4NW7KFxdXk0pYHj9kAiqQAGmhCFnYfJ97QTynnnZfdNUR2YC2E9qCgcVl6EVOakDQiM0+vCJBTRsYylgVa0q0fJJjpF+vhu7NVP+ZcvB4muk4HKmw4+ABFbrCWWMluEJ5gzfntAt7pTR3ypD6WTiGenT95lNe7gGsV2A2x95n223sEkgX5wSwUO/gOsoXEAUPv5rPs7m7VSt83ROtk2XJzsAgxgmXWpsgK/q3b4dyi+//+5Kv9G70Xt+bwp1gGFkEq9TBcmYhYYvoOnXIFHtJMXwOgwdbIxVxMljN9zClXwN5oBtWZmOc3MlUa+9afKWG+WmG2HCbtk2n++A5R5mpve5Xfr/yyCaJjgo7AKN3TSi3pNYI+mZlcisqfbErCosKb6OHGkyTQyO/pOzg9LEc0q9vzITb5AJT/xmMcGoZryFARft5g/M5Eux";

CloudExport[
 ExportString[
  MarkdownToXML@markdown2 /.
   XMLElement["body", b_, {a___, c_}] :>
    XMLElement["body", b,
     {
      XMLElement["div", {"class" -> "content"}, {a}],
      c
      }],
  "HTMLFragment"
  ],
 "HTML",
 "fiddle-test2.html",
 Permissions -> "Public"
 ]

CloudObject["https://www.wolframcloud.com/objects/b3m2a1.testing/fiddle-test2.html"]

So if you go here: https://www.wolframcloud.com/objects/b3m2a1.testing/fiddle-test2.html you'll see the same as above, except with the top-bar on the notebook.