Skip to main content

Using the Widget on a Private Knowledge Box

Direct Access​

To use the widget on a private Knowledge Box, you will need to provide extra attributes in the HTML snippet:

  • apikey: In the Nuclia Dashboard, go to the left navigation bar and click on API Keys and add a Member API key.
  • state: Set it to PRIVATE.
  • account: The account slug (the part of the URL after https://nuclia.cloud/at/).
  • kbslug: The Knowledge Box slug (the part of the URL after https://nuclia.cloud/at/<account-slug>/).

Example:

<script src="https://cdn.nuclia.cloud/nuclia-video-widget.umd.js"></script>
<nuclia-search-bar
  knowledgebox="0b445287-c465-412d-9630-8ae30c1668fc"
  account="eric"
  kbslug="mykb"
  state="PRIVATE"
  apikey="<API-KEY>"
  zone="europe-1"
  features="permalink"
></nuclia-search-bar>
<nuclia-search-results></nuclia-search-results>
warning

Do not publish a private Knowledge Box widget on a public website. The HTML snippet contains an API key allowing read access on the full Knowledge Box content.

Using a proxy​

To maintain the privacy of your Knowledge Box while using the widget on a public website, you can set up a proxy.

The proxy will add the API key to the request header before forwarding the request to Nuclia. This way, the call is authenticated without exposing the API key in your frontend code.

Here is a sample Nginx proxy configuration:

server {
  listen 0.0.0.0:8000;

  location /api {
    proxy_set_header X-NUCLIA-SERVICEACCOUNT 'Bearer <YOUR_API_KEY>';
    proxy_pass https://europe-1.nuclia.cloud;
    proxy_ssl_session_reuse off;
    proxy_cache_bypass $http_upgrade;
    proxy_redirect off;
    proxy_buffering off;
  }
}

The widget can use it by declaring your proxy as the backend, and setting the proxy attribute to true. The HTML snippet will then look like:

<nuclia-search-bar
  knowledgebox="<YOUR_KNOWLEDGEBOX_ID>"
  backend="http://0.0.0.0:8000/api"
  proxy="true"
></nuclia-search-bar>

You can also use the proxy from your own frontend code:

import { Nuclia } from '@nuclia/core';

const nuclia = new Nuclia({
  knowledgebox: '<YOUR_KNOWLEDGEBOX_ID>,
  backend: 'http://0.0.0.0:8000/api',
  proxy: true,
});

See a full demo here.