Add a screenshot for the end result

docs/source/examples/Widget Custom.ipynb

@@ -93,7 +93,7 @@
     "github_project_name []: ipyemail\n",
     "github_organization_name []: \n",
     "python_package_name [ipyemail]:\n",
-    "npm_package_name [ipyemail]:\n",
+    "npm_package_name [ipyemail]: jupyter-email\n",
     "npm_package_version [0.1.0]:\n",
     "project_short_description [A Custom Jupyter Widget Library]: An Custom Email Widget\n",
     "```\n",
@@ -124,7 +124,7 @@
     "\n",
     "You also need to enable the widget frontend extension.\n",
     "\n",
-    "If you are using JupyterLab:\n",
+    "If you are using JupyterLab 2.x:\n",
     "\n",
     "```bash\n",
     "# install the widget manager to display the widgets in JupyterLab\n",
@@ -134,7 +134,7 @@
     "jupyter labextension install .\n",
     "```\n",
     "\n",
-    "If you are using the classic notebook:\n",
+    "If you are using the Classic Notebook:\n",
     "\n",
     "```bash\n",
     "jupyter nbextension install --sys-prefix --symlink --overwrite --py ipyemail\n",
@@ -467,14 +467,27 @@
     }
    },
    "source": [
-    "## Test"
+    "## Test\n",
+    "\n",
+    "First, run the following command to recreate the frontend bundle:\n",
+    "\n",
+    "```bash\n",
+    "npm run build\n",
+    "```\n",
+    "\n",
+    "If you use JupyterLab, you might want to use `jlpm` as the npm client. `jlpm` uses `yarn` under the hood as the package manager. The main difference compared to `npm` is that `jlpm` will generate a `yarn.lock` file for the dependencies, instead of `package-lock.json`. With `jlpm` the command is:\n",
+    "\n",
+    "\n",
+    "```bash\n",
+    "jlpm run build\n",
+    "```"
    ]
   },
   {
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "You should be able to display your widget just like any other widget now:\n",
+    "After reloading the page, you should be able to display your widget just like any other widget now:\n",
     "\n",
     "```python\n",
     "from ipyemail import Email\n",
@@ -706,6 +719,15 @@
     "```"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The end result should look like the following:\n",
+    "    \n",
+    "![end-result](./images/custom-widget-result.png)"
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},