Create Custom Interfaces For Your Project

Interfaces is a no-code app builder that lets project admins create custom, multi-page applications on top of existing project resources — agents, chats, smart tables, dashboards, knowledge bases, actions, workflows, documents, and meetings. Instead of the default chat experience, you can build purpose-built interfaces with multiple pages, drag-and-drop widgets, custom branding, and a shareable public URL.

Multi-Page Applications

Create interfaces with multiple pages, each serving a different function, organized in a custom navigation.

Drag-and-Drop Canvas

Build pages using a 12-column grid with a library of AI, data, action, and content widgets.

Custom Branding

Customize logos, colors, navigation layout, favicon, and CSS to match your brand.

Publishing & Sharing

Publish interfaces via a public URL, control member access, and optionally allow iframe embedding.

Key Concepts

Interface

An interface is a collection of pages that together form a complete user experience for a project. Each project can have multiple interfaces.

Property	Description
Name	Display name for the interface
Published	Whether the interface is available to end users via a public URL
Branding	Custom logo, colors, navigation layout, favicon, and CSS

Page

A page is a single screen within an interface. Each page has a name, icon, and position in the navigation. Pages are built by dragging widgets onto a canvas and can be created from pre-built templates.

Widget

Widgets are the building blocks of a page, placed on a 12-column drag-and-drop grid. See the Widget Library section below for the full list.

Widget Library

AI

Widget	Description
Chat	AI chat with your agents. For signed-in users, enable Show chat history sidebar so previous conversations stay available. Chat supports images in the conversation alongside text.
Agent Card	Agent selection card

Data

Widget	Description
Smart Table	Table, review, kanban, or dashboard view. Enable Read only when visitors should browse data without editing rows.
Dashboard	Smart Table analytics dashboard
Knowledge Base	Browse and search knowledge
Analytics	Usage analytics and feedback
Chart	Data visualization chart
Data Grid	Tabular data from a Smart Table
Filter	Dropdown or search filter
Form Field	Text, number, date, or checkbox input
Record Picker	Select records from a Smart Table

Actions

Widget	Description
Actions	List of available actions
Action Form	Single action as a form. Submissions run in place on the page so visitors can complete the form without leaving the interface.
Workflow Runs	Workflow run status and history
Execution History	Workflow execution history

Content

Widget	Description
Document	Document viewer and editor. Enable Read only when the document should be view-only.
Meetings	Meeting transcripts and notes
JSON Builder	Structured JSON editor
Text	Rich text content
Button	Interactive button with actions
Image	Display an image from a URL (fit and alt text configurable)
Number / KPI	Display a metric or KPI

Widget configuration tips

Widget	Configuration to know
Chat	Enable Show chat history sidebar for signed-in users who return to prior threads. Images in chat are supported alongside text.
Smart Table	Enable Read only for browse-only visitors; optionally hide the toolbar.
Document	Enable Read only for view-only documents.
Action Form	Submissions run in place on the page so visitors are not navigated away.
Image	Provide an image URL; configure fit and alt text in the right panel.

note

Actions, Action Form, Workflow Runs, and Execution History widgets are subject to platform-wide workflow execution limits. The entire workflow is capped at 3,600 seconds (1 hour). Individual steps default to 1,800 seconds (30 minutes) if left blank, but each can be configured up to 3,600 seconds — the same ceiling that applies to the workflow as a whole.

Getting Started

Creating an Interface

1. Navigate to Interfaces

   Click Interfaces in the project sidebar.

2. Create a new interface
   • If no interfaces exist yet, click + Create Your First Interface in the center of the page.
   • If interfaces already exist, click + New Interface in the top right.
3. Name your interface

   A New Interface modal will appear. Enter a name and click Create. You will be taken to the Interface Builder.

Interface Builder Layout

Once inside the Interface Builder, you'll see three main areas:

Area	Description
Left Sidebar	Page list and Widgets panel
Canvas	The page editing area — drag widgets here to build
Right Panel	Configuration settings for the selected widget

The top bar contains the following controls:

Undo / Redo

Step backward or forward through your changes.

Responsive View

Toggle between Desktop, Tablet, and Mobile previews.

Edit / Preview

Switch between editing mode and an in-builder preview.

Full Preview

Open the interface in a new tab as end users will see it.

Command Palette (⌘K)

Quick access to builder actions via keyboard.

Publish / Save

Save your work or publish the interface to a public URL.

Building Pages

Adding a Page

1. Open the New Page modal

   Click + next to PAGES in the left sidebar.

