Managing and customizing the Knowledge base widget

Plans supporting knowledge base widget

Customizing the knowledge base widget

You can customize each knowledge base widget to improve the user experience.

1. Log in to the Knowledge base portal and select your desired project.

2. Navigate to the Widget () tab from the left navigation sidebar. The list of widgets created by the user will be displayed.

3. Hover over the desired widget and click the Edit (✎) icon.

4. In the Configure & connect tab, expand the Style widget section.

5. The following widget customization options are available:

   • Widget color

   • Widget icon

   • Widget position

   • Hide widget

   • Hide most searched articles

Widget color

You can choose the knowledge base widget theme color. This color is also set as the widget icon color.

1. Click Change color to open the color palette.

2. Select a color from the color picker or enter a hex, RGB, or HSL color code.

Widget icon

Similarly, under the widget color section, you can replace the icon with an image or an available icon.

1. Click the Change icon button.

2. Choose an icon from the Icon set tab or insert an image from the Insert image tab:

   • To insert an image from a URL: Paste the URL and click Insert.

   • To upload an image: Click Upload an image and select a file from your Drive.

Widget position

Choose the position of the widget launcher on your website or application.

1. Select Left or Right to change the widget position.

2. Enter the desired spacing values in the Side spacing and Bottom spacing fields to position the widget from the side or bottom of the window.

Hide widget

When toggled on, the Knowledge base widget will be hidden.

Hide most searched articles

When toggled on, the top search article section will be hidden.

NOTE

Enabling Hide top search disables the URL mapping functionality for the widget.

Once you complete making the desired customizations to the knowledge base widget, click the Save button next to the Widget name field.

Adding a ticket deflector in Knowledge base widget

To add a ticket deflector to your Knowledge base widget,

1. Log in to the Knowledge base portal and select your desired project.

2. Navigate to the Widget tab from the left navigation sidebar. The list of widgets will be listed.

3. Hover over the desired widget and click the Edit (✎) icon.

4. In the Configure & connect tab, expand the Ticket deflector section.

5. Enable the Show ticket deflector toggle.

6. Select the desired ticket deflector.

7. If required, update the Menu name field.

8. Click the Save button next to the Widget name field.

Once you enable the ticket deflector toggle and click Save, the ticket deflector is added to the knowledge base widget.

Content access for the Knowledge base widget

You may want to show only particular articles or hide some articles in your Knowledge base. You can do this effectively with the Content access option.

Restricting content access in a Knowledge base widget

To restrict content access in a knowledge base widget,

1. Navigate to Knowledge base widget () in the Knowledge base portal.

2. Hover on the desired Knowledge base Widget and click Edit ().

3. In the Configuration & connect tab, expand the Content access section.

4. You have three options:

   1. Project

   2. Workspace

   3. Category

Project

When you select Project, all the articles in the Knowledge base appear in the Widget.

Project is selected by default.

Workspace

You can make the desired language(s) or workspace(s) appear in the Widget.

For example, you want to select a different workspace with a specific language.

1. Select Workspace to view the list of available workspaces and languages.

2. Select the checkbox of the desired workspace(s) and language(s), and Click Save.

Category

You can make the desired categories appear in the Widget.

For example, you want to show only the Sales categories in the Widget.

1. Click Category and select the workspace in the Choose category.

2. The list of categories available in the specific workspace appears, select the checkbox of the desired categories.
   

3. If you want to add more categories from other workspace, expand the Workspace(s) to choose the desired categories.

4. Click Save.

CAUTION

Changes in content access will directly affect your URL mapping

• If you make a change related to the configured URL mapping, the URL mapping will be disabled and appear as broken.

For example, you have set the filter Widget content at the project level and configured a URL mapping with a List of articles from category A in workspace V1. Now you are updating the Filter Widget configuration to show only the categories B and C in workspace V1. With this action, the URL mapping will be invalid. This is because the articles you configured in URL mapping will not appear in the Knowledge Base Widget.

---

• In the URL mapping window, you can only configure articles that are made available in the Filter widget content.

For example, you have set the filter Widget content at the workspace level to show only workspace V1. In this case, you cannot configure a URL mapping with an article available in workspace V2.

Domain restriction

Document360 lets you restrict the Knowledge Base Widget to specific domains.

Once a domain is added to the Widget security list, and if a project member wants to install the Knowledge Base Widget on a different domain, they will need to add that domain in the Widget security section.

If no domains are added to the list, the Knowledge base Widget can be added to any SaaS application or public website.

Restrict the Knowledge base widget to a specific domain

To restrict your Knowledge base widget to a specific domain,

1. Navigate to Knowledge base Widget in the Knowledge base portal.

