Community Posts Widget Web Component

Note: This example demonstrates the custom web component for the community posts widget. See the Widgets Docs Index for theming and embed attributes.

Authentication: For full functionality (liking, commenting), provide auth-token, user-id, and username attributes.

Basic Usage

Include the script and use the custom element:

            <script src="/js/community-posts-widget.js"></script>
            <legion-community-posts api-url="https://your-domain.com"
            page-size="10" filter="recent" show-filters="true"
            ></legion-community-posts>
          

Core Attributes

api-url: Base URL of your application
page-size: Posts per page (5-50, default: 10)
filter: "recent" | "popular" | "unanswered"
channel-id: Optional channel UUID to filter
show-filters: Show filter tabs
show-actions: Show Support/Start buttons
auth-token: JWT token for authenticated actions
user-id: Current user ID
username: Current user display name

Authenticated Example

            <legion-community-posts api-url="https://your-domain.com"
            auth-token="your-jwt-token" user-id="user-123" username="John Doe"
            show-filters="true" show-actions="true"
            ></legion-community-posts>
          

Theming Attributes

posts-primary-color: Primary accent color
posts-background-color: Widget background
posts-text-color: Primary text color
posts-card-bg: Card background color
posts-card-radius: Card border radius
posts-avatar-size: Avatar size
posts-tag-bg: Tag background color
posts-like-color: Like button color

Dark Theme Example

            <legion-community-posts api-url="https://your-domain.com"
            theme="dark" posts-background-color="#1a1b1e"
            posts-card-bg="#25262b" posts-text-color="#c1c2c5"
            ></legion-community-posts>
          

Customization

For a visual customization experience with live preview, use the Community Posts Widget Customizer .