2. Choose a template

   Filter by category (All Templates, Start, Starter, Advanced) and select one of the available templates.

   Blank Page

   Start from scratch with an empty canvas.

   Analytics Dashboard

   KPI cards, charts, and a recent-activity table.

   Action Form

   Centered form for triggering an action.

   Table View

   Full-width data table with header.

   Chat Workspace

   Embedded chat with sidebar context.

   Agents Hub

   Grid of agent cards with header and filters.

   Actions Panel

   Searchable grid of all available actions.

   Chat + Table

   Side-by-side chat and data view.

3. Name the page

   Enter a page name at the bottom of the modal (defaults to the template name).

4. Create the page

   Click Create Page. The page will be added to your interface and opened on the canvas.

Adding Widgets

1. Find a widget

   In the Widgets panel on the left, browse by category or use the search bar.

2. Add to canvas

   Drag the widget onto the canvas, or click it to place it automatically.

3. Position and resize

   Move and resize widgets on the 12-column grid to achieve your desired layout.

4. Configure the widget

   Select a widget to open its settings in the right panel.

Managing Pages

To access page options, hover over a page in the sidebar and click the ⋯ (three-dot menu) that appears. This gives you the following options:

Rename

Click Rename to turn the page name into an inline editable text field directly in the sidebar. Type the new name and confirm.

Change icon

Click Change icon to open an icon picker below the page name. Click any icon to apply it immediately — no save step required.

Add to group

Click Add to group to open an inline panel with a text input. Enter a group name (e.g. "Admin", "Reports") and click Save to organize pages under a labeled group in the navigation. To remove a page from its group, leave the field empty and click Save.

Reorder pages

Click and drag pages in the page list to reorder them. The order determines the navigation order in the published interface.

Delete

Click Delete to trigger a browser confirmation dialog: "Delete this page? This cannot be undone." Click OK to confirm or Cancel to abort. An interface must always have at least one page.

Previewing Your Interface

Edit / Preview Toggle

Use the Edit / Preview toggle in the top bar to switch between editing mode and an in-builder preview of the current page. This is useful for checking your layout as you build without leaving the builder.

Full Preview

Click Full Preview in the top right to open the interface in a new browser tab exactly as end users will see it. This renders the full interface — including sidebar navigation, branding, and all pages — outside the builder environment.

Interface Branding

Click the palette icon next to the interface name in the top bar to open the Interface Branding modal.

General

Setting	Description
Display title	Text shown in the sidebar header
Logo URL	Square image, recommended 256×256 PNG

Navigation

Navigation layout — controls how end users move between pages:

Layout	Description
Sidebar	Vertical menu on the left — best for apps with many pages
Top bar	Horizontal nav above content — great for a landing-page feel
Floating	Hamburger menu in a drawer — maximizes canvas space
No nav	Single-page mode — use buttons inside the page to navigate

Initial state — whether the sidebar starts Expanded or Collapsed.

Active page indicator — visual style for the selected page:

• Pill: filled background
• Soft: tinted background
• Bar: left accent line

Colors

Setting	Description
Primary color	Used for buttons, links, and active states — enter a hex value or pick from preset swatches
Accent color (optional)	Sidebar accent color; defaults to the primary color

A Live Preview updates in real time as you make changes.

Advanced

Setting	Description
Favicon URL	Browser tab icon — ICO or PNG format
Custom CSS	Applied to the runtime root for advanced styling

Click Save Branding to apply your changes.

Publishing

warning

Saving and publishing are separate actions. Always save your changes before publishing. If you open the Publish modal with unsaved changes, a warning banner will prompt you to save first.

1. Open the Publish modal

   Click Publish in the top right of the Interface Builder.

2. Set your Public URL

   Enter the URL slug for your interface. Lowercase letters, numbers, and hyphens only.

3. Manage member access

   Under Manage Member Access, review or add the users who should have access to this interface.

4. Publish to web

   Click Publish to web. Your interface is now live and accessible at the public URL.

To make an interface unavailable, open the Publish modal and use the unpublish option.

warning

Not every widget supports anonymous, unauthenticated viewing. Chat and Knowledge Base widgets rely on an authenticated EKB session, so they won't work for visitors who haven't signed in — even though the published link itself requires no sign-in. Anonymous visitors attempting to use Chat will see a "ChatSDK not initialized" error, and Knowledge Base widgets will show no data. If you need a chat experience for unauthenticated, public visitors, use Public Chatbot instead.

Embed in an iframe

Published interfaces can run inside an iframe on another site. Embedding uses two layers of control:

Layer	Who	What it controls
Platform policy	Super Admin	Whether framed rendering is allowed at all, and which surfaces (including published interfaces) may appear in an iframe
Per-interface opt-in	Interface owner	Whether this published interface may be framed — so widening the platform allowlist does not silently embed every interface

