Skip to main content

Customize the widget

Customize the widget style​

The Nuclia widget is provided as a set of web components. Each of them live in its own shadow root, so they cannot be styled from outside.

If you want to customize the widget style, like changing the font size, the font family, the colors, etc., you need to inject your own CSS in the corresponding widget tag. You must use the cssPath attribute to pass the path to your CSS file.

In this example, we are customizing the nuclia-search-results widget:

custom.css:

.sw-paragraph-result {
  color: #579aca;
}
.thumbnail-container {
  width: 50% !important;
}
<nuclia-search-bar
  knowledgebox="YOUR-KB"
  zone="ZONE"
  features="answers,filter"
></nuclia-search-bar>
<nuclia-search-results cssPath="./custom.css"></nuclia-search-results>
note

If the CSS attribute you are trying to set is already defined in the widget, your CSS will override it only if you use !important (like the .thumbnail-container width in the example above).

Re-use the Nuclia widget components​

Thanks to the Nuclia UI starter kit, you can set up a Svelte project providing the Nuclia widget components.

You can use it to build your own version of the search widget, changing its style, or overriding its components.

Build your own app widget​

You can also build your own custom widget with your favourite frontend framework by using the Nuclia JavaScript/TypeScript SDK.

If needed, you can get inspiration from the Nuclia widget source code.