Q&A Widget Customizer

Customize the appearance of the Q&A widget and generate embed code

Quick Presets

Core Settings

Theme

Base URL

Questions Per Page

Show Search Bar

Show Ask Question Button

Product ID (Optional)

Colors

Primary Color

Heading Color

Background Color

Text Color

Secondary Text Color

Border Color

Staff Badge Color

Accepted Answer Color

Container Styling

Card Styling

Typography

Buttons

Animations

Live Preview

Real-time

Embed Code

<script src="https://your-domain.com/js/qa-widget.js"></script>
<legion-qa></legion-qa>

WordPress Integration

Add this code to a Custom HTML block in your WordPress post or page.

Step 1: Add a Custom HTML Block

In the WordPress editor, click the + button and search for "Custom HTML".

Step 2: Paste the Embed Code

<script src="https://your-domain.com/js/qa-widget.js"></script>
<legion-qa></legion-qa>

Step 3: Preview and Publish

Preview your page to ensure the widget displays correctly, then publish!

Available Attributes

theme

"light" | "dark"

page-size

Number of questions per page (1-50)

show-search

"true" | "false"

show-ask-button

"true" | "false"

product-id

Filter to specific product UUID

qa-primary-color

Primary accent color (hex)

qa-background-color

Container background (hex)

qa-border-radius

Container border radius (e.g., "12px")

qa-card-radius

Card border radius (e.g., "8px")

qa-font-family

Font family for all text