---
title: "Configure the knowledge base widget"
slug: "create-widget"
description: "Create a knowledge base widget in Document360 for instant access to your content, enhancing user experience without leaving your site."
updated: 2026-07-20T05:31:13Z
published: 2026-07-20T05:31:20Z
canonical: "docs.document360.com/create-widget"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.document360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Configure the knowledge base widget

A knowledge base widget is a floating interactive element that you can embed on your website or product to give users instant access to your Document360 knowledge base without leaving the page. Creating a Knowledge base widget in Document360 involves adding the widget, naming it, enabling Eddy AI if required, styling it, and copying the JavaScript snippet to install it on your site. All of these steps are performed from **Connections > Knowledge base widget** in the left navigation bar of the Knowledge base portal.

---

## When to create a widget

- You need a separate widget for a different audience, product area, or environment.
- You want a test widget to safely experiment with configuration changes before affecting your live widget.

---

## Before you begin

- You must have a **Project Owner** or **Admin** portal role.
- To use Eddy AI in the widget, enable it first in **Settings > AI settings > Eddy AI settings** before creating the widget.

---

## Create a knowledge base widget

1. In the left navigation bar, navigate to **Connections** (<span class="fa-regular fa-grid-2-plus" data-type="icon"></span>) > **Knowledge base widget**.

2. At the top-right corner of the page, click **Add widget**.

3. In the **Widget name** field, enter an appropriate name for the widget.

4. If you want Eddy AI in this widget, enable the **AI Assistive search** toggle. Once enabled, the search field appears in the preview on the right.

5. In the **Configure & connect** tab, locate the **Style widget** section and expand it to configure the widget's appearance:
   - Click **Change icon** to replace the widget icon with an image or select one from the available icons.
   - Click **Default** to revert to the default icon and color.
   - Click **Change color** to update the widget's background color.
   - Select **Left** or **Right** to position the widget icon on either side of your site.
   - Enter pixel values in **Side spacing** and **Bottom spacing** to adjust widget placement.
   - Turn on **Hide widget** if you want to suppress the floating icon (for example, when using a custom button trigger).
   - Turn on **Hide most searched articles** if you want to hide the trending articles section.

6. Click **Save** at the top. A confirmation message appears at the top-right of the page.

---

## After creating the widget

Once the widget is created, it appears in the widget list. Hover over the widget to access the following options:

| Option | Description |
|---|---|
| **Copy script** (<span class="fa-sharp fa-light fa-scroll-old" data-type="icon"></span>) | Copies the widget JavaScript code for installation |
| **Edit** (<span class="fa-thin fa-pencil" data-type="icon"></span>) | Update the widget's name or configuration |
| **Clone** (<span class="fa-regular fa-clone" data-type="icon"></span>) | Create a duplicate of the widget with a new name |
| **Delete** (<span class="fa-light fa-trash-can" data-type="icon"></span>) | Permanently remove the widget |

:::(Info) (<span class="fa-regular fa-circle-exclamation" data-type="icon"></span> NOTE)
You cannot change the widget type (Widget or Chatbot) using the **Edit** option.
:::

---

## Articles in this section

Follow these guides to complete the setup and configuration of your widget:

Here's the list formatted as a table:

<table>
<thead>
<tr>
<th>Article</th>
<th>What it covers</th>
</tr>
</thead>
<tbody>

<tr>
<td><strong>Connect Knowledge base widget</strong><br><a href="https://docs.document360.com/docs/installing-the-knowledge-base-widget" target="_blank" style="font-size:12px;color:rgb(124,58,237);font-weight:500;text-decoration:none;">Learn more →</a></td>
<td>Widget JS and connected domains.</td>
</tr>
<tr>
<td><strong>Configure JWT for the knowledge base widget</strong><br><a href="https://docs.document360.com/docs/configuring-jwt-for-the-knowledge-base-widget" target="_blank" style="font-size:12px;color:rgb(124,58,237);font-weight:500;text-decoration:none;">Learn more →</a></td>
<td>Secure access for private knowledge bases.</td>
</tr>
<tr>
<td><strong>Edit, Clone, and Delete widget</strong><br><a href="https://docs.document360.com/docs/edit-clone-and-delete" target="_blank" style="font-size:12px;color:rgb(124,58,237);font-weight:500;text-decoration:none;">Learn more →</a></td>
<td>Manage your widgets.</td>
</tr>
<tr>
<td><strong>Styling and branding the knowledge base widget</strong><br><a href="https://docs.document360.com/docs/styling-and-branding-the-knowledge-base-widget" target="_blank" style="font-size:12px;color:rgb(124,58,237);font-weight:500;text-decoration:none;">Learn more →</a></td>
<td>Match your brand.</td>
</tr>
<tr>
<td><strong>Content access in the knowledge base widget</strong><br><a href="https://docs.document360.com/docs/content-access-for-the-knowledge-base-widget" target="_blank" style="font-size:12px;color:rgb(124,58,237);font-weight:500;text-decoration:none;">Learn more →</a></td>
<td>Filter by project, workspace, or category.</td>
</tr>
<tr>
<td><strong>Add custom links</strong><br><a href="https://docs.document360.com/docs/add-custom-links-to-the-knowledge-base-widget" target="_blank" style="font-size:12px;color:rgb(124,58,237);font-weight:500;text-decoration:none;">Learn more →</a></td>
<td>Add support and resource links.</td>
</tr>
<tr>
<td><strong>Using multiple widgets within a project</strong><br><a href="https://docs.document360.com/docs/using-multiple-widgets-within-a-project" target="_blank" style="font-size:12px;color:rgb(124,58,237);font-weight:500;text-decoration:none;">Learn more →</a></td>
<td>Manage test and production widgets.</td>
</tr>
<tr>
<td><strong>Widget security</strong><br><a href="https://docs.document360.com/docs/domain-restriction-for-the-knowledge-base-widget" target="_blank" style="font-size:12px;color:rgb(124,58,237);font-weight:500;text-decoration:none;">Learn more →</a></td>
<td>Domain restriction.</td>
</tr>
<tr>
<td><strong>Domain restriction for the knowledge base widget</strong><br><a href="https://docs.document360.com/docs/domain-restriction-for-the-knowledge-base-widget" target="_blank" style="font-size:12px;color:rgb(124,58,237);font-weight:500;text-decoration:none;">Learn more →</a></td>
<td>Trusted domain configuration.</td>
</tr>
<tr>
<td><strong>Add a ticket deflector</strong><br><a href="https://docs.document360.com/docs/add-ticket-deflector-to-knowledge-base-widget" target="_blank" style="font-size:12px;color:rgb(124,58,237);font-weight:500;text-decoration:none;">Learn more →</a></td>
<td>Integrate a support form.</td>
</tr>
<tr>
<td><strong>Customise using Custom CSS & JavaScript</strong><br><a href="https://docs.document360.com/docs/customizing-the-kb-widget-using-custom-css-javascript" target="_blank" style="font-size:12px;color:rgb(124,58,237);font-weight:500;text-decoration:none;">Learn more →</a></td>
<td>Advanced customization.</td>
</tr>
<tr>
<td><strong>URL Mapping</strong><br><a href="https://docs.document360.com/docs/url-mapping" target="_blank" style="font-size:12px;color:rgb(124,58,237);font-weight:500;text-decoration:none;">Learn more →</a></td>
<td>Context-aware article surfacing.</td>
</tr>


</tbody>
</table>