2. Hover on the desired Knowledge base Widget and click () Edit.

3. In the Configure & connect tab, expand the Widget security section. You can find the list of domains previously added (if added).

4. Enter the domain where you want the Knowledge base Widget to be displayed.

5. Click Add and click Save.

Adding custom links

Need to add a download link to an eBook or Google Sheets?
You can direct an end user by adding a custom link to the Knowledge base Widget.

Links are added as a "section" to your Widget. They will be placed in the order they are added, underneath the Top search articles section.

To add a custom link,

1. Navigate to Knowledge base Widget in the Knowledge base portal.

2. Hover on the desired Knowledge base Widget and click ( ) Edit.

3. In the Installation & Setup tab, expand the Add custom links section.

4. In the Add Custom Links  section:

   • Type the title for your section

   • Type the display text for the link

     For example, Contact Us

   • Type the URL link

     For example, https://support.document360.com

5. Click the adjacent icon and choose the desired icon from the available options.

6. Click Add > Save.

Edit a custom link

1. Navigate to Knowledge base Widget in the Knowledge base portal.

2. Hover on the desired Knowledge base Widget and click () Edit.

3. In the Configuration & connect tab, expand the Add links section.

4. In the Add Links section, locate the custom link you wish to edit.

5. Click () Edit and update the desired fields.

6. Click Save.

Deleting a custom link

1. Navigate to Knowledge base Widget in the Knowledge base portal.

2. Hover on the desired Knowledge base Widget and click () Edit.

3. In the Configuration & connect tab, expand the Add links section.

4. In the Add Links section, locate the custom link you wish to delete.

5. Click () Delete.

6. Click Save.

Securing Knowledge base widget authentication using JWT

You can implement an authentication configuration for the widget using JWT, ensuring a secure environment for private and mixed projects.

1. Navigate to Knowledge base widget in the Knowledge base portal.

   The list of widgets will appear.

2. Hover on the desired Knowledge base Widget and click () Edit.

3. In the Configure & connect tab, navigate to the JWT section and enable the JWT toggle.

1. Client ID: The client ID will be your project’s ID.

2. Widget ID: Since multiple widgets may exist, a Widget ID is provided for their unique purposes.

3. Token endpoint: A token endpoint is an HTTP endpoint that allows you to obtain an access token given an authorization code.

4. Client secret: Click Regenerate to generate the client secret. You need to save this for future purposes and the same client secret will apply to all widgets in the future.

NOTE

The Client secret will be required for JWT widgets you may create. Note that this information will not be stored in Document360.

   e. Authorize URL: Paste the authorized URL from your knowledge base widget webpage.

5. Click Save.

Embed the authorized URL within your code and paste it into the script section on your webpage. This will implement a secure, authenticated widget that prevents unauthorized third-party access.

Implementing the auth endpoint

[HttpGet]
[Route("authenticate")]
public async Task<IActionResult> WidgetAuthentication(string id)
{
    if (HttpContext.User.Identity.IsAuthenticated)
    {
        var clientData = new ClientDetails()
        {
            ClientId = "{Client ID}",
            Secret = "{Client secret}",
            TokenEndpoint = "{Token endpoint}",
            WidgetId = "{Widget ID}",
            SecurityGroupIds = "{Comma separated reader group IDs}", // mandatory for configuration to render KB widget
            TokenValidity = 15, // integer representing token validity in minutes
        };

        if (clientData == null)
            return NotFound();

        List<string> readerGroupids = null;
        if (!string.IsNullOrEmpty(clientData.SecurityGroupIds))
            readerGroupids = clientData.SecurityGroupIds.Split(',').Select(c => c.Trim()).ToList();

        var payload = new
        {
            username = "{Username}",
            firstName = "{First name}",
            lastName = "{Last name}",
            emailId = "{Email address}",
            readerGroupIds = readerGroupids,
            tokenValidity = clientData.TokenValidity,
            widgetId = clientData.WidgetId,
            projectId = clientData.ClientId
        };

        var payloadString = JsonConvert.SerializeObject(payload);

        var result = await client.RequestTokenAsync(new TokenRequest
        {
            Address = clientData.TokenEndpoint,
            ClientId = clientData.ClientId,
            ClientSecret = clientData.Secret,
            GrantType = "Widget",
            Parameters =
            {
                {
                    "payload",  payloadString
                },
                {
                    "id", clientData.ClientId
                },
            }
        });

        return Ok(new
        {
            accessToken = result.AccessToken,
            expiresIn = result.ExpiresIn
        });
    }
    else
    {
        return Unauthorized(new { success = false });
    }
}

NOTE

You must include the comma-separated reader group IDs as security group IDs to configure and render the KB widget.