UI Guide

This page walks through every screen in the Outerfaced dashboard — what each view does, and what every button and menu controls.

The sidebar is the persistent left panel visible on all dashboard pages. On mobile it slides in from a hamburger button.

Top bar

Control	What it does
Outerfaced logo	Navigates to the dashboard home
Sun / Moon icon	Toggles between light and dark mode

Workspace switcher

Immediately below the top bar. Clicking it opens a dropdown that lists all your workspaces. You can switch between them or create a new one. The active workspace determines which channels are shown in the channel list.

To open the workspace settings page for the active workspace, look for the gear icon inside the switcher dropdown.

Channel list

Below the workspace switcher.

Control	What it does
+ (plus) icon (top right of "Channels" heading)	Opens the New Channel modal
Search input	Filters the channel list by name or description in real-time
Sort icon (↕)	Opens a dropdown to sort channels by: Newest first, Oldest first, A–Z, Z–A
Attribute filter dropdowns	Appear automatically when any channel in the workspace has attributes configured with "Use as filter". Select a value to narrow the list.
Channel row	Click to open that channel's detail page. A dot indicator appears on channels that have received new cards since you last viewed them.

Bottom section

Control	What it does
API Call Builder (blue button)	Opens the visual API call builder
Documentation (border button)	Opens the built-in docs
Daily usage badges	Show how many channels/cards you've created today against your daily limits (50 channels, 200 cards)
User avatar + email	Displays your account
Gear icon	Opens Account Settings
Log out icon	Signs you out

Dashboard Home

When no channel is selected, the main area shows an empty state prompting you to pick a channel from the sidebar. There's nothing to interact with here beyond navigating.

Channel Detail Page

Selecting a channel opens its detail page, which has four tabs across the top.

Tab bar

Tab	Purpose
Live Feed	Realtime view of all cards in the channel
Card Builder	Compose a card visually and get the equivalent API call
Settings	Configure the channel
Webhook Logs	Inspect webhook delivery history

Live Feed tab

This is the default view. It shows the channel's card feed, updated in real time as your automation pushes new cards.

Channel header

Element	What it is
Icon + name	The channel's emoji icon and display name
⚡ interactive badge	Shown when the channel is in interactive mode
Description	Appears below the name if set
Attribute pills	Show the channel's custom key/value attributes
Header action buttons	Configurable buttons (set up in Settings → Actions) that appear here for all viewers. Clicking one fires a `header_action` interaction to your webhook.

Feed controls (top-right of header)

Control	What it does
Search icon	Opens an inline search bar that filters visible cards by text content (text blocks, badge labels, kv keys/values). Fires in real-time as you type. Press Escape or click ✕ to close. While search is active, reply cards are hidden.
Sort icon (↕)	Dropdown to sort the feed: Newest at bottom (default), Oldest at top, By status (errors first, successes last)
External link icon	Opens the public channel URL (`/c/{channelId}`) in a new browser tab

Card feed

Cards appear in the order determined by the sort setting. Each card shows:

Its blocks (text, badges, key-value tables, images, buttons, inputs, etc.)
A timestamp below the card
On hover: a delete (trash) icon to permanently remove the card
On hover: a dev bar (right side) with quick-copy buttons for the card ID and a pre-filled PATCH curl command

If the channel is in interactive mode, reply cards (blue background, message icon) are also shown inline in the feed, sorted by timestamp alongside regular cards. Hovering a reply card reveals a delete button.

Reply input

Only visible when the channel is in interactive mode. A text input at the bottom of the feed. Type a message and press Enter or the send button to fire a reply interaction to your webhook.

Card Builder tab

A visual editor for composing a card before pushing it to the feed.

Left panel — Block palette

Add blocks to the card by clicking block type buttons (Text, Badge, KV, Image, Button, Divider, Input, Select, Multiselect, Toggle). Each added block appears in the editor with its own controls.

Center panel — Card editor

Displays the card being built. Each block row has:

Block-specific inputs (e.g. text content, badge label, KV rows, button labels)
A drag handle (if reordering is supported) and a delete button to remove the block

At the top, a Status selector sets the card's border color (default, success, warning, error, pending).

Right panel / bottom — Output

Control	What it does
Push to feed button	Immediately pushes the card to the live channel feed
Copy API call button	Copies the equivalent `curl` command to reproduce this card via the API

Settings tab

Contains four sub-tabs.

General sub-tab

Field / Control	What it does
Icon (emoji picker)	Click to open the emoji picker and change the channel's icon
Name	Edit the channel's display name
Description	Short description shown in the channel header
Mode toggle (View only / Interactive)	View only — read-only display, no reply input shown to viewers. Interactive — enables the reply input and button interactions. Switching from interactive to view-only shows a confirmation prompt.
Webhook URL	The URL Outerfaced will `POST` interaction events to
Save Changes button	Saves name, description, icon, mode, and webhook URL
Visibility section	Controls who can open the public channel URL: Private (only you), Public (anyone with the link), Protected (anyone with the link + password). Only available when the workspace visibility is set to private.
Save Visibility button	Saves the visibility setting (and password, if protected)
Channel URL	Displays the public URL for this channel with a copy button
Danger Zone → Delete Channel	Opens a confirmation modal. You must type the channel's name exactly to confirm deletion. This permanently deletes the channel, all cards, attributes, and interaction history.

Actions sub-tab

Header actions are buttons pinned to the channel header visible to all viewers. Clicking them fires a header_action interaction to your webhook.

Control	What it does
Existing action rows	Shows each action's style badge and label. The trash icon removes it.
Label input	Text for the new button
Style dropdown	`primary` (blue), `secondary` (neutral), or `danger` (red)
Add button	Creates the action

