Examples

Support console

A support ticket surface: status and assignee up top, the thread in the middle and a reply box with saved replies below.

Preview

SUP-2481

Pending

Olivia Martin, opened June 18, 2027. First reply due in four hours.

Olivia Martin June 18, 09:41

Checkout fails with a 402 since we rotated our card. The saved card still shows the old expiry.

Sofia Davis June 18, 10:02

Thanks, looking at the payment logs now. Which last four digits should the new card show?

HTML

<bs:bsui-stack direction="column" gap="4" align="stretch">
  <bs:bsui-stack direction="row" gap="3" align="center" justify="space-between">
    <bs:bsui-stack direction="column" gap="1">
      <bs:bsui-stack direction="row" gap="2" align="center">
        <bs:bsui-text content="SUP-2481" variant="title" tag="h3" />
        <bs:bsui-badge label="Pending" variant="warning" />
      </bs:bsui-stack>
      <bs:bsui-text content="Olivia Martin, opened June 18, 2027. First reply due in four hours." variant="muted" />
    </bs:bsui-stack>
    <bs:bsui-select name="ticket_assignee" defaultValue="sofia" placeholder="Assignee">
      <bs:bsui-select-trigger />
      <bs:bsui-select-popup>
        <bs:bsui-select-option value="sofia" label="Sofia Davis" />
        <bs:bsui-select-option value="jackson" label="Jackson Lee" />
        <bs:bsui-select-option value="none" label="Unassigned" />
      </bs:bsui-select-popup>
    </bs:bsui-select>
  </bs:bsui-stack>
  <bs:bsui-card>
    <bs:bsui-card-content>
      <bs:bsui-stack direction="column" gap="3" align="stretch">
        <bs:bsui-stack direction="column" gap="1" align="stretch">
          <bs:bsui-text content="Olivia Martin" variant="label" tag="span" />
          <bs:bsui-text content="June 18, 09:41" variant="caption" tag="span" />
          <bs:bsui-text content="Checkout fails with a 402 since we rotated our card. The saved card still shows the old expiry." variant="body" tag="p" />
        </bs:bsui-stack>
        <bs:bsui-separator />
        <bs:bsui-stack direction="column" gap="1" align="stretch">
          <bs:bsui-text content="Sofia Davis" variant="label" tag="span" />
          <bs:bsui-text content="June 18, 10:02" variant="caption" tag="span" />
          <bs:bsui-text content="Thanks, looking at the payment logs now. Which last four digits should the new card show?" variant="body" tag="p" />
        </bs:bsui-stack>
      </bs:bsui-stack>
    </bs:bsui-card-content>
  </bs:bsui-card>
  <bs:bsui-card>
    <bs:bsui-card-content>
      <bs:bsui-stack direction="column" gap="3" align="stretch">
        <bs:bsui-textarea name="reply" rows="3" placeholder="Write a reply..." />
        <bs:bsui-stack direction="row" gap="3" align="center" justify="space-between">
          <bs:bsui-select name="saved_reply" placeholder="Insert a saved reply">
            <bs:bsui-select-trigger />
            <bs:bsui-select-popup>
              <bs:bsui-select-option value="refund" label="Refund policy" />
              <bs:bsui-select-option value="reset" label="Password reset steps" />
              <bs:bsui-select-option value="escalate" label="Escalate to billing" />
            </bs:bsui-select-popup>
          </bs:bsui-select>
          <bs:bsui-stack direction="row" gap="2" align="center">
            <bs:bsui-button label="Add internal note" variant="outline" />
            <bs:bsui-button label="Send reply" variant="default" />
          </bs:bsui-stack>
        </bs:bsui-stack>
      </bs:bsui-stack>
    </bs:bsui-card-content>
  </bs:bsui-card>
</bs:bsui-stack>

How it works

The assignee select and the status badge read from one ticket store, and picking a saved reply inserts its template into the textarea through a context action. Send appends the reply to the thread and updates the ticket status in state, while the note action saves without notifying the customer.

Every behaviour on this page is the WordPress Interactivity API: each component registers its own store, seeds its state in a server rendered context, and wires events with directives in the markup above. There is no page specific JavaScript.