Skip to main content

Widgets features

The Nuclia widgets allows you to embed the Nuclia search experience directly into your website or web application through a simple HTML snippet:

<script src="https://cdn.nuclia.cloud/nuclia-video-widget.umd.js"></script>
<nuclia-search-bar
  knowledgebox="YOUR-KB"
  zone="ZONE"
  features="answers,filter"
></nuclia-search-bar>
<nuclia-search-results></nuclia-search-results>

The easiest way to explore the different features of the widgets is to use the Nuclia Dashboard in the Widgets section and to play with the different options.

The Embed widget button will generate the HTML snippet for you.

Widget types​

There are 3 different types of widgets:

  • Embedded in page: the search input is embedded in a page and the results are displayed under the input. Once the initial answer is displayed, the user can click on Ask more to access the full chat interface. Note: For the correct reading of the results, the width of the widget container should not be less than 384px.

    Web components:

    <nuclia-search-bar></nuclia-search-bar>
    <nuclia-search-results></nuclia-search-results>

  • Chat mode: displays directly the full chat interface.

    Web component:

    <nuclia-chat></nuclia-chat>

  • Popup modal: the search inout and the results are displayed in a popup modal.

    Web component:

    <nuclia-popup></nuclia-popup>

The features parameter​

The features parameter allows you to customize the behavior of the widget. It is a comma-separated list of features among the following:

  • filter: display a filter dropdown in the search bar.
  • navigateToFile: open the file in the browser when clicking on the result (by default, the file is displayed in the viewer).
  • navigateToLink: open the link in the browser when clicking on the result (by default, the link is displayed in the viewer).
  • permalink: add the search query and criteria to the URL, allowing the widget to re-render the same results upon loading.
  • relations: display an info card on the right side of the widget listing all the relations of the entity mentioned in the user query.
  • suggestions: display a list of suggested resource titles matching the user input.
  • suggestLabels: display a list of suggestions based on the labels when the user starts typing in the search bar.
  • autocompleteFromNERs: display a list of suggestions based on the NERs extracted from the user query when the user starts typing in the search bar.
  • displayMetadata: display the metadata associated with the resource in the result rows.
  • answers: trigger the answer generation process when the user makes a search.
  • hideResults: hide the search results, only the generative answer will be displayed.
  • hideThumbnails: hide the thumbnails associated with the resource in the result rows.
  • displayFieldList: display a section listing all the fields of the resource in the right sidebar of the viewer. This section is only visible for resources containing multiple fields.
  • autofilter: detect entities mentioned in the user query and turn them automatically into filters. If no results are found, the filter is removed and a second search is performed.
  • citations: include citations in the generative answer.
  • rephrase: rephrase the user question in order to optimize the quality of the search results.
  • debug: display extra buttons to download the last request full log of the debug metadata returned by the API. It must not be used in production.
  • preferMarkdown: require the generative answer to be formatted in Markdown.
  • openNewTab: open the link in a new tab when clicking on the result.
  • orFilterLogic: use the OR logic for filters instead of the default AND logic.
  • noChatHistory: the previous questions and answers in the chat mode will not be passed as context when generating a new answer.
  • showHidden: display hidden resources in the search results.
  • showAttachedImages: display images attached to the matching paragraphs in the search results.

Other parameters​

  • backend: the URL of the backend to use. Useful if you use your own proxy to access the Nuclia API.
  • zone: the zone to use.
  • knowledgebox: the Knowledge Box id.
  • placeholder: the text displayed in the search bar when it is empty.
  • lang: the language of the widget. Currently supported: ca, fr, en, es. Default: en.
  • apikey: the API key to use. It is not recommended to use it in production (the API key is meant to be injected by your proxy).
  • account: the account id.
  • state: the publication state of the Knowledge Box.
  • standalone: set to true when using a standalone NucliaDB instance.
  • proxy: set to true when using a proxy to access the Nuclia API.
  • mode: set to dark to display the widget in dark mode.
  • filters: define the filters offered to the user in the search bar among labels, entities, created and labelFamilies.
  • preselected_filters: define filters that will be applied by default to any query.
  • cssPath: the path to the CSS file to use to customize the widget style.
  • prompt: the prompt to use for the generative model. It must use {context} and {question} variables.
  • system_prompt: the system prompt to use for the generative model.
  • rephrase_prompt: the prompt to use when optimizing the user query to get the best search results.
  • generativemodel: the generative model to use for the answer generation.
  • rag_strategies: the RAG strategies to apply to the retrieved paragraphs.
  • rag_images_strategies: the RAG strategies to apply to the retrieved images.
  • not_enough_data_message: the message to display when there is not enough data to generate an answer.
  • ask_to_resource: the resource ID to use as context for the generative model.
  • max_tokens: the maximum number of input tokens to put in the final context (including the prompt, the retrieved results and the user question).
  • max_output_tokens: the maximum number of tokens to generate.
  • max_paragraphs: the maximum number of paragraphs to pass in the context to the generative model (default: 20).
  • query_prepend: the hard-coded text to prepend to the user query.
  • json_schema: the JSON schema to use to get a JSON answer from the generative model.
  • vectorset: the embedding model to use for the semantic search.
  • chat_placeholder: the placeholder to display in the chat input.
  • audit_metadata: custom metatada to add in API calls for auditing purposes.