Display knowledge base content in widgets

How to get there: Click Widgets in the sidebar (under Share) → pick your knowledge base board card, or click Add widget and follow the wizard.

Learn how to embed your ProductLift knowledge base directly into your website or application using widgets, giving users quick access to documentation and support articles.

What are Knowledge Base Widgets?

Knowledge base widgets allow you to display your help center content directly within your product or website. Instead of redirecting users to a separate documentation site, you can embed articles in a sidebar or inline component.

Benefits:

  • Keep users in your app while accessing help
  • Reduce support tickets with self-service documentation
  • Provide contextual help where users need it
  • Maintain consistent branding across your product

Widget Types

ProductLift offers two knowledge base widget templates:

Knowledgebase Sidebar

A slide-out panel that appears from the side of the screen.

Best for:

  • Quick access to help without leaving the current page
  • Floating help buttons
  • In-app help centers
  • Mobile-friendly help access

Features:

  • Slides in from right or left side
  • Customizable header title
  • Full knowledge base navigation
  • Search functionality
  • Dismissable by clicking outside

[Screenshot: Knowledgebase sidebar widget showing sections and articles]

Knowledgebase Embed

An inline component that displays directly on your page.

Best for:

  • Dedicated help sections within your app
  • Documentation pages
  • Onboarding flows
  • Help center landing pages

Features:

  • Inline display within page content
  • Full knowledge base navigation
  • Breadcrumb navigation
  • Customizable size and styling

[Screenshot: Knowledgebase embed widget integrated into a page]

Creating a Knowledge Base Widget

Step 1: Open the widget creator

  1. Click Widgets in the sidebar (under Share).
  2. Either click a board card that points to your knowledge base board, or click Add widget to start the wizard.

Step 2: Choose format

If you started via Add widget, the wizard asks what to show (pick your knowledge base board) and how it should display:

  • Sidebar - slides in from the side on demand.
  • Embed - renders inline where you paste the code.
  • What's New Popup and Feedback Form are also available in the wizard but are not used for knowledge base content.

Step 3: Configure the widget

The widget edit page has three tabs: Installation, Settings, and Preview. On the Settings tab:

Basic settings:

Setting Description
Widget name Internal name, admin-only
Header title Text shown at the top of the widget (e.g. "Help Center")
Board The board this widget displays (your knowledge base board)

Appearance (all three are on/off toggles):

Setting Description
Show navigation menu The top bar with logo and user menu
Show board bar The row of boards for switching between sections
Show breadcrumbs Path like Home > Board > Article (recommended for embed)

There are no width, height, border-radius, button-color, or font pickers in the widget designer. To restyle the widget beyond the toggles above, use Custom (S)CSS at the portal level; those styles apply inside the widget too.

Step 4: Get the embed code

Open the Installation tab, pick your platform, and copy the snippet. For an embed widget, the code looks like this:

<div class="productlift-embed=YOUR_WIDGET_KEY" style="min-height: 700px;"></div>
<script defer src="https://YOUR_PORTAL.productlift.dev/widgets_sdk"></script>

Replace YOUR_WIDGET_KEY with the widget's key (shown in the Installation tab) and YOUR_PORTAL with your ProductLift portal subdomain. The SDK auto-resizes the underlying frame to fit the widget's content, so the inline min-height is only the initial height before the SDK measures. Include the <script> tag once per page even if you embed multiple widgets.

For sidebar or popup widgets the Installation tab shows a trigger snippet (an <a> element with a productlift-sidebar or productlift-widget class) plus the same SDK script tag.

Placement Strategies

Help Button in Navigation:
Place the widget trigger in your main navigation for easy access.

Floating Help Button:
Position a floating button in the corner of the screen.

Contextual Triggers:
Open the sidebar when users click help icons next to specific features.

Embed Widget Placement

Dedicated Help Page:
Create a /help or /docs page with the embedded widget.

Settings/Account Section:
Add embedded documentation to your settings area.

Onboarding Flow:
Include relevant articles during user onboarding.

Feature Pages:
Embed contextual help alongside specific features.

Selecting Content

Board Selection

Each widget displays content from one knowledge base board. When configuring:

  1. Choose your primary knowledge base board
  2. All sections and articles from that board will be available
  3. Users can navigate the full hierarchy

Filtering Content

To show specific sections only:

  1. Use section visibility settings to hide unwanted sections
  2. Create a dedicated board for widget content if needed
  3. Consider creating focused knowledge bases for specific use cases

Configuration Examples

Minimal help sidebar

A stripped-down sidebar you can wire to any trigger element on your site:

Header title:    Need help?
Show navigation menu:  off
Show board bar:        off
Show breadcrumbs:      off

Attach it to any element with class="productlift-sidebar=YOUR_WIDGET_KEY" (a link, a button, a floating help icon in the corner of your app, wherever you want it).

Full documentation embed

A rich, in-page documentation center that fills the width of its container:

Header title:    Documentation
Show navigation menu:  off
Show board bar:        off
Show breadcrumbs:      on

The embed div fills its parent's width by default, so wrap it in a container of the width you want.

In-app help center

A branded sidebar that matches your app's look:

Header title:    Help Center
Show navigation menu:  off
Show board bar:        off
Show breadcrumbs:      on

For colors, fonts, and any other visual tweaks, use Custom (S)CSS at the portal level. Those styles apply inside the widget frame.

Testing Your Widget

After implementation:

  1. Check Loading: Verify the widget loads correctly
  2. Test Navigation: Click through sections and articles
  3. Test Search: If enabled, verify search works
  4. Check Responsiveness: Test on mobile devices
  5. Verify Links: Ensure internal links work correctly

Troubleshooting

Widget Not Loading

  • Verify the embed code is correctly placed
  • Check for JavaScript errors in browser console
  • Ensure your domain is allowed in widget settings
  • Verify the widget is published/active

Wrong Content Appearing

  • Check you selected the correct knowledge base board
  • Verify section visibility settings
  • Confirm articles are published (not draft)

Styling Issues

  • The embed renders inside an iframe injected by the SDK, so your site's CSS should not leak into the widget. If styling looks wrong, check the widget's own Custom (S)CSS at the portal level.
  • If the container around the embed clips or squeezes the widget, remove fixed heights on parent elements. The SDK auto-resizes the widget's iframe to fit its content; the min-height on the embed div is only the initial height.

Performance Issues

  • Minimize number of sections displayed
  • Ensure images in articles are optimized
  • Consider lazy loading for large knowledge bases

Best Practices

Content Organization

  • Keep article titles concise for widget display
  • Use clear section names
  • Organize content by user need
  • Keep nesting shallow (1-2 levels work best in widgets)

User Experience

  • Position widgets where users naturally look for help
  • Use consistent trigger buttons/links
  • Provide search functionality for large knowledge bases
  • Consider context - show relevant content for the current page

Performance

  • Optimize images in your articles
  • Keep knowledge base size reasonable
  • Test load times on slower connections
Made with ProductLift