Great you're using React! We're also (happy and heavy) users of React. In fact (as you noticed), the API of the library was inspired by React, i.e.

WolframNotebookEmbedder.embed(url, container);

is intentionally similar to

ReactDOM.render(component, container);

While the embedder library doesn't expose a React component (yet; or maybe it will be another little library that does that at some point), it's definitely meant to allow usage in conjunction with React, and it should be straight-forward to do so. You'd create a wrapper component that renders a single <div> which the notebook can be embedded into, much like described here: https://reactjs.org/docs/integrating-with-other-libraries.html#how-to-approach-the-problem (just call this.embedding = WolframNotebookEmbedder.embed(url, this.el) in componentDidMount and this.embedding.then(nb => nb.detach()) in componentWillUnmount, instead of the jQuery calls in the example there).

In terms of installing the library, using npm (or Yarn) is the right way to go if you have a build/bundle process anyway (which you do, if you're using Create React App). I would only use script tag/CDN-based approach if I didn't have such a process (e.g. in light-weight examples).

I'm not sure why npm install didn't work for you. Attaching the logs would be useful. I just tried in a fresh CRA project, and

npm install --save wolfram-notebook-embedder

works fine for me.

Not entirely sure why I had to import like this (new to React), but if anyone stumbles upon this - I indeed got this working using a CRA with react:17.0.1, react-dom:17.0.1, and wolfram-notebook-embedder:0.2.1 :

import React from 'react';
import * as WolframNotebookEmbedder from 'wolfram-notebook-embedder';

class NotebookEmbed extends React.Component {

  componentDidMount() {
    this.embedding=WolframNotebookEmbedder.embed('https://www.wolframcloud.com/obj/jpoeschko/Public/BasicExample.nb', this.el);
  }

  componentWillUnmount() {
    this.embedding.then(nb => nb.detach());
  }

  render() {
    return <div className="NotebookEmbed" ref={el => this.el = el} />;
  }
}

export default NotebookEmbed;

Thanks for your feedback, Luc!

Spot-on regarding the closing >. We'll fix that.

The point of the image on the first page is really just a "teaser" and overview of how the library operates; it's (deliberately) not even the complete HTML code for what you see on the right. More examples are on https://reference.wolfram.com/language/WolframNotebookEmbedder/examples/ and it should be easy to copy and paste code from there. The first example is intentionally simplistic to focus on the very basics; the following ones add a bit more complexity.

I agree that using a more sophisticated notebook (such as the Astronomy Clock shown on the landing page) would perhaps be more impressive, but at the same time, it wouldn't change the actual HTML or JS code, so there's a trade-off with distracting from what's essential for embedding... So I think we'll add another "neat" example.

In general, I agree we could and should add many more examples. Of course, since it's open source, anyone's welcome to help: Just open a pull request with changes to https://github.com/WolframResearch/wolfram-notebook-embedder/blob/master/website/pages/en/examples.js

Regarding your code: When I try to open https://www.wolframcloud.com/obj/luc.barthelet/mynotebook.nb I only get a 404 page. Maybe the notebook is not public? (Being public is a prerequesite for a notebook to be embeddable.) Also, instead of

<script                         
WolframNotebookEmbedder.Embed('https://www.wolframcloud.com/obj/luc.barthelet/mynotebook.nb',
document.getElementById('notebookContainer')
);></script>

you'll need

<script>
WolframNotebookEmbedder.embed(
    'https://www.wolframcloud.com/obj/luc.barthelet/mynotebook.nb',
    document.getElementById('notebookContainer')
);
</script>

(note the closing > and .embed instead of .Embed). Please let us know if you still run into problems after these changes.

It would be good if the Wolfram Notebook Embedder was installed on the Wolfram Community website and automatically worked for the Mathematica Stack Exchange.

And what would be really nice if it worked with Facebook and LinkedIn so as to make embedding Notebooks as easy as possible.

Yes, integrating notebooks in Wolfram Community using this embedder library is already in progress. We're also working on an oEmbed endpoint, which will help e.g. with WordPress and maybe even Stack Exchange (?).

Could this also be used to render static HTML of notebooks in Github repositories.

Good point, and yes, potentially – although the library itself is mostly about interactive rendering (on the client side). To retrieve static HTML for a (cloud) notebook, we have the /statichtml API described here: https://reference.wolfram.com/language/WolframNotebookEmbedder/docs/ServerSideRendering/

The primary purpose of this API is to speed up loading of embedded notebooks and to help with SEO, though. E.g. it currently doesn't include the content of all cells (only up to a certain vertical threshold, plus simple textual cells). We'll expand this in the future.

I'd like to render arbitrary chunks of Mathematica code, but don't necessarily want to make a cloud notebook for each one.

This should be addressed by the on-the-fly notebook rendering API (maybe of the form https://www.wolframcloud.com/nb?url=...) that I mentioned above. It could also take literal notebook content (a notebook/cell/box expression) as an argument, e.g. https://www.wolframcloud.com/nb?content=.... I won't make any promises when it's going to be there, but it's definitely something we want as well.

In the meanwhile, you could build something a bit like this API yourself, generating a cloud object based on the content expression passed in. You could use a hash of the expression as an identifier, avoiding unnecessary duplication. The API would return the final cloud object URL, which you could then feed into the embedder library. You could enable rather long (browser) caching for the API so it wouldn't have to be executed on every visit. Just be aware that there are some security challenges with this (e.g. you'd have to make sure there are no dangerous Dynamics in the notebook created under your account).

Currently, you get charged cloud credits for any kernel evaluations the notebook needs, e.g. to resolve a Dynamic or to update a Manipulate after moving a slider. Just viewing a notebook without any dynamic content (e.g. a notebook with only text in it) would not consume any credits.

This page has some relevant numbers: https://www.wolfram.com/cloud-credits/

You can see your currently available number of credits by evaluating $CloudCreditsAvailable (either in the cloud or on desktop).

That being said, the way we charge credits in deployed notebooks will change rather soon (to the better!): Dynamics and interactivity up to a certain (rather generous, per-viewer) limit will be free, and beyond that you'll be able to choose whether you actually want to pay credits or offer the viewer different options (e.g. they could sign in and make their own copy of the notebook, thus not consuming your credits). More details coming when we're closer to making this change.