Simulator.Company
Documentation Powered by ReDoc

Simulator.Company Scripts (1.0.0)

Download OpenAPI specification:Download

Support: support@simulator.company URL: https://simulator.company
Simulator.Company REST API

get page

json

The request is sent to the corezoid process before the page is loaded. The corezoid process decides whether to display the requested page or to redirect the user to another page. Optionally, data for dynamic injection into the page body can be sent in the response.

Request Body schema: application/json
timeout
number
Default: 30
Array of objects

The list of request results

Responses

Request samples

Content type
application/json
{
  • "timeout": 30,
  • "ops": [
    ]
}

Response samples

Content type
application/json
Example
viewModel
viewModel
internal redirect
external redirect
{
  • "code": 200,
  • "data": {
    }
}

send form

json

The request is sent to the Corezoid process when a button is clicked or when interacting with a component which submitOnChange property is set to true. The request's body contains all information about the component that initiated the request and the values of all fields in the current form. The Corezoid process makes decisions regarding changes on the existing page, displaying notifications, or redirecting the user to another page.

Request Body schema: application/json
timeout
number
Default: 30
Array of objects

The list of request results

Responses

Request samples

Content type
application/json
{
  • "timeout": 30,
  • "ops": [
    ]
}

Response samples

Content type
application/json
Example
changes (current form)
changes (current form)
changes (another form)
changes (with changeRules)
changes (with contentLoop for sections)
notifications
query
internal redirect
external redirect (new tab, this is default)
external redirect (same tab)
reset content
reset content on new page
reset content with new query
ctrl("webWidget", "showMessageBar")
ctrl("webWidget", "hideMessageBar")
ctrl("webWidget", "open")
ctrl("webWidget", "close")
{
  • "code": 200,
  • "data": {
    }
}

Page

Description

All content is located on the page. Each page is a folder with a unique name and two files inside: "config" and "locale". The config file is a JSON file with two main properties: "grid" and "forms". In the "grid" property, we can adjust the arrangement of elements on the page. There are two options for placing content: "two_column" and "one_column". In the locale file, we can set up localization for the page.

Additionally, for each page it is possible to add a "style" file via the context menu. This file allows the user to define custom styles that apply only to this specific page.

Two column grid

One column grid

Configuration

Array of objects (Form)
object
Array of objects (notification)
query
object

Query string parameters

styleClass
string

css class that is defined in script style files

{
  • "forms": [
    ],
  • "grid": {
    },
  • "notifications": [
    ],
  • "query": {
    },
  • "styleClass": "my-custom-class"
}

Form

Description

The form is filled with sections, and those, in turn, with components. Forms, sections, and components have the "visibility" property, which allows for flexible layout customization. Forms are used to send a request to Corezoid when a button is clicked, provided all mandatory fields are filled and all fields are checked. Forms also offer the ability to further customize the arrangement of sections using the "grid" property. There are two types: "two_column" and "one_column".

Two column grid

One column grid

Configuration

id
string
title
string
styleClass
string

css class that is defined in script style files

visibility
string
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
object (grid)
Array of objects (Container for grouping the components)
{
  • "id": "string",
  • "title": "string",
  • "styleClass": "my-custom-class",
  • "visibility": "visible",
  • "grid": {
    },
  • "sections": [
    ]
}

Button

Description

Buttons allow users to take actions and make choices with a single tap.
Buttons communicate the actions that users can perform. They are usually placed throughout your user interface in areas such as:

- Modal windows
- Forms
- Cards

Default button

Default buttons are of high emphasis and are distinguished by their use of elevation and fill. They contain actions that are essential to your app.

Text button

Text buttons are commonly used for less prominent actions, including those found in dialogs and cards. In cards, text buttons assist in maintaining focus on the card's content.

Secondary button

Secondary buttons are of medium emphasis. They represent actions that are significant but not the primary action within an app.

Secondary buttons are of medium emphasis. They represent actions that are significant but not the primary action within an app.

Tertiary button

Tertiary buttons are low-emphasis buttons that represent actions of minimal importance within an app.

They serve as a less prominent option compared to other button types.

Quaternary button

Quaternary buttons are also low-emphasis buttons, designed for actions of even lesser importance in an app.

They serve as a straight alternative to tertiary buttons, providing an even lower level of emphasis in comparison to secondary or text buttons.

Button with context menu

Menus display a list of choices on temporary surfaces. A menu displays a list of choices on a temporary surface. It appears when the user interacts with a button.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

class
required
string
Value: "button"

Class of the component

type
string
Default: "default"
default
default
text
secondary
tertiary
quaternary
tooltip
string

Tooltip displays informative text when users hover over an element.

object

extra settings

title
string

String with bbcode

Example
default
default
text
secondary
tertiary
quaternary
{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "class": "button",
  • "type": "default",
  • "tooltip": "tooltip text",
  • "extra": {
    },
  • "title": "Button title"
}

Check

Description

Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

value
boolean

Value of the component

required
boolean
Default: false
Enum: true false

If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.

error
boolean
Default: false
Enum: true false

Error flag

errorMsg
string

Error message. Will be visible when component's 'error' flag is set to true

helpMsg
string

Help message. Will be visible when component's 'error' flag is set to false

submitOnChange
boolean
Default: false
Enum: true false

if true, changes of the element's value will trigger /send request.

class
required
string
Value: "check"

Class of the component

title
string

Title text

{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "value": true,
  • "required": false,
  • "error": false,
  • "errorMsg": "This field contains an error",
  • "helpMsg": "This information is needed to make our product better",
  • "submitOnChange": false,
  • "class": "check",
  • "title": "Element title"
}

Toggle

Description

Toggle the state of a single setting on or off.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

value
boolean
Default: false

Value of the component

required
boolean
Default: false
Enum: true false

If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.

error
boolean
Default: false
Enum: true false

Error flag

errorMsg
string

Error message. Will be visible when component's 'error' flag is set to true

helpMsg
string

Help message. Will be visible when component's 'error' flag is set to false

submitOnChange
boolean
Default: false
Enum: true false

if true, changes of the element's value will trigger /send request.

class
required
string
Value: "toggle"

Class of the component

title
string

Title text

align
string
Enum: "left" "right" "center"

Horizontal alignement

object

extra settings

{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "value": false,
  • "required": false,
  • "error": false,
  • "errorMsg": "This field contains an error",
  • "helpMsg": "This information is needed to make our product better",
  • "submitOnChange": false,
  • "class": "toggle",
  • "title": "Element title",
  • "align": "left",
  • "extra": {
    }
}

Slider

Description

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Default slider

The "Default slider" component allows users to make selections from a range of values.

SkillBar slider

