Product Studio
Design the application flow your applicants go through, from pages and fields to routing, themes, and versions.
Product Studio is where you build a product: the online application an applicant fills in. A product is made of pages (also called tabs). Each page holds fields, controls and widgets, and routing decides which page comes next, running decision trees and integrations along the way.
Changes are made in a draft. Applicants keep seeing the live version until you publish the draft and set it live, so you can work on a product without affecting applications in progress.
Key concepts
- Product: one application flow, such as "Personal Loan" or "Business Line of Credit". It has its own URL.
- Page (tab): one screen of the application. Each page has a Position: First, Intermediate or Last.
- Routing: the On Continue settings for a page: which integrations run, which decision tree runs, and which page comes next.
- Version: a published snapshot of the product. Exactly one version is Live.
- Theme: colors, fonts, logo and layout used to style the applicant-facing pages.
- Variables: fields bound to variables. Whatever the applicant enters is saved under that variable's code.
- Widgets: prebuilt integrations, such as bank linking or identity checks. One appears in the palette only when its integration is active in your workspace.
- Controls: content and layout elements: Banner, Checkbox, Display Document, Divider, Labels, Scroll To Bottom, Text Block, Upload App Data and Upload Documents.
How versions work
flowchart LR
Draft[Edit draft] -->|Publish| Version[New version]
Version -->|Set as live version| Live[Live version]
Live -->|Applicants see it| Apps[New applications]
Version -->|Restore As Draft| Draft
Version -->|Clone Version| Version2[Copy of version]
- Every edit to pages, fields and routing goes into the draft.
- Publish saves the draft as a new numbered version. Tick Set as live version to make it live straight away. A product's first published version always goes live.
- Product settings (on the Settings page), themes and scripts take effect as soon as you save them; they are not versioned.
Build a product
Create a product
- In the left sidebar, open Workflows → Product Studio.
- Click Add Product.
- Enter a Name of the product (it must be unique) and choose Who is this for?: Applicant, Tenant or Lender (Lender appears only if it is enabled for your workspace).
- For an Applicant product, click Continue and pick a starting template; the product is created with that template's starter pages. For other types, click Create.
Build pages
Open the product to reach the Edit view.
- Click Add Tab, enter a Tab Name, and confirm. Page names can contain letters, numbers, spaces,
_and-. - From the palette on the left, drag elements onto the page. The palette has three tabs: Variables, Widgets and Controls.
- Select an element to edit it in the right-hand panel. A field's panel is grouped into VARIABLE, CONTENT, VALIDATION, CONDITION, STYLE and ADVANCED sections (common settings are listed below).
- Open the page's own settings in the right-hand panel: Page Settings (title and description), Role, Position, Custom stage, Headers, Buttons and Footer.
Common field settings
| Setting | What it does |
|---|---|
| Label, Placeholder, Hint Text | Text shown to the applicant. |
| Required | The applicant must answer before continuing. |
| Default Value / Lock Default Value | Pre-fills the field with a fixed value or another variable's value, and can stop the applicant changing it. |
| Min Length / Max Length, Min Value / Max Value | Limits for text and numbers. |
| Min Age / Max Age, Min Date / Max Date | Limits for dates. Validation Type can be Age, Relative to Variable or Relative to Date. |
| Must Match | The value must match another field, for example a confirm-email field. |
| Custom error message | The message shown when validation fails. |
| Show When / Always Hide | Shows the field only when a condition on other answers is true, or keeps it hidden while still saving its value. |
| Mask Field | Hides characters as the applicant types. Masking applies to that variable across your whole workspace. |
| Layout, Type | How list and boolean fields display: Dropdown or Bubble, Checkbox or Toggle, Slider, Date Picker and so on. |
No document uploads on the first pageUpload Documents cannot be placed on the first page. Applicants upload documents after the application exists, so put document uploads on a later page.
Page roles.
Each page has one Role:
- Regular: filled in by the applicant as part of the normal flow. This is the default.
- Agent: filled in by your team. The applicant's flow pauses here until your team submits the page, and then the applicant is notified to continue.
- Review: a decision gate for your team. Rules send the application here when it reaches review. The page has no Continue button; your team's action decides the next step. A Review page can't be the first page.
- Manager: filled in only by your parent workspace's team. Applicants and sub-tenant users can't see it.
Route between pages
In a page's On Continue section:
- Initial Provider: integrations or application flows to run when the applicant clicks Continue, before the decision.
- Decision Tree: a decision tree to run. When you pick one, a Next step dropdown appears for each of its outcomes, so you can send approved applicants to an offer page and declined ones to a decline page.
- Next step: the page to show next when no decision tree is used. Choose This is the last step to end the flow.
- Final Provider: integrations to run after the decision.
Use Custom stage to move the application to a stage when this page is submitted. See Application Lifecycle.
To see the whole flow at once, choose Flow Map from the product's row menu.
Configure product settings
Open the product's Settings page. It has four tabs:
Theme, Show Progress Bar, Redirect URL (where applicants go after finishing), Start application from back office, Start application from Customer Portal, Automatic Withdrawal, Co-Applicant flow (see Multi-Applicant Flows), Multi Product and Agent custom URLs.
Site Title and description, Require Account to apply, Enable Two-Factor Authentication.
Custom Scripts: your own JavaScript, such as analytics tags. Placement can be Start of <head>, End of <head>, Start of <body> or End of <body>.
Ready-made cURL commands (and a Postman collection) for submitting each page through the API from your own front end.
Scripts run on live pagesCustom scripts run on live applicant pages as soon as they are enabled. Use the switch in the scripts list to turn a script on or off, and test scripts in sandbox before you enable them in live.
Style with themes
Click Studio Theme on the Product Studio list to edit themes. A theme controls COLORS, FONT, LOGO, LAYOUT, STYLING, APPEARANCE and the PROGRESS BAR. Logos must be JPEG or PNG and under 200 KB.
Your Default theme applies to every product that has no other theme assigned. Assign a theme to a product with Theme on the product's General settings tab.
Theme changes apply right away to every product that uses the theme. If you edit the Default theme, the change applies to all products that don't have their own theme.
Release and manage
Publish and manage versions
- In the editor header, click the Save & Publish button. It is disabled when there are no unpublished changes.
- In Publish Product, enter a Description of your changes. Tick Set as live version if applicants should get it now.
- Click Publish.
Publishing is blocked if any of these are true:
- the product is inactive,
- a page is empty,
- a page has no next step,
- no page is set as the first step.
Open the product's Versions page to manage versions. Each version's menu has:
| Action | What it does |
|---|---|
| View Version | Opens a read-only preview of that version. |
| Set Live | Makes this version the one new applications use. |
| Restore As Draft | Replaces your current draft with a copy of this version. Unpublished draft changes are lost. |
| Clone Version | Creates a new version that copies this one, without changing the draft or the live version. |
| Flow Map | Shows the routing of that version. |
Clone, rename and launch
From a product's row menu in the Product Studio list you can Copy URL, Launch Application, Preview Application, Rename Product, Clone Product and open the Flow Map. Clone Product creates a new product, with a name you choose, that copies all the pages and routing.
Use the API
Products are built in the dashboard. Your integration usually needs only:
| Action | Method & path | Notes |
|---|---|---|
| Start an application on a product | POST /api/v1/application/ | Pass the product's product_id. See Application Lifecycle. |
| Submit a page from your own front end | POST /api/v1/page_submit/ | Pass product_referral (the product code), the page label and the page's data. Reference |
Access and best practices
Permissions
Product Studio is controlled by the Product Studio module. View access lets a user open products. Edit access is needed to create, change, publish or set versions live. Sub-tenant admins don't see Product Studio. See Roles and Permissions.
Best practices
- Build in sandbox first. Build and test the product with sandbox data, then recreate or publish it in live.
- Publish without setting live, preview, then set live. Use View Version or Preview Application to check a version before applicants see it.
- Plan routing for every outcome. When a page runs a decision tree, choose a Next step for every outcome. An outcome with no route leaves applicants stuck.
- Watch for applications in progress. Changing the live version or deactivating a product while applications are mid-flow can disrupt those applicants. Make these changes when traffic is low.
- Reuse variables. Bind fields to the same variable codes your decision trees, pricing engines and templates use, so data flows through without remapping.
Related guides
Updated 11 minutes ago