Advanced widget integration

Advanced Knowledge Base Widget Installation

The UserDeck Knowledge Base widget can be customized through an advanced installation. This approach gives you full control over the look and behavior of the widget—perfect for integrating with single-page applications (SPAs) such as React.js or Vue.js.

The advanced installation differs from the basic one by removing the data-userdeck-guides attribute, which prevents automatic loading and allows you to initialize it manually.

Step-by-Step: Advanced Installation

Copy the modified code snippet into your website. It should look like this:

html

CopyEdit

<!-- Example installation snippet goes here -->

Make sure to replace the widget key with your own.

The anchor element is only necessary for SEO purposes (to allow search engines to index your content). If SEO is not a concern, you may simply create an empty <div> with the corresponding id where the widget should be injected.

Widget Options

Below is a breakdown of the key configuration options:

NameTypeDescriptionkeystringRequired. Your account's Knowledge Base widget key.elmixed (selector)Required. A jQuery selector for the container element.layoutstringLayout type: 'leftnav' (default) or 'main'.themestring or falseUse 'default' for the full theme, or false for layout-only styling.collection_idintStart on a specific collection page.category_idintStart on a category page (requires collection_id).article_idintStart on a specific article page (requires collection_id).settingsobjectUsed to define advanced widget settings (see below).

Advanced Settings

You can customize various page views and shared components using the settings object.

Home Page Settings

Object Path: settings.home

NameTypeDescriptioncollectionslist.numintNumber of collections to show; false shows all.collectionslist.categorieslist.numintNumber of categories per collection.collectionslist.categorieslist.show_emptyboolShow empty categories if true.collectionslist.categorieslist.linkboolMake entire category clickable if true.collectionslist.categorieslist.num_articlesboolShow article count beside each category.collectionslist.categorieslist.articleslist.numintNumber of articles per category.

Collection Page Settings

Object Path: settings.collections

NameTypeDescriptionbodystring'articleslist' to show articles, else categories shown.categorieslist.numintNumber of categories to display.categorieslist.show_emptyboolShow empty categories if true.categorieslist.linkboolMake categories clickable.categorieslist.num_articlesboolShow number of articles in each category.categorieslist.articleslist.numintNumber of articles per category.articleslist.numintTotal articles to display.

Category Page Settings

Object Path: settings.categories

NameTypeDescriptionarticleslist.numintNumber of articles to show.

Article Page Settings

Object Path: settings.articles

NameTypeDescriptionarticleview.relatedboolShow related articles if true.

Breadcrumbs Settings

Object Path: settings.breadcrumbs

NameTypeDescriptionvisibleboolShow breadcrumb navigation if true.

Sidenav Settings

Object Path: settings.sidenav

NameTypeDescriptionvisibleboolDisplay side navigation menu if true.expandstring'active', 'none', or 'all' depending on expansion behavior.