The "SkillBar slider" component allows users to show the progress from a range of values. There is no any handles, it`s used only for view.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

class
required
string
Value: "slider"

Class of the component

value
string

Value of the slider

type
string
Default: "default"
Enum: "default" "skillBar"

Type of the slider

title
string

Title text

submitOnChange
boolean
Default: false
Enum: true false

if true, changes of the element's value will trigger /send request.

object

extra settings

{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "class": "slider",
  • "value": "0",
  • "type": "default",
  • "title": "Element title",
  • "submitOnChange": false,
  • "extra": {
    }
}

Label

Description

Labels allow the user to show information to user.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

class
required
string
Value: "label"

Class of the component

tooltip
string

Tooltip displays informative text when users hover over an element.

value
string

String with bbcode

align
string
Enum: "left" "right" "center"

Horizontal alignement

{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "class": "label",
  • "tooltip": "tooltip text",
  • "value": "Lorem ipsulum",
  • "align": "left"
}

Divider

Description

A divider is a thin line that groups content in lists and layouts. Dividers separate content into clear groups.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

class
required
string
Value: "divider"

Class of the component

{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "class": "divider"
}

Image

Description

“Image” allows the user to display images to other users.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

class
required
string
Value: "image"

Class of the component

value
required
string

url, or base64

align
string
Enum: "left" "right" "center"

Horizontal alignement

required
object

extra settings

{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "class": "image",
  • "value": "https://corezoid.com/logo.png",
  • "align": "left",
  • "extra": {
    }
}

File

Description

The "File" component allows the user to view a file by clicking a button. After clicking, a modal window will open displaying the file specified in the configuration.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

class
required
string
Value: "file"

Class of the component

required
object
align
string
Enum: "left" "right" "center"

Horizontal alignement

object

extra settings

{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "class": "file",
  • "value": {},
  • "align": "left",
  • "extra": {
    }
}

Carousel

Description

The "Carousel" component allows the user to display an array of files. When clicking on an icon representing a file, the same modal window as the one triggered by the "File" component will appear, displaying the selected file.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

type
string
Default: "default"
Enum: "default" "preview"

Visualization type :

  • default - list of options only
  • preview - the selected option will be displayed in a preview
class
required
string
Value: "carousel"

Class of the component

submitOnChange
boolean
Default: false
Enum: true false

if true, changes of the element's value will trigger /send request.

object (File object)
required
Array of objects
{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "type": "default",
  • "class": "carousel",
  • "submitOnChange": false,
  • "value": {},
  • "options": []
}

Copy

Description

The "Copy" icon allows the user to copy information into the clipboard.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

title
string

This value is used as a title for the copy chip

class
required
string
Value: "copy"

Class of the component

tooltip
string

Tooltip displays informative text when users hover over an element.

value
string

Value that will be copied to the clipboard

align
string
Enum: "left" "right" "center"

Horizontal alignement

submitOnClick
boolean
Enum: true false

if true, clicking the copy element will first submit form data to Corezoid, wait for response, then copy the current value to clipboard. If the server response updated the value, the new value will be copied. If false, copies current value immediately without server interaction.

object

extra settings

{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "title": "ID",
  • "class": "copy",
  • "tooltip": "tooltip text",
  • "value": "LoremIpsulum",
  • "align": "left",
  • "submitOnClick": false,
  • "extra": {
    }
}

Upload

Description

The "Upload" component allows the user to upload files to your app. After clicking, the system file explorer will appear, allowing the user to choose a file to upload.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

object

Value of the component

required
boolean
Default: false
Enum: true false

If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.

error
boolean
Default: false
Enum: true false

Error flag

errorMsg
string

Error message. Will be visible when component's 'error' flag is set to true

helpMsg
string

Help message. Will be visible when component's 'error' flag is set to false

submitOnChange
boolean
Default: false
Enum: true false

if true, changes of the element's value will trigger /send request.

class
required
string
Value: "upload"

Class of the component

title
string

Title text

align
string
Enum: "left" "right" "center"

Horizontal alignement

type
string
Default: "default"
Enum: "default" "webcam"

Component type :

  • default - upload component with preview, file will be selected from the hard disk
  • webcam - upload component with preview, screenshot will be made from webcam
required
object

extra settings

{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "value": {
    },
  • "required": false,
  • "error": false,
  • "errorMsg": "This field contains an error",
  • "helpMsg": "This information is needed to make our product better",
  • "submitOnChange": false,
  • "class": "upload",
  • "title": "Element title",
  • "align": "left",
  • "type": "default",
  • "extra": {
    }
}

Attachment

Description

Attachment allow user to upload multiply files to your app. After click the system file explorer will appear, where user can choose file to upload or use drag&drop

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

value
any

Value of the component

required
boolean
Default: false
Enum: true false

If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.

error
boolean
Default: false
Enum: true false

Error flag

errorMsg
string

Error message. Will be visible when component's 'error' flag is set to true

helpMsg
string

Help message. Will be visible when component's 'error' flag is set to false

submitOnChange
boolean
Default: false
Enum: true false

if true, changes of the element's value will trigger /send request.

class
required
string
Value: "attachment"

Class of the component

required
object

extra settings

{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "value": null,
  • "required": false,
  • "error": false,
  • "errorMsg": "This field contains an error",
  • "helpMsg": "This information is needed to make our product better",
  • "submitOnChange": false,
  • "class": "attachment",
  • "extra": {}
}

Widget

Description

We have integrated with Twilio video and Onfido.

Default widget

In default mode, the "Widget" component embeds the provided URL inside an HTML iframe.

Messaging

In default mode, the widget is an iframe that loads any URL you provide. It can be a plain HTML page (for example, a help panel or a static dashboard) or a fully interactive mini-app (for example, a calendar picker, a custom search UI, a signature pad, or a file uploader).

If your iframe content is static, it can live completely independently. But if you want it to behave like a real form control inside a script, it needs a way to exchange data with the host page.

Scripts can define both configuration and state for the widget:

  • Configuration is passed via extra.config and can contain any settings you need (theme, feature flags, API endpoints, allowed file types, etc.).
  • State is the widget value: it is part of the current form, can be submitted to the backend, and can be updated by the backend via changes.

To support these scenarios across domains, the parent page implements a small postMessage interface. The widget can request its current value/config (and even the full form data), and can send commands back (update value, upload files, resize, toggle loading, show notifications). You can implement the widget side with plain JavaScript — no knowledge of internal implementation details is required.

Transport

Communication uses the postMessage interface. The parent script Widget component listens and responds only to its iframe events.

const APP_NAME = 'scPostMessage';

// Inside widget iframe
window.addEventListener('message', (event) => {
  const { data } = event;
  if (!data || data.appName !== APP_NAME) return;

  const { type, payload, result, error } = data;
  // Your events handling here
});

// Send new value from widget
window.parent.postMessage(
  {
    appName: APP_NAME,
    type: 'UPDATE_VALUE',
    payload: { value: 'new value' },
  },
  '*'
);

Your widget is allowed to send a message to the parent window with appName = scPostMessage, type (see below), and (optionally) payload object. If the event expects any request parameter, it should be placed inside the payload object. If the event expects a response, the parent sends back another message that contains the original request fields and adds result on success or error = true on failure.

It is a good practice to add a correlation field to every request (for example requestId, timestamp, or ref) so the widget can reliably match async responses to the corresponding request. The parent echoes request fields back in the response.

// Request (widget → parent)
{
  appName: 'scPostMessage',
  timestamp: Date.now(), // optional
  type: 'REQUEST_VALUE',
  payload: { /* request parameters (optional) */ }
}

// Response (parent → widget)
{
  appName: 'scPostMessage',
  timestamp: 1710000000000,
  type: 'REQUEST_VALUE',
  /* ...original request fields... */
  result: '...',   // on success
  // error: true   // on error
}

Widget → Parent events

Type Payload keys Effect
UPDATE_VALUE value (required, any) Sets the widget form value to payload.value. This value becomes part of the current form and will be sent to the backend on submit (and may be submitted immediately if the widget is configured with submitOnChange). Use this event to send a clean value (see Legacy behavior).
REQUEST_VALUE – Parent replies with current value in result.
REQUEST_CONFIG – Parent replies with current config (extra.config).
REQUEST_FORM_DATA – Parent replies with full form data object.
UPLOAD_FILES files (required, array of File)
api (object, { uploadUrl, downloadUrl, auth })
compressionLevel (optional)		 Uploads files via the host script; reply returns uploaded file descriptors in result or error. The descriptor format matches the Upload component value (see Upload).
RESIZE_WIDGET width
height		 By default, the host script controls iframe sizing. Send this event to ask the parent script to resize the iframe to the specified dimensions (for example, to fit your widget content). Numbers are treated as pixels.
SET_LOADING isLoading (required, boolean) Toggles widget loading overlay in the parent script UI.
SEND_NOTIFICATION title
id
helperText
expire
type		 Shows a generic notification using the parent script notification system.
SEND_CUSTOM_EVENT any Sends a custom event to the host. The host forwards it to Corezoid as a form submit action with buttonId equal to the widget id and buttonData containing the event object. This event does not change the widget value.
Any other type (custom event) any If the iframe sends a message with an unknown type, the host treats it as a custom event. By default, the host forwards it to Corezoid as a form submit action with buttonId equal to the widget id and buttonData containing the event object, and it does not change the widget value. If extra.allowedEvents is set, only listed custom types are accepted; others are ignored. If extra.legacyEventsHandling is true, custom events are treated as widget value updates (legacy).

Legacy behavior: Some older widgets send messages without a type. In this case, the host treats the whole message as a value update and stores the entire event object as the widget value. For custom events (unknown type values), you can enable the same legacy “value update” behavior by setting extra.legacyEventsHandling to true; otherwise custom events are forwarded as submit actions (the same way as SEND_CUSTOM_EVENT does) and do not change the widget value.

Parent → Widget events

On widget load the parent sends UPDATE_VALUE and UPDATE_CONFIG if value or extra.config are set in the widget JSON. Later script/backend updates arrive the same way.

Type
Keys
 When sent
UPDATE_VALUE value(any) On iframe load (if set) and when value changes in script/backend.
UPDATE_CONFIG config(any) On iframe load (if extra.config set) and when config changes.
Some of Widget → Parent events result(any)
error(boolean)		 For some request-type events, the parent sends a separate response message that echoes the request fields and adds result on success or error = true on failure.

Web comments widget

Web comments allow users to add commentaries on a page.

Follow the next steps to enable this feature:

1. Go to Simulator.company
2. Select "Communications"
3. Choose "Comments Widget"
4. Create Comments Widget actor
5. Copy actorId
6. Go to script
7. Insert the actorId into the `ctrlSetting.webComments.{{actorId}}` widget section.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

value
any

Widget value (part of the current form state). The format is defined by your widget implementation.

class
required
string
Value: "widget"

Class of the component

type
string
Default: "default"
default
default
twilio
onfido
webComments
amazonConnect
submitOnChange
boolean
Enum: true false

if true, changes of the element's value will trigger /send request.

required
object

extra settings

Example
default
default
twilio
onfido
webComments
amazonConnect
{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "value": null,
  • "class": "widget",
  • "type": "default",
  • "submitOnChange": false,
  • "extra": {
    }
}

Edit

Description

Edit is an input field used in forms and dialogs.

It allows users to enter and edit text, supports multiple formats: text, numbers, email, password, multiline text, date, and color picker.

Text edit

Free-form text input.

Int edit

Integer-only input (non-digit characters are ignored). The value is stored as a number.

Float edit

Floating-point number input.

Phone edit

Phone number input.

Email edit

Email input. Validates the email format.

Password edit

Password input (characters are hidden).

Multiline edit

Multi-line text area. Configure the number of visible rows using extra.lineNumbers.

Color Picker edit

Color picker input. Uses a popover selector UI.

Date edit

Date (or date range) input. Uses a calendar popover selector UI.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

type
string
Default: "text"

Field type.

text
text
int
float
phone
email
password
multiline
date
colorPicker
required
boolean
Enum: true false

If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.

error
boolean
Enum: true false

Error flag

errorMsg
string

Error message. Will be visible when component's 'error' flag is set to true

helpMsg
string

Help message. Will be visible when component's 'error' flag is set to false

submitOnChange
boolean
Enum: true false

if true, changes of the element's value will trigger /send request.

submitOnEnter
boolean
Default: false

If true, the Enter key will submit the form (single-line fields only).

class
required
string
Value: "edit"

Class of the component

title
string

Title text

tooltip
string

Tooltip text shown near the title as an info icon and appears on hover.

autoFocus
boolean
Default: false
placeholder
string
resettable
boolean
Default: false

If true, a reset (clear) button will be displayed.

Default is true for type: date, otherwise false.

object

Additional settings for mask.

Use these options to control how the placeholder looks and behaves.

mask
string

Use mask to guide and format user input.

Value format:

  • The mask is applied to single-line inputs (it is ignored for type: multiline).
  • For type: int and type: phone, non-digit characters are removed from the final value.
  • For other single-line types, value is usually stored in the same format the user sees (including separators from the mask).

Pattern rules:

  • 0 - any digit
  • a - any letter
  • * - any character
  • Other characters are treated as fixed
  • [] - make input optional
  • {} - mark fixed characters that should be treated as part of the value (useful for fixed digits like a country code)
  • ` - anchors the previous fixed character (like a separator) so it does not shift while the user edits the value

