The new Wolfram Notebook Embedder library is pretty cool, and I've been using it a lot for various things. One of those things is making the embedder easy to use by having it be applied from a template to form data supplied in a form.
I understand it's a bit silly to embed a cloud notebook in cloud hosted HTML, but it's got some utility as a proof-of-concept for some bigger, more complex thing.
Anyway, here's what I did:
Create the template
You can import some HTML that contains the <script>
tag used to get the embedder library, along with whatever slots you want the template to fill:
(*HTML*)
<!DOCTYPE html>
<html>
<head>
<title>Basic Example</title>
<script crossorigin src="https://unpkg.com/wolfram-notebook-embedder@0.1/dist/wolfram-notebook-embedder.min.js"></script>
</head>
<body>
<h1>A Basic notebook with a Manipulate</h1>
<h2>Created by: <wolfram:expr>$WolframID</wolfram:expr></h2>
<div id="container"></div>
<script>
WolframNotebookEmbedder.embed( "<wolfram:slot id='url' />", document.getElementById('container'), {allowInteract: true});
</script>
</body>
</html>
Note the TemplateSlot
with the id 'url'
...
Create the template after import:
html = XMLTemplate[
Import[FileNameJoin[{NotebookDirectory[], "body.html"}], "String"]]
Create the form
The body of FormFunction
is where you're going to stash TemplateApply
to take the user-provided string and inject it into the corresponding TemplateSlot
:
form = FormFunction[
"url" -> <|
"Hint" -> "Insert path to cloud notebook",
"Interpreter" -> "String",
"Label" -> "CloudObject link"
|>,
TemplateApply[html, <|"url" -> #url|>] &,
AppearanceRules -> <|
"Title" -> "Embed your Cloud Notebook!",
"Description" ->
"Use the Wolfram Notebook Embedder library to embed your cloud \
notebook into an HTML webpage",
"SubmitLabel" -> "Embed"
|>
]
Deploy the form
Deploy the form with whatever permissions you want:
CloudDeploy[form, "embedForm", Permissions -> "Private"]
Embed a cloud notebook!
Here's the published notebook that will be embedded:
Give the link to the form:
Embed and enjoy!