Writing Widgets for NodeBB

See the original blog post for
a high level overview and screenshots of the widget system.

Embedding HTML and JavaScript

You don't need to be a developer to figure this out. Head over to the
Themes control panel and click on the Widgets tab. Create a new HTML
widget by dragging and dropping the widget onto whatever template you
want.

Copy and paste HTML or JavaScript into the widget and hit save - you're
done!

You can optionally give your widget a container by dragging and dropping
from the containers section onto your selected widget.

If you're looking for some sample scripts, head over to our plugins
section and look
for any topic labelled nodebb-script-xyz. Don't forget to submit your
scripts and ideas as well!

Creating Widgets

You can define widgets in both plugins and themes. If you're building a
plugin which simply delivers a widget (or collection of widgets), we
strongly suggest you follow the nodebb-widget-xyz nomenclature instead
when publishing.

Content defines the form that is displayed to customize your widget in
the admin panel.

Listening to your widget

NodeBB core will call your widget on the appropriate page load by way of
the hooks system. The hook will be named after your widget's namespace
(see previous example) - like so:
filter:widget.render:widget_namespace

This will pass in a widget object with the following useful properties:

Defining Widget Areas in Themes

A Widget Area is characterized by a template and a location. Themes can
share widgets if they define the same Widget Areas. If an admin switches
themes, widgets that were previously defined in a Widget Area
incompatible with the new theme are saved.