Get the library

Go to the relevant HTML file and enter the following to import the library with a cross-origin request:

<script crossorigin src="https://www.wolframcdn.com/notebook-embedder/0.1/wolfram-notebook-embedder.js"></script>

Use the library

Create a container where you want to render the notebook in the HTML file:

<div id="notebookContainer"></div>

Embed a notebook into the given DOM node:

WolframNotebookEmbedder.embed(
    'https://www.wolframcloud.com/obj/user/Published/basic-example.nb',
    document.getElementById('notebookContainer'),
    {allowInteract: true}
)

This Workflow uses npm and webpack. For more detailed information about webpack, refer to their documentation.

Verify that Node.js is installed

Call node -v from the command line:

$ node -v
v9.11.1

• If Node.js is not installed, visit their website to download and install.

Set up the project

Create a directory that holds all of the files and change into that directory:

$ mkdir wolfram-notebook-webpack && cd wolfram-notebook-webpack

Initialize npm with defaults:

$ npm init -y

Install webpack locally:

$ npm install webpack --save-dev

Install the webpack-cli to run webpack on the command line:

$ npm install webpack-cli --save-dev

Create a project structure that looks like the following:

wolfram-notebook-webpack
    |- package.json
    |- package-lock.json
    |- /node_modules
    |- /src
        |- index.js
    |- /dist
        |- index.html

Get the library

Install the library locally into the parent wolfram-notebook-webpack directory with npm:

npm install --save wolfram-notebook-embedder

Use the library

Change into the distribution subdirectory:

$ cd dist

Open index.html and create a container where you want to render the notebook:

<div id="notebookContainer"></div>

Change into the source subdirectory:

$ cd ../src

Open index.js, import the library and embed a notebook into the given DOM node:

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

WolframNotebookEmbedder.embed(
    'https://www.wolframcloud.com/obj/user/Published/basic-example.nb',
    document.getElementById('notebookContainer'),
    {allowInteract: true}
)

Create the build

Change into the parent directory:

$ cd ..

Open the package.json file and change the value of the “dependencies” key to the following:

"dependencies": {
    "wolfram-notebook-embedder": "^0.1.5"
}

Use npx to create the build:

$ npx webpack