04. Frontend Integration

StatComm handles frontend rendering and form processing using reactive Livewire elements.

1. The Comment Stream Component

To render the comment submission terminal and the approved log stream on an article or entry template, place the component tag directly inside your Antlers or Blade layout:

<livewire:statcomm :articleId="$entry->id" />

@livewire('statcomm', ['articleId' => $entry->id()])

2. Recent Comments Widget

There is a built in widget that will display however many comments you want to see, great for sidebars or whatever.

<livewire:statcomm-widget
    :limit="5"
    heading="Recent Comments"
    :showDate="true"
/>

3. Blueprint Customization

Because StatComm routes payloads through a blog_comments form layout, you can open your Control Panel, navigate to Forms > Blog Comments, and modify the blueprint directly.

• Any fields you add or validation requirements you mandate (e.g., matching character limits, regex filters) will be programmatically processed by the controller during updates.

Example Blueprint YAML file

title: 'Blog Comments'
honeypot: honeypot_field
blueprint:
    sections:
        main:
            fields:
                - handle: name
                  field:
                      type: text
                      display: 'Name'
                      validate: 'required|min:2|max:50'
                - handle: email
                  field:
                      type: text
                      input_type: email
                      display: 'Email Address'
                      validate: 'required|email'
                - handle: comment
                  field:
                      type: textarea
                      display: 'Comment'
                      validate: 'required|min:10|max:2000'
                - handle: article_id
                  field:
                      type: text
                      display: 'Article ID'
                      visibility: hidden
                      validate: 'required'
                - handle: parent_id
                  field:
                      type: text
                      display: 'Parent Comment ID'
                      visibility: hidden
                - handle: approved
                  field:
                      type: toggle
                      display: 'Approved Status'
                      default: false
                      visibility: visible