Platform policy (Super Admin)

1. Open Super Admin → Platform Settings.
2. Find Iframe Embedding.
3. Turn on Allow framed rendering. When this is off, the app refuses to render in any iframe.
4. Optionally set Embeddable surfaces to a comma-separated list. Recognised values: interface, app_mode, forms, automator_forms, chatbot. Leave blank to allow all of them. Include interface (or leave blank) so published interfaces are an allowed surface. Each interface still needs its own opt-in below.
5. Click Save Embedding Settings.

Which parent sites may frame the app is a separate deploy-time setting (FRAME_ANCESTORS / equivalent frontend frame-ancestors configuration). Browsers enforce that list from the response CSP header; changing it typically requires a restart of the web tier. Platform Settings above control what may render when framing is already permitted.

Full-app embedding (when enabled for the deployment) can allow framing beyond published-interface opt-in. Unpublished interfaces stay blocked from iframe use unless that full-app embedding path is enabled.

Allow embedding for one interface

1. Publish the interface (or open Publish on an already published interface).
2. In the Publish modal, enable Allow embedding in another site.
3. Copy the public URL shown in the modal (shaped like https://<your-host>/i/<slug>).

Example embed snippet

<iframe
  src="https://<your-host>/i/<your-slug>"
  title="My interface"
  style="width: 100%; height: 800px; border: 0;"
></iframe>

Replace the host and slug with your published URL. If the parent origin is not on the deployment’s frame-ancestors allowlist, or embedding is disabled at the platform or interface level, the framed page shows that it can’t be embedded and offers Open in a new tab.

Checklist before go-live

1. Interface is published to a public URL (/i/<slug>).
2. Allow embedding in another site is enabled on that interface.
3. Super Admin Allow framed rendering is on, and embeddable surfaces include interface (or are blank).
4. The parent page’s origin is on the deployment frame-ancestors allowlist.
5. Widgets that need sign-in (Chat, Knowledge Base) are either unused for anonymous visitors or your users will authenticate inside the frame.

Surfaces reference

Surface id	What it allows in an iframe
interface	Published interfaces (/i/...) — still requires per-interface opt-in
app_mode	Interface app mode under a project
forms	Public tool forms
automator_forms	Automator flow forms
chatbot	Embeddable chat widget routes

Blank Embeddable surfaces = all of the above. A list with no recognised names embeds nothing.

Command Palette

Press ⌘K (Mac) or Ctrl+K (Windows) — or click the ⌘K button in the top bar — to open the command palette.

Available commands

Command	Shortcut
Save changes	⌘S
Publish to web	—
Toggle preview	—
Open branding settings	—
New page from template	—
Undo	⌘Z
Redo	⌘⇧Z
Switch to page	Lists all pages for quick navigation

Type a command, page name, or widget name to search. Press Esc to close.

Use Cases

Customer Support

Chat Workspace — support chat with agent context

Knowledge Base — help articles and documentation

Action Form — submit a ticket or request

Data Management

Analytics Dashboard — KPI cards and charts

Table View — full data table for reviewing records

Custom Page — charts and KPI widgets for reporting

Workflow Automation

Actions Panel — browse and execute workflows

Workflow Runs — track run status and history

Analytics Dashboard — key metrics and execution history

Troubleshooting

Interface not appearing

Possible causes:

• The interface has not been published yet
• You are viewing the wrong project
• You do not have the required permissions

Check the interface publish status and verify you are in the correct project.

Page not loading

Possible causes:

• A widget is misconfigured
• A referenced resource (agent, table, action, etc.) no longer exists or is inaccessible

Review widget settings in the right panel and verify all referenced resources are available.

Unsaved changes warning

The Unsaved changes indicator appears in the top bar and the Save button turns orange when you have pending changes.

Click Save before previewing or publishing to ensure your latest changes are applied.

Warning banner in Publish modal

This appears when you attempt to publish with unsaved changes.

Close the modal, click Save, then re-open the Publish modal and proceed.

Page says it can't be embedded

Possible causes:

• Allow framed rendering is off under Super Admin → Platform Settings → Iframe Embedding
• Embeddable surfaces omit interface (and are not blank)
• This interface does not have Allow embedding in another site enabled in Publish settings
• The parent site’s origin is not on the deployment’s frame-ancestors allowlist

Confirm platform policy, the per-interface checkbox, and the parent origin allowlist, then reload the host page.

Next Steps

Agents

Configure agents to power your Chat widgets.

Smart Tables

Set up Smart Tables for data widgets and dashboards.

Workflows

Build workflows to use in Action widgets.

Knowledge Base

Manage your knowledge base for KB widgets.