Type Parameters
Properties
onMount
Invoked once at the slot's mount point.
For most slots, this fires once the SDK instance is available. loader
and passwordPrompt fire at raw mount because they can live entirely
before an instance exists.
Use it for setup tasks such as attaching event listeners or firing
analytics events. Do not rely on the DOM node returned from render being
inserted yet.
Example
Triggering action when the comment thread is mounted:
NutrientViewer.load({
// ... Your configuration.
ui: {
commentThread: (getInstance, id) => {
const div = document.createElement("div");
return {
render: (params) => {
// Return a DOM Node.
div.innerText = `This is a custom UI for the comment thread`;
return div;
},
onMount: (id) => {
console.log(`Comment thread mounted with id: ${id}`);
// You can add event listeners or perform other setup actions here.
},
};
},
},
});
See Also
onUnmount
Invoked once when the slot is torn down.
For most slots, this pairs with the instance-aware onMount. loader
and passwordPrompt pair with raw mount timing.
It is guaranteed to run on teardown even when onMount was deferred because
the instance never became available, so setup done in the callback body
(timers, listeners) always has a cleanup path. Guard instance-dependent
cleanup, as getInstance() may still return null.
Use it for cleanup tasks such as removing event listeners, etc.
Example
Triggering action when the comment thread is unmounted:
NutrientViewer.load({
// ... Your configuration.
ui: {
commentThread: (getInstance, id) => {
const div = document.createElement("div");
return {
render: (params) => {
// Return a DOM Node.
div.innerText = `This is a custom UI for the comment thread`;
return div;
},
onUnmount: (id) => {
console.log(`Comment thread unmounted with id: ${id}`);
// You can remove event listeners or perform other cleanup actions here.
},
};
},
},
});
See Also
render
The render function is called whenever any params change that may affect the UI and expects a DOM element to be returned.
The returned DOM Node from render will be placed into the specified slot.
This may be called any number of times.
You should treat this as a pure function and always return a DOM element based on the current params.
Return null to hide the slot. For a slot with default UI (a toolbar, the
comment thread, etc.) this removes that default UI. For a confirmation
dialog slot (UI.DialogSlot) returning null instead cancels/dismisses
the dialog — its non-destructive default — rather than leaving it pending;
to answer such a dialog without a prompt use autoResolve instead.
Example
Using render to provide a custom comment thread UI:
NutrientViewer.load({
// ... Your configuration.
ui: {
commentThread: (getInstance, id) => {
return {
render: (params) => {
const div = document.createElement("div");
// Return a DOM Node.
return div;
},
};
},
},
});
Use a slot configuration to customize rendering and work with lifecycle methods. You can think of slots as predefined placeholders in the Web SDK UI where you can place your custom UI. The slots themselves might have a default UI, which can be replaced with a custom one, or they might be empty, enabling you to insert your own UI.