Partners can fully customize the appearance of the Q&A widget using custom attributes that map to CSS variables. This allows matching the widget to your brand without forking code.
Quick Start
1<legion-qa
2 api-url="https://your-domain.com"
3 auth-token="your-jwt-token"
4 product-id="optional-product-uuid"
5 theme="light"
6 qa-primary-color="#6366f1"
7 qa-background-color="#fafafa"
8 qa-border-radius="12px"
9 qa-card-shadow="0 2px 8px rgba(0,0,0,0.08)"
10>
11</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 |
CSS Customization Attributes
Colors
| Attribute | Default (Light) | Default (Dark) | Description |
|---|
qa-primary-color | #228be6 | #228be6 | Primary accent color for buttons, links |
qa-background-color | #ffffff | #1a1b1e | Widget background color |
qa-text-color | #1a1b1e | #c1c2c5 | Primary text color |
qa-secondary-text-color | #868e96 | #909296 | Muted text color (meta, timestamps) |
qa-border-color | #dee2e6 | #373a40 | Border color for cards and dividers |
qa-staff-badge-color | #40c057 | #40c057 | Staff badge background color |
qa-accepted-color | #40c057 | #40c057 | Accepted answer indicator color |
Typography
| Attribute | Default | Description |
|---|
qa-title-size | clamp(16px, 2vmin, 20px) | Question title font size |
qa-body-size | clamp(13px, 1.6vmin, 15px) | Body text font size |
qa-meta-size | clamp(11px, 1.2vmin, 13px) | Meta text (dates, counts) font size |
qa-font-family | inherit | Font family for all text |
Spacing & Layout
| Attribute | Default | Description |
|---|
qa-card-padding | 16px | Padding inside question/answer cards |
qa-card-gap | 12px | Gap between cards |
qa-border-radius | 8px | Border radius for cards |
qa-card-shadow | 0 1px 3px rgba(0,0,0,0.1) | Box shadow for cards |
| Attribute | Default | Description |
|---|
qa-button-radius | 4px | Border radius for buttons |
qa-vote-button-size | 28px | Size of vote buttons |
Examples
Brand Colors
1<legion-qa
2 api-url="https://your-domain.com"
3 qa-primary-color="#6366f1"
4 qa-staff-badge-color="#8b5cf6"
5 qa-accepted-color="#22c55e"
6>
7</legion-qa>
Modern Card Style
1<legion-qa
2 api-url="https://your-domain.com"
3 qa-border-radius="16px"
4 qa-card-shadow="0 4px 20px rgba(0,0,0,0.08)"
5 qa-card-padding="24px"
6 qa-card-gap="16px"
7>
8</legion-qa>
Dark Theme with Custom Colors
1<legion-qa
2 api-url="https://your-domain.com"
3 theme="dark"
4 qa-primary-color="#60a5fa"
5 qa-background-color="#0f172a"
6 qa-text-color="#e2e8f0"
7 qa-border-color="#334155"
8>
9</legion-qa>
Compact Typography
1<legion-qa
2 api-url="https://your-domain.com"
3 qa-title-size="14px"
4 qa-body-size="12px"
5 qa-meta-size="10px"
6 qa-card-padding="12px"
7>
8</legion-qa>
Minimal Style (No Shadows)
1<legion-qa
2 api-url="https://your-domain.com"
3 qa-card-shadow="none"
4 qa-border-radius="0"
5 qa-border-color="#e5e7eb"
6>
7</legion-qa>
How It Works
- The web component reads attributes and passes them as query parameters to the widget iframe URL.
- The widget page extracts these values and injects them as CSS custom properties on the root container.
- CSS classes on widget elements reference these variables for styling.
Tips
- Use
clamp() for font sizes to maintain readability across different embed sizes.
- The dark theme automatically adjusts background, text, and border colors if not explicitly set.
- Test your color combinations for sufficient contrast and accessibility.
- Card shadows can be set to
none for a flat design.
Troubleshooting
- Colors not applying: Ensure attribute names are correct (kebab-case, e.g.,
qa-primary-color).
- Widget looks broken: Check that
api-url points to a valid Legion deployment.
- Voting not working: Ensure
auth-token is provided for authenticated actions.