Examples:

  • +{38}(000)000-00-00 → +38(097)123-45-67 (fixed country code in {})
  • 00/`00/`0000 → 12/03/2026 (use ` to keep separators from shifting while editing)
  • 000[-000] → 123 or 123-456 (optional part in [])
value
string

Value of the component

regexp
string

Validation rule (regular expression). If provided, it becomes the primary validation rule for the field and overrides built-in validation (including email format validation).

object

extra settings

Example
text
text
int
float
phone
email
password
multiline
date
colorPicker
{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "type": "text",
  • "required": true,
  • "error": true,
  • "errorMsg": "string",
  • "helpMsg": "string",
  • "submitOnChange": true,
  • "submitOnEnter": false,
  • "class": "edit",
  • "title": "Element title",
  • "tooltip": "tooltip text",
  • "autoFocus": false,
  • "placeholder": "Enter your name",
  • "resettable": false,
  • "maskOptions": {
    },
  • "mask": "+{38}(000)000-00-00",
  • "value": "string",
  • "regexp": "^[A-Za-z0-9_\\\\-]+$",
  • "extra": {
    }
}

Select

Description

Select components are used for collecting user-provided information from a list of options.

Default select

Menus are positioned under their emitting elements, unless they are located close to the bottom of the viewport.

Autocomplete select

The autocomplete select is a regular text input that is enhanced with a panel of suggested options.

Extended select

Select options support additional properties including avatars, icons, badges, and tooltips. These properties are rendered both in the dropdown menu and in the field displaying the selected option.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

value
string

Value of the component

required
boolean
Default: false
Enum: true false

If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.

error
boolean
Default: false
Enum: true false

Error flag

errorMsg
string

Error message. Will be visible when component's 'error' flag is set to true

helpMsg
string

Help message. Will be visible when component's 'error' flag is set to false

submitOnChange
boolean
Default: false
Enum: true false

if true, changes of the element's value will trigger /send request.

class
required
string
Value: "select"

Class of the component

type
string (Type of the select component)
Default: "default"
default
default
autocomplete
title
string

Title text

tooltip
string

Tooltip displays informative text when users hover over an element.

autoFocus
boolean
Default: false
placeholder
string
resettable
boolean (If true, reset button will be displayed)
Default: false
submitOnScroll
boolean (If true, /send request will be triggered on scroll)
Default: false
Array of objects
Example
default
default
autocomplete
{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "value": "option-id",
  • "required": false,
  • "error": false,
  • "errorMsg": "This field contains an error",
  • "helpMsg": "This information is needed to make our product better",
  • "submitOnChange": false,
  • "class": "select",
  • "type": "default",
  • "title": "Element title",
  • "tooltip": "tooltip text",
  • "autoFocus": false,
  • "placeholder": "Select your favorite number",
  • "resettable": false,
  • "submitOnScroll": false,
  • "options": [
    ]
}

Multiselect

Description

The “Multiselect” component can manage multiple selections simultaneously.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

Array of objects

Value of the component

required
boolean
Default: false
Enum: true false

If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.

error
boolean
Default: false
Enum: true false

Error flag

errorMsg
string

Error message. Will be visible when component's 'error' flag is set to true

helpMsg
string

Help message. Will be visible when component's 'error' flag is set to false

submitOnChange
boolean
Default: false
Enum: true false

if true, changes of the element's value will trigger /send request.

class
required
string
Value: "multiselect"

Class of the component

title
string

Title text

placeholder
string
autoFocus
boolean
Default: false
Array of objects
object

extra settings

{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "value": [
    ],
  • "required": false,
  • "error": false,
  • "errorMsg": "This field contains an error",
  • "helpMsg": "This information is needed to make our product better",
  • "submitOnChange": false,
  • "class": "multiselect",
  • "title": "Element title",
  • "placeholder": "Select your favorite numbers",
  • "autoFocus": false,
  • "options": [
    ],
  • "extra": {
    }
}

Radio

Description

The “Radio” component enables the user to select a single option from a set. Radio buttons are used when the user should be able to view all available options

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

value
string

Value of the component

required
boolean
Default: false
Enum: true false

If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.

error
boolean
Default: false
Enum: true false

Error flag

errorMsg
string

Error message. Will be visible when component's 'error' flag is set to true

helpMsg
string

Help message. Will be visible when component's 'error' flag is set to false

submitOnChange
boolean
Default: false
Enum: true false

if true, changes of the element's value will trigger /send request.

class
required
string
Value: "radio"

Class of the component

object

extra settings

title
string

Title text

align
string (alignement)
Default: "left"
Enum: "left" "right" "center"
Array of objects
{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "value": "option-id",
  • "required": false,
  • "error": false,
  • "errorMsg": "This field contains an error",
  • "helpMsg": "This information is needed to make our product better",
  • "submitOnChange": false,
  • "class": "radio",
  • "extra": {
    },
  • "title": "Element title",
  • "align": "left",
  • "options": [
    ]
}

Phone

Description

The "Phone Edit" component offers users a user-friendly form for inputting phone numbers.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

object

Value of the component

required
boolean
Default: false
Enum: true false

If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.

error
boolean
Default: false
Enum: true false

Error flag

errorMsg
string

Error message. Will be visible when component's 'error' flag is set to true

helpMsg
string

Help message. Will be visible when component's 'error' flag is set to false

submitOnChange
boolean
Default: false
Enum: true false

if true, changes of the element's value will trigger /send request.

class
required
string
Value: "phone"

Class of the component

title
string

Title text

object
regexp
string (Regular expression for validation of the countryCode+number)
Array of objects
object

extra settings

{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "value": {
    },
  • "required": false,
  • "error": false,
  • "errorMsg": "This field contains an error",
  • "helpMsg": "This information is needed to make our product better",
  • "submitOnChange": false,
  • "class": "phone",
  • "title": "Element title",
  • "placeholder": {
    },
  • "regexp": "^[0-9]{9,17}$",
  • "options": [
    ],
  • "extra": {
    }
}

Tab

Description

Tabs provide a convenient way to explore and switch between various views. They help organize and facilitate navigation between groups of related content that exist at the same hierarchical level.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

class
required
string
Value: "tab"

Class of the component

value
string (Selected tab id)
align
string
Enum: "left" "right" "center"

Horizontal alignement

Array of objects
submitOnChange
boolean
Enum: true false

if true, changes of the element's value will trigger /send request.

{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "class": "tab",
  • "value": "first_tab",
  • "align": "left",
  • "options": [
    ],
  • "submitOnChange": false
}

Comments

Description

Component comments allow user to show comments with user name, description, text, date of comment and location.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

class
required
string
Value: "comments"

Class of the component

placeholder
string (Placeholder text)
Array of objects (message)
{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "class": "comments",
  • "placeholder": "There is no messages yet",
  • "value": [
    ]
}

Table

Description

Tables present datasets in an organized format that can be fully customized. They showcase data in a manner that's easy to scan, so that users can look for patterns and insights. Tables can be seamlessly integrated into primary content, such as modal windows, and may include:

- Corresponding visual representations
- Navigation options
- Tools for querying and manipulating data

Default table

A simple example with no frills.

Radio table

Radio table allows the user to select one row from a table.

Check table

Checkboxes allow the user to select one or more rows from a table.

Group table

Group tables allow the user to group table rows based on common attributes.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

class
required
any
Value: "table"
type
string
Default: "default"

The type of the table

default
default
radio
check
group
Array of objects
Array of objects (Table row)
submitOnScroll
boolean (If true, /send request will be triggered on scroll)
Default: false
object

extra settings

Example
default
default
radio
check
group
{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "class": "table",
  • "type": "default",
  • "head": [
    ],
  • "body": [
    ],
  • "submitOnScroll": false,
  • "extra": {
    }
}

Stepper

Description

The “Stepper” component enables exploring and switching between different views. The Stepper organizes and allows navigation between related groups of content that are located at the same hierarchy level. It provides the same functionality as the “Tab” component, however with another visualization.

Default stepper

Default stepper is used for desktop devices

Mobile stepper

Mobile stepper is used for mobile devices

Example

You want the sidebar stepper to be hidden on mobile devices and the main layout stepper to be visible on mobile devices.

By setting `mobileVisible: false` for the sidebar stepper and `mobileVisible: true` for the main layout stepper, you are configuring the behavior so that the sidebar stepper will be hidden on mobile devices and the main layout stepper will be visible on mobile devices.This setup will result in an auto-closing sidebar stepper (hidden on mobile) and an auto-opening stepper on the main layout (visible on mobile).

Desktop layout

Mobile layout

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

class
required
string
Value: "stepper"

Class of the component

type
string
Default: "default"
default
default
mobile
title
string

Title text

value
string

value of the component

align
string (alignement)
Default: "left"
Enum: "left" "right" "center"
object

extra settings

Array of objects
Example
default
default
mobile
{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "class": "stepper",
  • "type": "default",
  • "title": "Element title",
  • "value": "option-id",
  • "align": "left",
  • "extra": {
    },
  • "options": [
    ]
}

Otp

Description

The "OTP" component allows users to input a one-time password (OTP).

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

object

Value of the component

required
boolean
Default: false
Enum: true false

If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.

error
boolean
Default: false
Enum: true false

Error flag

errorMsg
string

Error message. Will be visible when component's 'error' flag is set to true

helpMsg
string

Help message. Will be visible when component's 'error' flag is set to false

submitOnChange
boolean
Default: false
Enum: true false

if true, changes of the element's value will trigger /send request.

class
required
string
Value: "otp"

Class of the component

type
string
Default: "text"
Enum: "text" "int"

With "int" type sets the keyboard to numeric input mode on mobile devices.

title
string

Title text

autoFocus
boolean
Default: false
object

extra settings

{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "value": {
    },
  • "required": false,
  • "error": false,
  • "errorMsg": "This field contains an error",
  • "helpMsg": "This information is needed to make our product better",
  • "submitOnChange": false,
  • "class": "otp",
  • "type": "text",
  • "title": "Element title",
  • "autoFocus": false,
  • "extra": {
    }
}

Signature

Description

The "Signature" component allows users to create handwritten signatures and submit them as part of a form.

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

class
required
string
Value: "signature"

Class of the component

object

Value of the component

title
string

Title text

object

extra settings

required
boolean
Default: false
Enum: true false

If set to true, this will impact the visibility of the submit button on this form. “Labels” allows the user to display information to other users.

error
boolean
Default: false
Enum: true false

Error flag

errorMsg
string

Error message. Will be visible when component's 'error' flag is set to true

helpMsg
string

Help message. Will be visible when component's 'error' flag is set to false

submitOnChange
boolean
Default: false
Enum: true false

if true, changes of the element's value will trigger /send request.

{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "class": "signature",
  • "value": null,
  • "title": "Element title",
  • "extra": {
    },
  • "required": false,
  • "error": false,
  • "errorMsg": "This field contains an error",
  • "helpMsg": "This information is needed to make our product better",
  • "submitOnChange": false
}

Main menu

Description

The main menu renders a hierarchical navigation tree that can highlight the active path, display custom badges or icons, and submit actions back to the form when users select an item.

Inline branches expand directly in the list, while deeper levels open a contextual pop-up to keep navigation compact.

Collapsed sidebar mode

When embedding the main menu into a collapsible sidebar, you can enable extra.collapsed.

  • The first level becomes an icon-only vertical stack (labels and right-side badges are hidden visually).
  • Deeper levels are always opened through popovers (equivalent to maxInlineDepth = 1).
  • Top-level leaf items show a tooltip on hover. The tooltip text is the item title. If the item has a badge, the badge text is appended in parentheses.
  • If a top-level item has no icon configured, a default circle_filled icon is used in collapsed mode.
  • A plain collapsed CSS class is added to the root element so you can target this state.

Corezoid request payload

The component state lives in value. It always carries the current activeId and expandedIds array, which are sent to Corezoid as part of the form state on each update.

Every interaction with the main menu may trigger a /send request to Corezoid. The buttonId field contains the menu id, while buttonData describes the event:

{
  "buttonId": "mainMenu",
  "buttonData": {
    "action": "select",
    "id": "flows", // id of the clicked item
    "path": ["operations", "automation", "flows"],
    "meta":  // optional meta payload provided in the item config
  }
}

If submitOnBranchToggle is enabled, expanding/collapsing a branch sends:

{
  "buttonId": "mainMenu",
  "buttonData": {
    "action": "expand" | "collapse",
    "id": "automation",
    "path": ["operations", "automation"], // full path to the branch
    "meta": // optional meta payload provided in the item config
  }
}

Configuration

id
required
string

Identifier of the component (must be unique within the scope of the form)

visibility
string
Default: "visible"
Enum: "visible" "hidden" "disabled"

Component visibility :

  • visible - component is displayed on the page, can be used
  • hidden - component is not displayed on the page
  • disabled - component is displayed, but cannot be used
row
string

Row number. Components with the same row number will be aligned in one row

w
string

Relative width of the component in the row (%). If not specified, the width will be the same for all components in the row

styleClass
string

css class that is defined in script style files

class
required
string
Value: "mainMenu"

Class of the component

required
Array of objects non-empty

Flat list of menu nodes that can be reused across the hierarchy.

required
object (Hierarchy definition)

Mapping of parent IDs to arrays of their children. The special $root key is required and must list every top-level node.

Example payload:

{
  "$root": ["home", "users", "reports"],
  "users": ["profile", "settings"]
}
object

Current state of the component that is stored in the form data and sent back to Corezoid with each update.

object

extra settings

{
  • "id": "component-1",
  • "visibility": "visible",
  • "row": "",
  • "w": "100",
  • "styleClass": "my-custom-class",
  • "class": "mainMenu",
  • "items": [
    ],
  • "structure": {
    },
  • "value": {
    },
  • "extra": {
    }
}

viewModel

Injection of variable value into the page config: "Your personal discount is {{variableName}} %"

Example

{
  "code":200,
  "viewModel":{ "value": "10" }
}
+
{
  "id":"label",
  "value":"Your personal discount is {{value}} %"
}
=
{
  "id":"label",
  "value":"Your personal discount is 10 %"
}

locale

Page localization is stored separately from the page configuration.

Example

/locale contains common keys for all pages. /pages/index/locale contains keys for the index page only.

These two locale objects will be merged, and all matching keys in the index page config will be replaced with their values.

{
  "code": 200,
  "viewModel": { "localeKey": "[[sayHello]], [[sayGoodbye]]", "name": "world" },
  "language": "en"
}

+

/pages/index/locale

{
  "sayHello": "Hello {{name}}",
  "sayGoodbye": {
    "en": "goodbye!",
    "uk": "до побачення!"
  }
}

+

/pages/index/config

{
  "id": "label",
  "value": "[[localeKey]]"
}

=

{
  "id": "label",
  "value": "Hello world, goodbye!"
}

definitions

Forms, sections, and components defined in /definitions can be reused across pages.

"$ref" is a link to a definition file in /definitions folder. It helps you keep common UI fragments in one place and reuse them across multiple pages.

How it works:

  • Create a JSON snippet under /definitions.
  • Reference it from a page configuration via "$ref": "#/path/to/definition".
  • When the page is rendered, the referenced definition is merged into the object that contains $ref.

Notes:

  • The $ref value must be a literal string (placeholders are not resolved inside $ref).
  • If a definition cannot be resolved, $ref is kept as-is.
  • If a definition is resolved, $ref is removed.
  • If both the definition and the object containing $ref define the same field, the definition value wins.
  • Best practice: avoid putting instance-specific fields (like id) into definitions unless you want them fixed everywhere.

Example

Folder structure:

/definitions
  info
  test
  next

The $ref path points to a file (or nested file path) under /definitions.

For nested folders, the path works the same way:

/definitions/common/buttons/next

is referenced as:

{ "$ref": "#/common/buttons/next" }

Form reference:

  {
    "id": "info_test",
    "type": "body",
    "$ref": "#/info"
  }

Section reference:

  {
    "id": "info_test",
    "type": "body",
    "sections": [
      {
        "id": "common",
        "$ref": "#/test"
      }
    ]
  }

Button reference:

  {
    "class": "button",
    "$ref": "#/next"
  }

contentLoop

contentLoop is a section-level mechanism for rendering repeatable UI content from a template.

It allows you to describe section.content once (as a template with placeholders), and then expand it into a final list of rendered items using an array of iteration objects (loop items).

CDU takes the section content template and repeats it once per object in contentLoop, replacing {{...}} placeholders with values from that object (and from viewModel/locale when needed). The rendered items from all iterations are appended into one final section.content array.

Where contentLoop is used

In the page config (script filesystem), inside a form section:

Option A: inline array

{
  "id": "itemsSection",
  "contentLoop": [
    { "index": "1", "title": "Item A", "amount": "10" },
    { "index": "2", "title": "Item B", "amount": "20" }
  ],
  "content": [
    { "id": "row{{index}}_title", "class": "label", "value": "{{title}}" },
    { "id": "row{{index}}_amount", "class": "label", "value": "{{amount}}" }
  ]
}

Option B: resolve the loop array from the viewModel

viewModel:

{
  "items": [
    { "index": "1", "title": "Item A", "amount": "10" },
    { "index": "2", "title": "Item B", "amount": "20" }
  ]
}

Section config:

{
  "id": "itemsSection",
  "contentLoop": "{{items}}",
  "content": [
    { "id": "row{{index}}_title", "class": "label", "value": "{{title}}" },
    { "id": "row{{index}}_amount", "class": "label", "value": "{{amount}}" }
  ]
}

How contentLoop is expanded

When CDU renders a page (initially or after updates), contentLoop must resolve to an array of objects. CDU then renders the section template (section.content) once per loop item and concatenates the results linearly (seamlessly).

Simple example

Section template:

{
  "id": "itemsSection",
  "contentLoop": [
    { "index": "1", "title": "Item A", "amount": "10" },
    { "index": "2", "title": "Item B", "amount": "20" }
  ],
  "content": [
    { "id": "row{{index}}_title", "class": "label", "value": "{{title}}" },
    { "id": "row{{index}}_amount", "class": "label", "value": "{{amount}}" }
  ]
}

Resulting section.content after expansion:

[
  { "id": "row1_title", "class": "label", "value": "Item A" },
  { "id": "row1_amount", "class": "label", "value": "10" },
  { "id": "row2_title", "class": "label", "value": "Item B" },
  { "id": "row2_amount", "class": "label", "value": "20" }
]

Notes:

  • The class field cannot be changed dynamically (no injection is applied to it).
  • $ref definitions are resolved using /definitions (best-effort).
  • [[...]] placeholders are resolved using the locale.
  • viewModel used for {{...}} placeholders is merged from multiple sources:
    • script viewModel (stored in the script filesystem),
    • runtime viewModel returned by Corezoid for full page render/reset (GET or 205 + viewModel),
    • optional runtime viewModel returned together with 200 + changes,
    • the current contentLoop item object (used as part of the viewModel while rendering that loop item).

Configuration guidelines

  • Each object in contentLoop is a data row: its fields are used to fill {{...}} placeholders in the section template (content) for that iteration.

  • It is a good practice to include a stable unique key in each contentLoop item (for example index or rowId) and use it to build unique item ids in the rendered content.

  • An empty loop is valid and means "clear content":

    { "formId": "info", "id": "itemsSection", "contentLoop": [] }

Updating a section that uses contentLoop

There are two supported ways to update dynamic section content:

1) 200 + changes with contentLoop (+ optional viewModel) (update one section content)

Use this when you want to regenerate a single section without resetting the whole page.

Below is an example of a section template in the script config. Here {{options}} is not part of a contentLoop item, so it must come from viewModel (this is useful when a placeholder refers to a large shared value that is the same for all loop items):

{
  "id": "itemsSection",
  "content": [
    { "id": "row{{index}}_title", "class": "label", "value": "{{title}}" },
    {
      "id": "row{{index}}_select",
      "class": "select",
      "options": "{{options}}",
      "value": "{{selectedOption}}"
    }
  ]
}

In your Corezoid receiver process, return a change for the target section:

{
  "code": 200,
  "data": {
    "viewModel": {
      "options": [
        /* shared select options; can be large */
      ]
    },
    "changes": [
      {
        "formId": "info",
        "id": "itemsSection",
        "contentLoop": [
          { "index": "1", "title": "Item A", "selectedOption": "1" },
          { "index": "2", "title": "Item B", "selectedOption": "2" }
        ]
      }
    ]
  }
}

viewModel is optional, but it may be needed when your section template references additional {{...}} placeholders that are not present in each contentLoop item (for example {{options}}, as shown in the section template example above).

2) 205 + viewModel (reset content)

Use this when you need to re-render the whole page snapshot (not only one section). CDU will request a full re-render using the provided viewModel. If a section uses a placeholder for the loop source (for example contentLoop: "{{items}}"), returning a new viewModel.items in 205 will rebuild that section's content with the new array:

{
  "code": 205,
  "data": {
    "viewModel": {
      "items": [
        { "index": "1", "title": "New A", "amount": "15" },
        { "index": "2", "title": "New B", "amount": "25" }
      ]
    }
  }
}

Note: this approach requires building a viewModel for the whole page. After the reset is applied, any previously applied changes are discarded because the page is replaced by a new full snapshot. For updating a single section's contentLoop, method 1 (200 + changes with contentLoop) is usually preferable.

bbcode

Bbcode - it is a string with pseudo code, that will be converted into HTML.

bbcode HTML
[b]Bold text[/b] Bold text
[i]Italic text[/i] Italic text
[u]Underline text[/u] Underline text
[ul][*]Unordered list[/*][/ul]
  • Undordered list
[iurl=log_in]Internal link[/iurl] Internal link
[url=https://simulator.company] External link[/url] External link
[div]New line[/div]
New line
[br]
[color=red]Text color[/color] Text color
[size=12]Font size[/size] Font size
[bg=green]Text back ground[/bg] Text back ground

CSS styling

Smart Forms provides flexible CSS styling with support for both legacy single-file styles and modern organized structure with @import capabilities.

Less.js Less.js Preprocessing: Smart Forms uses Less format which compiles to CSS on every file save. This enables variables, mixins, functions, and @import statements for better code organization and maintainability.

Each component has a default class that can be accessed and styled. Additionally, to style a specific element, use the "styleClass" property in the component.

Legacy style file in the project root folder

You may encounter smart forms where styling is organized in a single style file in the root folder of the project.

Here is an example of component styling in Less format, featuring variables, mixins, and Less-specific functions:

// ===== Mixins =====
// This mixin applies the same background, border and text color on hover and focus.
.hoverState(@bg; @border; @color) {
  &:hover,
  &:focus {
    background-color: @bg !important;
    border-color: @border !important;
    color: @color !important;
  }
}

// This mixin adds a subtle accessible focus ring without shifting layout.
.focusRing(@c: @primaryColor) {
  outline: none;
  box-shadow: 0 0 0 2px fade(@c, 45%);
  transition: box-shadow 0.15s ease;
}

// This mixin truncates overflowing single-line text with an ellipsis.
.truncate() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// This mixin generates a tinted hover using a lighter version of a color.
.tintHover(@c; @pct: 12%) {
  .hoverState(lighten(@c, @pct); lighten(@c, @pct); @fontColor);
}

// This mixin generates a shaded hover using a darker version of a color.
.shadeHover(@c; @pct: 10%) {
  .hoverState(darken(@c, @pct); darken(@c, @pct); @fontColor);
}

// This mixin generates a translucent background from a solid color.
.translucentBg(@c; @alpha: 50%) {
  background-color: fade(@c, @alpha);
}

// This mixin adjusts saturation for a more vivid or muted look.
.saturationHover(@c; @pct: 10%) {
  .hoverState(saturate(@c, @pct); saturate(@c, @pct); @fontColor);
}

// This mixin sets a contrasting text color based on luminance heuristics.
.onAccent(@c) when (lightness(@c) >= 50%) {
  color: #111111;
}
.onAccent(@c) when (lightness(@c) < 50%) {
  color: #ffffff;
}

// ===== Tokens =====
// These variables define the core brand colors.
@fontColor: #000000;
@secondaryColor: #EC9704;
@primaryColor: #F7C815;
@primaryOpacityColor: rgba(236,151,2, 0.5);

// These derived tokens use color functions for consistent variants.
@primaryBorderStrong: darken(@primaryColor, 8%);
@primaryBorderWeak: lighten(@primaryColor, 8%);
@primaryFocusHalo: fade(@primaryColor, 45%);
@secondarySoftBg: fade(@secondaryColor, 30%);
@accentTextOnPrimary: if((lightness(@primaryColor) >= 50%), #111111, #ffffff);

// ===== Components =====
// Button styles define visual variants and interactive states.
.button {
  // This ensures a visible focus outline for keyboard users.
  &:focus-visible { .focusRing(@primaryColor); }

  &__menu {
    .translucentBg(@primaryColor, 50%);
    &__item {
      background-color: @primaryColor;
      .onAccent(@primaryColor);
    }
  }

  // Default button
  &__default {
    background-color: @primaryColor;
    border-color: @primaryColor;
    .onAccent(@primaryColor);

    // This reuses the same hover and focus pattern via a shaded variant.
    .shadeHover(@primaryColor, 8%);
  }

  // Text button
  &__text {
    color: @primaryColor;
    .hoverState(@primaryOpacityColor; @primaryOpacityColor; @fontColor);
  }

  // Secondary button
  &__secondary {
    border-color: @primaryColor;
    color: @primaryColor;
    .tintHover(@primaryColor, 18%);
  }

  // Tertiary button
  &__tertiary {
    color: @fontColor;
    .hoverState(@primaryOpacityColor; @primaryOpacityColor; @secondaryColor);

    &:hover,
    &:focus {
      .fill { fill: @secondaryColor !important; }
    }
  }

  // Quaternary button
  &__quaternary {
    background-color: @primaryOpacityColor;
    border-color: @primaryColor;
    color: @secondaryColor;
    .hoverState(@primaryOpacityColor; @primaryOpacityColor; @secondaryColor);
  }
}

// Check component sets the main accent color for icons.
.check {
  .fill { fill: @primaryColor !important; }
}

// Label reserved for future use.
.label {}

// Divider reserved for future use.
.divider {}

// Image reserved for future use.
.image {}

// File reserved for future use.
.file {}

// Carousel reserved for future use.
.carousel {}

// Copy includes an interactive container that tints icons on hover.
.copy {
  &__container {
    &:hover,
    &:focus {
      .fill { fill: @primaryColor; }
    }
  }
}

// Upload component colors edges and glyphs with the accent.
.upload {
  &__corner { border-color: @primaryColor !important; }
  &__icon {
    path { fill: @primaryColor !important; }
  }
}

// Widget reserved for future use.
.widget {}

// Edit indicates focus using border and label color plus a halo.
.edit.focus {
  .field {
    border-color: @primaryColor !important;
    box-shadow: 0 0 0 2px @primaryFocusHalo;
  }
  .label { color: @primaryColor !important; }
}

// Calendar uses a translucent background and solid accents.
.calendar {
  .translucentBg(@primaryColor, 50%) !important;

  .selected {
    border-color: @primaryColor !important;
    background-color: @primaryColor !important;
    .onAccent(@primaryColor);
  }
  .button {
    border-color: @primaryColor !important;
    background-color: @primaryColor !important;
    .onAccent(@primaryColor);
    &:hover,
    &:focus {
      background-color: lighten(@primaryColor, 10%) !important;
      border-color: @primaryBorderWeak !important;
    }
  }
}

// Select fields communicate focus with accent border and halo.
.select {
  .focus {
    .field {
      border-color: @primaryColor !important;
      .focusRing(@primaryColor);
    }
    .label { color: @primaryColor !important; }
  }
}

// Multiselect mirrors select focus and also accents chips.
.multiselect.focus {
  .field { border-color: @primaryColor !important; }
  .label { color: @primaryColor !important; }
  .chip { border-color: @primaryColor !important; }
}

// Radio uses the accent color for checked state glyphs.
.radio {
  .fill { fill: @primaryColor !important; }
}

// Phone reserved for future use.
.phone {}

// Tab items are accented and prevent layout breaks with truncation.
.tab {
  &__item {
    border-color: @primaryColor !important;

    span {
      color: @primaryColor !important;
      .truncate();
    }

    &:hover,
    &:focus {
      background-color: @secondarySoftBg;
    }
  }
}

// Comments reserved for future use.
.comments {}

// Table uses the accent color for icons and controls.
.table {
  .fill { fill: @primaryColor !important; }

  &__pagination {
    &__button {
      color: @primaryColor !important;
      border-color: @primaryColor !important;
      .hoverState(@primaryOpacityColor; @primaryColor; @fontColor);
      &:focus-visible { .focusRing(@primaryColor); }
    }
  }

  &__button {
    border-color: @primaryColor;
    color: @primaryColor;
    .hoverState(@primaryOpacityColor; @primaryColor; @fontColor);
  }
}

// Stepper reserved for future use.
.stepper {}
.stepperMobile {}

// Otp highlights focused input with the accent and halo.
.otp {
  &__edit.focus {
    .field {
      border-color: @primaryColor !important;
      box-shadow: 0 0 0 2px @primaryFocusHalo;
    }
  }
}

// Progress bar adopts the primary color for the indicator.
.progressBar { color: @primaryColor !important; }

// Section header and close controls use the accent.
.section {
  .close_btn {
    .fill { fill: @primaryColor !important; }
  }
  &__modal__header {
    background-color: @primaryColor;
    .onAccent(@primaryColor);
  }
}

// Modal width sets a fixed maximum for centered dialogs.
.section {
  &.modal {
    .section__wrap { max-width: 700px; }
  }
}

// Slider re-colors track, handle and dots using accent variants.
.slider {
  .rc-slider-track { background-color: @primaryColor; }
  .rc-slider-handle {
    background-color: @primaryColor;
    border-color: @primaryBorderStrong;
    &:hover,
    &:focus {
      background-color: lighten(@primaryColor, 6%);
      border-color: @primaryBorderWeak;
      box-shadow: 0 0 0 2px @primaryFocusHalo;
    }
  }
  .rc-slider-dot-active { border-color: @primaryColor; }
  .rc-slider-rail {
    height: 20px;
    background-color: grey;
    border-radius: 0;
  }
  .slider__footer {
    display: none;
    margin-top: 8px;
  }
  .rc-slider-dot {
    height: 24px;
    width: 8px;
    border-radius: 4px;
  }
  .rc-slider-step { height: 20px; }
}

// Toggle uses border in rest and fills active with the accent.
.toggle {
  &__button {
    border-color: @primaryColor !important;
    .active { background-color: @primaryColor !important; }
    &:hover { border-color: darken(@primaryColor, 6%) !important; }
    &:focus-visible { .focusRing(@primaryColor); }
  }
}

// Attachment adopts a vivid secondary background with contrasting text.
.attachment {
  background-color: @secondaryColor !important;
  .onAccent(@secondaryColor);
  &:hover { background-color: saturate(@secondaryColor, 8%) !important; }
}

// Signature content uses a softer translucent variant of the secondary color.
.signature {
  &__content {
    background-color: fade(@secondaryColor, 55%) !important;
    .onAccent(@secondaryColor);
  }
}

Styles folder

For better code organization, you can use the styles folder structure:

📁 styles/
├── 📄 index        # Main stylesheet
├── 📄 colors       # Color variables
├── 📄 mixins       # Reusable mixins
└── 📄 variables    # Custom variables

The index file serves as the main entry point for your styles folder. For the styles to take effect, all other files must be imported into index using @import statements. For example: @import "colors"; or @import "mixins"; to include the colors and mixins files in your main stylesheet.

To create new style files in the styles folder, click next to the styles folder. Remember that these files must be manually imported into the index file using @import statements.

Page-Specific Styles

Add style files to individual pages for page-specific styling:

📁 pages/
├── 📁 contact/
│   ├── 📄 config
│   ├── 📄 locale
│   └── 📄 style    # Page-specific styles

Each page can have its own style file (displayed as style). Page style files are automatically included at the end of the main index stylesheet and have access to all variables, mixins, and definitions from the index file, allowing you to use existing color schemes and reusable components in your page-specific styles. These styles are isolated from other pages and apply only to the specific page for which they are defined.

To manage page-specific style files, click next to any page folder and select Add styles to create a style file or Remove styles to delete it. These files will be automatically included and don't require manual @import statements.

Example file structure:

styles/
├── index        # Main stylesheet with imports
├── constants    # Variables and color definitions
└── mixins       # Reusable style mixins

styles/constants file:

// Color palette
@primaryColor: #007bff;
@secondaryColor: #6c757d;
@successColor: #28a745;
@dangerColor: #dc3545;
@warningColor: #ffc107;

// Typography
@fontFamily: 'Roboto', sans-serif;
@fontSize: 14px;
@fontWeight: 400;

// Layout
@containerMaxWidth: 1200px;
@borderRadius: 4px;
@boxShadow: 0 2px 4px rgba(0,0,0,0.1);

styles/mixins file:

// Border radius mixin
.border-radius(@radius: @borderRadius) {
  border-radius: @radius;
}

// Box shadow mixin
.box-shadow(@shadow: @boxShadow) {
  box-shadow: @shadow;
}

// Button variant mixin
.button-variant(@color) {
  background-color: @color;
  border-color: @color;

  &:hover {
    background-color: darken(@color, 10%);
    border-color: darken(@color, 10%);
  }
}

// Flexbox center mixin
.flex-center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

styles/index file:

// Import all definitions
@import "constants";
@import "mixins";

// Global styles using imported definitions
.main-container {
  max-width: @containerMaxWidth;
  font-family: @fontFamily;
  .box-shadow();
}

// Button styles using mixins
.custom-button {
  .border-radius(6px);

  &.primary {
    .button-variant(@primaryColor);
  }

  &.success {
    .button-variant(@successColor);
  }
}

// Utility classes
.centered-content {
  .flex-center();
}

Error Handling

When you save a style file, automatic Less compilation is performed. If compilation fails, the system provides clear visual feedback to help you quickly identify and fix issues. Files with errors display a red alert icon in the file tree, along with a tooltip showing the specific error message. The code editor also highlights error lines in the gutter, and clicking an error icon moves the cursor directly to the error, making it easy to locate and resolve problems.

CSS Error Example showing file tree with red error icon and editor with error annotation

Best Practices

  • Separate concerns: Store your variables, mixins, and component styles in separate files

  • Use @import: Import common definitions from styles folder

  • Consistent naming: Use descriptive class names with hyphens (-) for words and double underscores (__) to separate structural elements: .contact-form, .button__primary, .navigation-menu__default-option

  • Avoid hardcoded URLs: Use Less maps to organize external resources in one place

    @images: {
  logo: "path/logo.svg";
  background: "path/bg.jpg";
};

.header {
  background-image: url(@images[logo]);
}

  • Limit selector nesting: Keep nesting depth under 3 levels for better performance and readability

  • Use Less comments: Prefer // comments over /* */ format - Less comments are removed during compilation and won't appear in production CSS

  • Colored icons with masks: Create reusable colored icons using CSS mask property with black and white images - any color can be applied via background-color

    .colored-icon(@icon-url; @color: @primaryColor; @size: 24px) {
  width: @size;
  height: @size;
  background-color: @color;
  mask: url(@icon-url) center / contain no-repeat;
}

.delete-icon {
  .colored-icon(@images[trash], @dangerColor, 20px);
}

  • External image proxying: When you use external image URLs (starting with https://) in your styles, the system automatically adds the /api/1.0/image?src= prefix to proxy them through our servers for security and performance. Note that images attached to actors are considered internal and are not proxied