Displaying Knowledge Base Content in Widgets

How to get there: Go to Settings → Widgets → click Add widget → choose Board → select your knowledge base board.

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: Access Widget Creation

1. Go to Settings → Widgets in your admin dashboard
2. Click Add widget

Step 2: Choose Widget Type

1. Select Board
2. Choose your display mode:
   • Sidebar - For slide-out help panels
   • Embed - For inline documentation sections

Step 3: Configure the Widget

Basic Settings:

Display Options:

Step 4: Customize Appearance

Theme Settings:

• Background color
• Text color
• Accent/link color
• Font family

Size Settings (Embed only):

• Width
• Height
• Border radius

Button Settings (Sidebar only):

• Button position
• Button text or icon
• Button color

Step 5: Get the Embed Code

After saving your widget:

1. Click "Get Code" or find the embed code section
2. Copy the JavaScript snippet
3. Paste it into your website or app

Example Embed Code:

<script>
(function(w,d,s,o,f,js,fjs){
  w['ProductLiftWidget']=o;w[o]=w[o]||function(){
    (w[o].q=w[o].q||[]).push(arguments)};
  js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];
  js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);
}(window,document,'script','plwidget','https://yourportal.productlift.app/widget.js'));
plwidget('init', { widget_id: 'your-widget-id' });
</script>

Placement Strategies

Sidebar Widget Placement

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

Customization Examples

Minimal Help Button

A simple floating button that opens a sidebar:

Header Title: "Need Help?"
Display Menu: Hidden
Display Boards: Hidden
Display Breadcrumbs: Hidden
Button Position: Bottom Right
Button Text: "?"

Full Documentation Embed

Complete documentation center embedded in a page:

Header Title: "Documentation"
Display Menu: Hidden
Display Boards: Hidden
Display Breadcrumbs: Visible
Width: 100%
Height: Auto

In-App Help Center

Branded sidebar matching your app:

Header Title: "Help Center"
Display Menu: Hidden
Display Boards: Hidden
Background Color: (match your app)
Accent Color: (your brand color)

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

• Check for CSS conflicts with your site
• Adjust widget styling settings
• Consider using iframe embed for better isolation

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

Related Articles

• Setting Up a Knowledge Base - Create your knowledge base content
• Knowledge Base SEO and Sharing - Optimize for search
• Creating Widgets - General widget guide