OptionalcommentReplace the entire comment thread component UI with a custom implementation by passing a function. Or customize it partly by passing an object configuration.
The UI customization function is invoked when the SDK is ready to render a comment thread.
Fully replace the comment thread UI:
NutrientViewer.load({
// ... Your configuration.
ui: {
commentThread: (instance, id) => ({
render: (params) => {
// Return a DOM Node
const div = document.createElement("div");
div.innerText = `This is a custom UI for the comment thread: ${id}`;
return div;
},
}),
},
});
Customize the header slot within comment thread:
NutrientViewer.load({
// ... Your configuration.
ui: {
commentThread: {
header: () => {
return {
render: () => {
const div = document.createElement("div");
div.style.backgroundColor = "lightgreen";
div.style.padding = "5px";
div.innerText = "This is a custom header for the comment thread.";
return div;
},
};
},
},
},
});
OptionalsidebarUI Customization for custom sidebars. Use this to render a custom sidebar by passing a function.
Adding a custom sidebar myCustomSidebar:
NutrientViewer.load({
// ... Your configuration.
ui: {
sidebar: {
myCustomSidebar: (instance, id) => ({
render: (params) => {
const div = document.createElement("div");
div.innerText = "This is my custom sidebar!";
div.style.padding = "10px";
div.style.color = "#ccc";
return div;
},
}),
},
},
});
UI Customization configuration.
Use this to customize various components of the SDK’s user interface.
Example
Fully replace the comment thread UI:
Example
Customize a slot within comment thread:
See