Q&A Widget Web Component

Note: This example demonstrates the custom web component for the Q&A widget. Replace the placeholder token with a real authentication token for your user. See the Q&A Theming Docs for CSS customization options.
Authentication Required: The Q&A widget requires a valid JWT token for voting, asking questions, and submitting answers. The widget works without authentication for read-only browsing.

Integration Code

1. Include the Widget Script

<script src="${window.location.origin}/js/qa-widget.js"></script>

2. Add the Widget to Your Page

<legion-qa api-url="${window.location.origin}" auth-token="your-jwt-token" width="600" height="800"></legion-qa>

Functional Attributes

Attribute Type Default Description
api-url string current origin Base URL for API calls
auth-token string - JWT token for authenticated actions
product-id string - Filter questions to a specific product
username string "Anonymous" Display name for the user
theme string "light" Widget theme: "light" or "dark"
page-size number 5 Questions per page (5-50)
show-search boolean true Show the search input
show-ask-button boolean true Show the "Ask Question" button
width string 600 Widget width in pixels
height string 800 Widget height in pixels

CSS Customization

The Q&A widget supports extensive theming via custom attributes. See the full theming documentation for all options.

Brand Colors

<legion-qa api-url="${window.location.origin}" qa-primary-color="#6366f1" qa-staff-badge-color="#8b5cf6" qa-accepted-color="#22c55e"></legion-qa>

Modern Card Style

<legion-qa api-url="${window.location.origin}" qa-border-radius="16px" qa-card-shadow="0 4px 20px rgba(0,0,0,0.08)" qa-card-padding="24px" qa-card-gap="16px"></legion-qa>

Dark Theme

<legion-qa api-url="${window.location.origin}" theme="dark" qa-primary-color="#60a5fa" qa-background-color="#0f172a" qa-text-color="#e2e8f0" qa-border-color="#334155"></legion-qa>

Product-Specific Q&A

<legion-qa api-url="${window.location.origin}" product-id="your-product-uuid" auth-token="your-jwt-token"></legion-qa>

Features

Authentication

The Q&A widget uses postMessage to securely pass the authentication token to the iframe. This enables:

Without authentication, users can browse and read Q&A content but cannot interact.

Styling

You can customize the widget container with CSS:

legion-qa { border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); overflow: hidden; }