Preview panel screen examples

Dock

Creation wizard where the user adds FAQs to their security profile while viewing a live preview of the generated document.

• Add & Create
• Form

Bloom

AI generation interface where the user chats to build a website and reviews a generated 'Create Customer Group' form in a side-by-side artifact panel.

• AI Chat
• AI Generation

Mailchimp

Wizard step where the user reviews how their audience will access the new preferences center via an email footer link.

• Setup Wizard
• Settings

Maze

Form builder where the user configures the welcome screen of a research study and previews the mobile experience.

• Form
• Edit

Chatwoot

Settings page where the user configures channel preferences for a specific inbox, including greetings and email collection, alongside a live preview of the chat widget.

• Settings
• Tabs

Attio

Settings page where the user configures the display name and visual style of their team's call recorder bot, with a live preview.

• Settings
• Media Editor

Zapier

Settings page where the user configures an AI agent's instructions, triggers, and connected tools, with a side-by-side preview panel to test the behavior.

• AI Settings
• AI Agent

Creatopy

Design editor where the user inspects and manages rows from an uploaded CSV travel feed to generate ad variations.

• Design Editor
• Feedback

Bitly

Detail page where the user edits the title and destination URL of a specific QR code while viewing a live preview.

• QR Code
• Edit

Replit

Agent trace workspace where the user instructs an AI to adjust the mobile layout of a web application and reviews the generated screenshot in a side-by-side view.

• AI Agent
• AI Chat

Front

Settings page where the user configures the customer portal for their knowledge base, including enabling it via a toggle and selecting a workspace.

• Settings
• Tabs

Podia

Design editor where the user previews and configures global styles like fonts, colors, and buttons for a post email template.

• Design Editor
• Edit