Attributes sub-tab

Attributes are arbitrary key/value metadata attached to the channel. Your automation can update them via the API; they appear as pills in the channel header.

Control	What it does
Default Attributes section	Read-only display of `created_at` and `updated_at` timestamps
Attribute rows	Each row shows the key (read-only) and an editable value input. Changes save automatically on blur or Enter. The trash icon deletes the attribute.
New attribute row (bottom)	Enter a `key` and `value`, then click Add or press Enter to create a new attribute

Snippets sub-tab

Ready-to-copy curl commands for common operations on this channel. Each snippet has a copy icon in its header.

Snippet	What it does
Update channel settings	`PATCH` the channel's name and mode
Set an attribute	`PUT` a key/value attribute
Push a card	`POST` a card with a sample block
Update a card	`PATCH` an existing card's block content
Delete channel	`DELETE` the channel

Webhook Logs tab

Shows a table of every webhook delivery attempt for this channel, most recent first.

Column	Meaning
Status	`✓ success` or `✗ failed`
Type	The interaction type that triggered the delivery (`button_click`, `reply`, `header_action`, `input_change`)
HTTP	The HTTP response code returned by your webhook server
Attempts	How many delivery attempts were made
Time	When the delivery was attempted

The Refresh button (top right) re-fetches the latest log entries.

Account Settings (`/dashboard/settings`)

Accessed via the gear icon in the sidebar bottom or by navigating directly.

Account section

Shows your email and a Sign out button.

API Access Mode section

Option	Meaning
Quick Mode	No API key required. Anyone who knows your channel/workspace ID can call the v1 API. Easiest for personal or internal automations.
Secure Mode	Every v1 API call must include your API key in the `Authorization: Bearer` header. Required for public-facing automations.

Account API Key section

Control	What it does
Current key display	Shows the key prefix with the rest masked
Generate / Regenerate Key button	Generates a new key. The full key is shown once — copy it immediately
Show/Hide toggle	Reveals or masks the newly generated key
Copy icon	Copies the newly generated key to clipboard
Revoke button	Permanently invalidates the current key

Important: The full key is shown only once at generation time. If you lose it, regenerate a new one.

Workspace Settings (`/dashboard/workspaces/{id}/settings`)

Accessed from the workspace switcher dropdown (gear icon).

General section

Field	What it does
Icon	Single-character emoji for the workspace
Name	Display name
Workspace ID	Read-only UUID, used to scope API calls
Shareable Link	Public URL for the workspace page (`/w/{id}`), with copy and open buttons
Save Changes button	Saves name and icon

Visibility section

Sets who can view channels via their public URLs. This is a workspace-level override.

Option	Effect
Private	Only you can view channel URLs. Individual channels can still be set to public.
Protected	Anyone with the URL + workspace password can view all channels
Public	All channels are forced public — anyone with a channel link can view it

Display section

Controls how channels appear on the public workspace page (/w/{id}).

Setting	Options
Layout	List — scrollable channel links; Sidebar — channel nav on the left (default); Tabs — top navigation bar (up to 5 channels); Grid — side-by-side previews (up to 4 channels)
Show search & filter	Toggle that adds a search bar to the public workspace page. Not available with the Tabs layout.

Attribute Display section

Appears once any channel in the workspace has attributes. Controls how attribute keys behave in the dashboard sidebar.

Column	Meaning
Use as filter	When checked, a filter dropdown for this attribute key appears in the sidebar so you can narrow the channel list by that attribute's value
Show in sidebar	When checked, each channel row in the sidebar shows a badge with the attribute value

API Reference section

Quick-reference curl snippets scoped to this workspace (create channel, list channels, push card, delete channel). Each has a Copy button.

Danger Zone

Type the workspace name to confirm, then click Delete Workspace. Permanently deletes the workspace and all its channels. You cannot delete your only workspace.

API Call Builder (`/dashboard/api-builder`)

A guided form for constructing any v1 API call without writing code.

Build your request (sentence builder)

Two chip-selects form a sentence:

Action: create, update, delete, get list
Resource: channel or card (options adapt based on the action)

The sentence updates as you make selections.

Identify the resource

Shown for actions other than create. Dropdowns let you pick a workspace and channel from your existing data. For card operations, a combobox lets you select a card ID from the channel's existing cards or type one manually.

For update operations, a Load current data button fetches the current values of the selected channel or card so you can edit them in the next step.

Edit values / Fill in the details

For create channel: fields for name, workspace, description, mode, icon, webhook URL.

For create card: the full visual card block editor (same as Card Builder tab).

For update channel: a checklist of fields to include in the patch. Check a field to expand its input; unchecked fields are excluded from the request body.

For update card: an inline editable card preview. Click any value to edit it. Changed values are automatically tracked and included in the patch.

Generated call output

The bottom panel shows the generated request in three formats:

Format	What it is
Method + URL	The HTTP verb and endpoint
Headers	Auth header (if secure mode is on) and content-type header
Request body	JSON payload with a Copy button
cURL	Complete `curl` command ready to run in a terminal, with a Copy button
n8n node	A pre-configured n8n HTTP Request node JSON you can paste directly into an n8n workflow

If you have Secure Mode enabled and an API key, the generated cURL will include the Authorization: Bearer header automatically.

Public Channel View (`/c/{channelId}`)

This is the viewer-facing page — what you share with end users. It does not require sign-in (unless the channel or workspace is private/protected).

It shows the same channel header, card feed, and (if interactive) reply input as the Live Feed tab, but without any dashboard controls (no delete buttons, no dev bar, no sort/search by default).

If the channel or workspace is protected, the viewer must enter the correct password before the feed is shown.