Toloka

Handlebars

For creating the task interface, you can use the following in the html field on the project page:

Libraries for using Handlebars and additional components are connected by default when you create a project.

String input field

To add an input field into the task, use the {{field type="input" name="<field id>"}} component. Field ID must match the field name in the output data description . For example:

{{field type
[no-highlight[

Description

Field type: input — String input field.

Required

yes

Default value

no

]no-highlight]
="input" name
[no-highlight[

Description

Field ID. Must must match the field name in the output data description.

Required

yes

Default value

no

]no-highlight]
="result" placeholder
[no-highlight[

Description

The prompt text to display in the empty field.

Required

no

Default value

no

]no-highlight]
="Enter a word" validation-show
[no-highlight[

Description

The position of popup hints (displayed if the response didn‘t pass validation). The position is relative to the input field.

Supported values:

  • Above the input field: “top-left“, “top-center“, “top-right“.

  • Below the input field: “bottom-left“, “bottom-center“, “bottom-right“.

  • To the left of the input field: “left-top“, “left-center“, “left-bottom“.

  • To the right of the input field: “right-top“, “right-center“, “right-bottom“.

  • Don‘t display the message (“false“).

Required

no

Default value

“top-left“

]no-highlight]
="right-center"}}
Full list of parameters

Parameter

Description

Required

Default value

value

A string to be recorded into the output data file by default.

no

no

width

Width of the field. Set in the following units:

  • Pixels. For example, width="100px".

  • Percentage of the size of the parent element. For example, width="100%".

You can also use a formula for setting the width. For exaple, width="calc(100%-30px)".

no

size of field content

validation-show

The position of popup hints (displayed if the response didn't pass validation). The position is relative to the input field.

Supported values:

  • Above the input field: "top-left", "top-center", "top-right".

  • Below the input field: "bottom-left", "bottom-center", "bottom-right".

  • To the left of the input field: "left-top", "left-center", "left-bottom".

  • To the right of the input field: "right-top", "right-center", "right-bottom".

  • Don't display the message ("false").

no

"top-left"

size

Size of the field.

Supported values: "S", "M", "L", "XL".

no

"L"

disabled

Whether data can be edited:

  • disabled=true — The field can't be edited.

  • disabled=false — The field can be edited.

no

false

placeholder

The prompt text to display in the empty field.

no

no

class

The CSS class for the field. For example, class="annotation".

no

".field" ".field_type_input"

Add a field of string type into the output data description. For example:

{
  "result": {
        "type": "string",
        "required": true
    }
}

Text input field

To add a multistring text input field into the task, use the {{field type="textarea" name="<field id>"}} component. Field ID must match the field name in the output data description . For example:

{{field type
[no-highlight[

Description

Field type: textarea — Multistring text input field.

Required

yes

Default value

no

]no-highlight]
="textarea" name
[no-highlight[

Description

Field ID. Must must match the field name in the output data description.

Required

yes

Default value

no

]no-highlight]
="result" width
[no-highlight[

Description

Width of the field. Set in the following units:

  • Pixels. For example, width=“100px“.

  • Percentage of the size of the parent element. For example, width=“100%“.

You can also use a formula for setting the width. For exaple, width=“calc(100%-30px)“.

Required

no

Default value

size of field content

]no-highlight]
="270px" rows
[no-highlight[

Description

The height of the text field (the number of lines shown without scrolling).

Example: {{field type=“textarea“ name=“result“ width=“270px“ rows=5}}

Required

no

Default value

3

]no-highlight]
=5}}
Full list of parameters

Parameter

Description

Required

Default value

value

Text to be recorded into the output data file by default.

no

no

validation-show

The position of popup hints (displayed if the response didn't pass validation). The position is relative to the input field.

Supported values:

  • Above the input field: "top-left", "top-center", "top-right".

  • Below the input field: "bottom-left", "bottom-center", "bottom-right".

  • To the left of the input field: "left-top", "left-center", "left-bottom".

  • To the right of the input field: "right-top", "right-center", "right-bottom".

  • Don't display the message ("false").

no

"top-left"

size

Size of the field.

Supported values: "M", "L".

no

"L"

width

Width of the field. Set in the following units:

  • Pixels. For example, width="100px".

  • Percentage of the size of the parent element. For example, width="100%".

You can also use a formula for setting the width. For exaple, width="calc(100%-30px)".

no

size of field content

rows

The height of the text field (the number of lines shown without scrolling).

Example: {{field type="textarea" name="result" width="270px" rows=5}}

no

3

disabled

Whether data can be edited:

  • disabled=true — The field can't be edited.

  • disabled=false — The field can be edited.

no

false

resize

If the field can be resized by the user.

  • resize="vertical" — Resizable height.

  • resize="horizontal" — Resizabe width.

  • resize="both" — Resizable height and width.

no

no

placeholder

The prompt text to display in the empty field.

no

no

class

The CSS class for the field. For example, class="annotation".

no

".field" ".field_type_textarea"

Add a field of string type into the output data description. For example:

{
  "result": {
        "type": "string",
        "required": true
    }
}

String input with suggest list

Suggest list contains text suggestions that are displayed when the user points the cursor in the input field. To add a field with suggest list to the task:

  1. Define an array of strings with suggestions in JS-code (getTemplateData method) to include it into the set of input data for the project. Example:

    getTemplateData: function() {
        var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments);
        data. < name of array > = ['string 1', 'string 2', ...
            'string n'
        ];
        return data;
    }
    Example
    getTemplateData: function() {
        var data = TolokaHandlebarsTask.prototype.getTemplateData.apply(this, arguments);
        data.countries = ['Poland', 'Lithuania', 'Russia', 'Belarus', 'Latvia', 'Germany', 'France'];
        return data;
    }
  2. Add {{field type="suggest" name="<field id>" source=<name of array>}} component to HTML-code. Field ID must match the field name in the output data description . Example:

    {{field type
    [no-highlight[

    Description

    Field type: suggest — string input field with suggest list.

    Required

    yes

    Default value

    no

    ]no-highlight]
    ="suggest" name
    [no-highlight[

    Description

    Field ID. Must must match the field name in the output data description.

    Required

    yes

    Default value

    no

    ]no-highlight]
    ="result" source
    [no-highlight[

    Description

    Name of array with suggested strings. For example: source=countries. The array is defined in the JS-code of the project ( getTemplateData method).

    Required

    yes

    Default value

    no

    ]no-highlight]
    =countries allowCustomInput
    [no-highlight[

    Description

    Whether the user can ignore suggestions and enter their own string.

    Required

    no

    Default value

    false

    ]no-highlight]
    =true}}
    Full list of parameters

    Parameter

    Description

    Required

    Default value

    type

    Field type: suggest — string input field with suggest list.

    yes

    no

    source

    Name of array with suggested strings. For example: source=countries. The array is defined in the JS-code of the project ( getTemplateData method).

    yes

    no

    allowCustomInput

    Whether the user can ignore suggestions and enter their own string.

    no

    false

    validation-show

    The position of popup hints (displayed if the response didn't pass validation). The position is relative to the input field.

    Supported values:

    • Above the input field: "top-left", "top-center", "top-right".

    • Below the input field: "bottom-left", "bottom-center", "bottom-right".

    • To the left of the input field: "left-top", "left-center", "left-bottom".

    • To the right of the input field: "right-top", "right-center", "right-bottom".

    • Don't display the message ("false").

    no

    "top-left"

    placeholder

    The text to display in the empty field.

    Note. 

    If value is set, it is displayed in the input field instead of placeholder.

    no

    no

    hotkey

    Hot key for setting focus on the field.

    no

    no

    value

    Value that should be recorded as response if the user has not filled in the field.

    Note. 

    Value is displayed in the empty field instead of placeholder.

    no

    no

    class

    The CSS class for the field. For example: class="mytask_field".

    no

    ".field" ".field_type_suggest"

Radio button

To add radio buttons into the task, use the {{field type="radio" name="<field id>"}} component. Field ID must match the field name in the output data description . For example, a set of two radio buttons:

{{field type
[no-highlight[

Description

Field type: radio — Radio button.

Required

yes

Default value

no

]no-highlight]
="radio" name
[no-highlight[

Description

Field ID. Must must match the field name in the output data description.

Required

yes

Default value

no

]no-highlight]
="result" label
[no-highlight[

Description

The name of the input element in the interface. For example, label=“Yes“.

Required

no

Default value

no

]no-highlight]
="Yes" value
[no-highlight[

Description

A string to be recorded into the output data file by default.

Required

no

Default value

no

]no-highlight]
="Yes" hotkey
[no-highlight[

Description

The shortcut for selecting a value.

Required

no

Default value

no

]no-highlight]
="1"}} {{field type
[no-highlight[

Description

Field type: radio — Radio button.

Required

yes

Default value

no

]no-highlight]
="radio" name
[no-highlight[

Description

Field ID. Must must match the field name in the output data description.

Required

yes

Default value

no

]no-highlight]
="result" label
[no-highlight[

Description

The name of the input element in the interface. For example, label=“Yes“.

Required

no

Default value

no

]no-highlight]
="No" value
[no-highlight[

Description

A string to be recorded into the output data file by default.

Required

no

Default value

no

]no-highlight]
="No" hotkey
[no-highlight[

Description

The shortcut for selecting a value.

Required

no

Default value

no

]no-highlight]
="2"}}
Full list of parameters

Parameter

Description

Required

Default value

label

The name of the input element in the interface. For example, label="Yes".

no

no

value

The value to pass (written to the output file).

no

no

hotkey

The shortcut for selecting a value.

no

no

validation-show

The position of popup hints (displayed if the response didn't pass validation). The position is relative to the input field.

Supported values:

  • Above the input field: "top-left", "top-center", "top-right".

  • Below the input field: "bottom-left", "bottom-center", "bottom-right".

  • To the left of the input field: "left-top", "left-center", "left-bottom".

  • To the right of the input field: "right-top", "right-center", "right-bottom".

  • Don't display the message ("false").

no

"top-left"

checked

The state of radio button when the page is displayed:

  • checked=true — selected.

  • checked=false — deselected.

no

false

size

Size of the field.

Supported values: "M", "L".

no

"L"

width

Width of the field. Set in the following units:

  • Pixels. For example, width="100px".

  • Percentage of the size of the parent element. For example, width="100%".

You can also use a formula for setting the width. For exaple, width="calc(100%-30px)".

no

size of field content

disabled

Whether data can be edited:

  • disabled=true — The field can't be edited.

  • disabled=false — The field can be edited.

no

false

class

The CSS class for the field. For example, class="annotation".

no

".field" ".field_type_radio"

Add a field of string type into the output data description. For example:

{
  "result": {
        "type": "string",
        "required": true
    }
}

Checkbox

To add a checkbox into the task, use the {{field type="checkbox" name="<field id>"}} component. Field ID must match the field name in the output data description . For example, a set of three checkboxes:
{{field type
[no-highlight[

Description

Field type: checkbox.

Required

yes

Default value

no

]no-highlight]
="checkbox" name
[no-highlight[

Description

Field ID. Must must match the field name in the output data description.

Required

yes

Default value

no

]no-highlight]
="red" label
[no-highlight[

Description

The name of the input element in the interface. For example, label=“Yes“.

Required

no

Default value

no

]no-highlight]
="Red" hotkey
[no-highlight[

Description

The shortcut for selecting a value.

Required

no

Default value

no

]no-highlight]
="1"}} {{field type
[no-highlight[

Description

Field type: checkbox.

Required

yes

Default value

no

]no-highlight]
="checkbox" name
[no-highlight[

Description

Field ID. Must must match the field name in the output data description.

Required

yes

Default value

no

]no-highlight]
="green" label
[no-highlight[

Description

The name of the input element in the interface. For example, label=“Yes“.

Required

no

Default value

no

]no-highlight]
="Green" hotkey
[no-highlight[

Description

The shortcut for selecting a value.

Required

no

Default value

no

]no-highlight]
="2"}} {{field type
[no-highlight[

Description

Field type: checkbox.

Required

yes

Default value

no

]no-highlight]
="checkbox" name
[no-highlight[

Description

Field ID. Must must match the field name in the output data description.

Required

yes

Default value

no

]no-highlight]
="yellow" label
[no-highlight[

Description

The name of the input element in the interface. For example, label=“Yes“.

Required

no

Default value

no

]no-highlight]
="Yellow" hotkey
[no-highlight[

Description

The shortcut for selecting a value.

Required

no

Default value

no

]no-highlight]
="3"}}
Full list of parameters

Parameter

Description

Required

Default value

label

The name of the input element in the interface. For example, label="Yes".

no

no

hotkey

The shortcut for selecting a value.

no

no

value

The value to pass (written to the output file).

Supported values: true, false.

no

false

validation-show

The position of popup hints (displayed if the response didn't pass validation). The position is relative to the input field.

Supported values:

  • Above the input field: "top-left", "top-center", "top-right".

  • Below the input field: "bottom-left", "bottom-center", "bottom-right".

  • To the left of the input field: "left-top", "left-center", "left-bottom".

  • To the right of the input field: "right-top", "right-center", "right-bottom".

  • Don't display the message ("false").

no

"top-left"

checked

The state of a checkbox when the page displayed:

  • checked=true — checked.

  • checked=false — unchecked.

no

false

size

Size of the field.

Supported values: "M", "L".

no

"L"

width

Width of the field. Set in the following units:

  • Pixels. For example, width="100px".

  • Percentage of the size of the parent element. For example, width="100%".

You can also use a formula for setting the width. For exaple, width="calc(100%-30px)".

no

size of field content

disabled

Whether data can be edited:

  • disabled=true — The field can't be edited.

  • disabled=false — The field can be edited.

no

false

class

The CSS class for the field. For example, class="annotation".

no

".field" ".field_type_checkbox"

Add a field of boolean type into the output data description. For example:

{
  "red": {
        "type": "boolean",
        "required": true
            }
}

Dropdown list

To add a dropdown list into the task, use the {{#field type="select" name="<field id>"}}... {{/field}} component. Field ID must match the field name in the output data description . The entries in the dropdown list are created by the elclosed expression {{select_item}}. For example:

{{#field type
[no-highlight[

Description

Field type: select — Dropdown list.

Required

yes

Default value

no

]no-highlight]
="select" name
[no-highlight[

Description

Field ID. Must must match the field name in the output data description.

Required

yes

Default value

no

]no-highlight]
="colour" placeholder
[no-highlight[

Description

The name of the dropdown list in the interface.

Required

no

Default value

no

]no-highlight]
="Select colour" width
[no-highlight[

Description

Width of the field. Set in the following units:

  • Pixels. For example, width=“100px“.

  • Percentage of the size of the parent element. For example, width=“100%“.

You can also use a formula for setting the width. For exaple, width=“calc(100%-30px)“.

Required

no

Default value

size of field content

]no-highlight]
="200px"}} {{select_item value
[no-highlight[

Description

Text to write into the output data file if the entry is selected.

Required

no

Default value

no

]no-highlight]
="red" text
[no-highlight[

Description

The name of the list entry.

Required

no

Default value

no

]no-highlight]
="Red"}} {{select_item value
[no-highlight[

Description

Text to write into the output data file if the entry is selected.

Required

no

Default value

no

]no-highlight]
="green" text
[no-highlight[

Description

The name of the list entry.

Required

no

Default value

no

]no-highlight]
="Green"}} {{/field}}
Full list of parameters

Parameter

Description

Required

Default value

placeholder

The name of the dropdown list in the interface.

no

no

width

Width of the field. Set in the following units:

  • Pixels. For example, width="100px".

  • Percentage of the size of the parent element. For example, width="100%".

You can also use a formula for setting the width. For exaple, width="calc(100%-30px)".

no

size of field content

validation-show

The position of popup hints (displayed if the response didn't pass validation). The position is relative to the input field.

Supported values:

  • Above the input field: "top-left", "top-center", "top-right".

  • Below the input field: "bottom-left", "bottom-center", "bottom-right".

  • To the left of the input field: "left-top", "left-center", "left-bottom".

  • To the right of the input field: "right-top", "right-center", "right-bottom".

  • Don't display the message ("false").

no

"top-left"

size

Size of the field.

Supported values: "S", "M", "L".

no

"L"

class

The CSS class for the field. For example, class="annotation".

no

".field" ".field_type_select"

disabled

Whether data can be edited:

  • disabled=true — The field can't be edited.

  • disabled=false — The field can be edited.

no

false

mode

Direction in which the list is unfolded:

  • mode="dropdown" — down.

  • mode="dropup" — up.

no

"dropdown"

value

Text to write into the output data file if the entry is selected.

no

no

text

The name of the list entry.

no

no

selected

The entry selected by default:

  • selected=true — Make entry delected by default.

  • selected=false — Leave entry deselected by default.

no

false

Add a field of string type into the output data description.

{
  "colour": {
        "type": "string",
        "required": true
    }
}

Button for file upload

To add a button for file upload into the task, use the {{field type="file" name="<field id>"}} component. Field ID must match the field name in the output data description . For example:

{{field type
[no-highlight[

Description

Field type: file — Button for file upload.

Required

yes

Default value

no

]no-highlight]
="file" name
[no-highlight[

Description

Field ID. Must must match the field name in the output data description.

Required

yes

Default value

no

]no-highlight]
="result" }}
Full list of parameters

Parameter

Description

Required

Default value

label

The name of the input element in the interface. For example, label="Click me".

no

Depending on the interface language “Загрузить файл” (Russian), “Upload file” (English), “Dosya yükle” (Turkish), “Unggah file” (Indonesian).

validation-show

The position of popup hints (displayed if the response didn't pass validation). The position is relative to the input field.

Supported values:

  • Above the input field: "top-left", "top-center", "top-right".

  • Below the input field: "bottom-left", "bottom-center", "bottom-right".

  • To the left of the input field: "left-top", "left-center", "left-bottom".

  • To the right of the input field: "right-top", "right-center", "right-bottom".

  • Don't display the message ("false").

no

"top-left"

class

The CSS class for the field. For example, class="annotation".

no

".field" ".field_type_file"

Add a field of file type into the output data description. For example:

{
  "result": {
        "type": "file",
        "required": true
    }
}

Button for image file upload

To add a button for image file upload into the task, use the {{field type="file-img" name="<field id>"}} component. Field ID must match the field name in the output data description . After the image is uploaded the user will see an icon for image preview. For example:

{{field type
[no-highlight[

Description

Field type: file-img — Button for image file upload.

Required

yes

Default value

no

]no-highlight]
="file-img" name
[no-highlight[

Description

Field ID. Must must match the field name in the output data description.

Required

yes

Default value

no

]no-highlight]
="photo" camera
[no-highlight[

Description

Open the camera when the image upload button is clicked:

  • camera=true — open camera.

  • camera=false — don‘t open camera.

Required

no

Default value

false

]no-highlight]
=true}}
Full list of parameters

Parameter

Description

Required

Default value

validation-show

The position of popup hints (displayed if the response didn't pass validation). The position is relative to the input field.

Supported values:

  • Above the input field: "top-left", "top-center", "top-right".

  • Below the input field: "bottom-left", "bottom-center", "bottom-right".

  • To the left of the input field: "left-top", "left-center", "left-bottom".

  • To the right of the input field: "right-top", "right-center", "right-bottom".

  • Don't display the message ("false").

no

"top-left"

preview

Displaying an image preview after image file upload:

  • preview=true — Display an image preview.

  • preview=false — Don't display an image preview.

no

true

camera

Open the camera when the image upload button is clicked:

  • camera=true — open camera.

  • camera=false — don't open camera.

no

false

Add a field of file type into the output data description. For example:

{
  "result": {
        "type": "file",
        "required": true
    }
}

Button with click validation

If a task demands to follow a link (for example, open a webpage), Toloka can check if the user did it. The link is displayed in the task as a button.

Variations of button use:

  • Checking if the user followed the link. The output data will contain a field with values true (the user followed the link) or false (the user didn't follow the link).

  • Preventing the user from completeing the task if the link was not opened. Add "allowed_values":[true] parameter into the output data description.

To add the button with the link into the task interface, use {{field type="button-clicked" name="<field id>"}} component. Field ID must match the field name in the output data description . For example:

{{field type
[no-highlight[

Description

Field type: button-clicked — button with click validation.

Required

yes

Default value

no

]no-highlight]
="button-clicked" name
[no-highlight[

Description

Field ID. Must must match the field name in the output data description.

Required

yes

Default value

no

]no-highlight]
="ads" label
[no-highlight[

Description

The name of the input element in the interface. For example, label=“Yes“.

Required

no

Default value

no

]no-highlight]
="Click me" href
[no-highlight[

Description

URL that user must open to complete the task.

Required

no

Default value

no

]no-highlight]
="https://yandex.ru" action
[no-highlight[

Description

Button colour:

  • action=true — Yellow.

  • action=false — White.

Required

no

Default value

false

]no-highlight]
=true}}
Full list of parameters

Parameter

Description

Required

Default value

label

The name of the input element in the interface. For example, label="Yes".

no

no

href

URL that user must open to complete the task.

no

no

size

Size of the field.

Supported values: "S", "M", "L", "XL".

no

"L"

action

Button colour:

  • action=true — Yellow.

  • action=false — White.

no

false

Add a field of boolean type into the output data description. To prevent the user from sending response without opening the link, add "allowed_values":[true] parameter.

{
  "ads": {
      "type": "boolean",
      "required": true,
      "allowed_values": [true]
     }
}

Image

To add an image into the task, use the {{img src=<imageURL>}} component. For example:

{{img src
[no-highlight[

Description

Image URL. Supported values:

  • URL from the input data of the task. For example, from the field with url ID: src=url.

  • Direct link. It is recommended to use HTTPS protocol. For example, src=“https://mywebsite.ru/img1.png“.

Required

yes

Default value

no

]no-highlight]
=url width
[no-highlight[

Description

Width of the image. Set in the following units:

  • Pixels. For example, width=“100px“.

  • Percentage of the size of the parent element. For example, width=“100%“.

You can also use a formula for setting the width. For example, width=“calc(100%-30px)“.

Required

no

Default value

300px

]no-highlight]
="100px" height
[no-highlight[

Description

Height of the image. Set in the following units:

  • Pixels. For example, height=“100px“.

  • Percentage of the size of the parent element. For example, height=“100%“.

You can also use a formula for setting the width. For example, height=“calc(100%-30px)“.

Required

no

Default value

300px

]no-highlight]
="75px"}}
Full list of parameters

Parameter

Description

Required

Default value

src

Image URL. Supported values:

  • URL from the input data of the task. For example, from the field with url ID: src=url.

  • Direct link. It is recommended to use HTTPS protocol. For example, src="https://mywebsite.ru/img1.png".

yes

no

width

Width of the image. Set in the following units:

  • Pixels. For example, width="100px".

  • Percentage of the size of the parent element. For example, width="100%".

You can also use a formula for setting the width. For example, width="calc(100%-30px)".

no

300px

height

Height of the image. Set in the following units:

  • Pixels. For example, height="100px".

  • Percentage of the size of the parent element. For example, height="100%".

You can also use a formula for setting the width. For example, height="calc(100%-30px)".

no

300px

real-size

Image scale. Acceptable values:

  • real-size=false — Stretch the image to the size of the parent element.

  • real-size=true — Use the original image size (if it isn't larger than the size of the parent element).

no

false

class

CSS class for the image.

no

".img"

Button

To add a button to the task, use the {{button}} component. For example:

{{button label
[no-highlight[

Description

The name of the input element in the interface.

Required

no

Default value

empty string

]no-highlight]
="Click me" href
[no-highlight[

Description

Link opened when the user clicks the button. The link is opened in a new browser tab.

Required

no

Default value

]no-highlight]
="https://yandex.ru" action
[no-highlight[

Description

Button colour:

  • action=true — Yellow.

  • action=false — White.

Required

no

Default value

false

]no-highlight]
=true}}
Full list of parameters

Parameter

Description

Required

Default value

label

The name of the input element in the interface.

no

empty string

href

Link opened when the user clicks the button. The link is opened in a new browser tab.

no

action

Button colour:

  • action=true — Yellow.

  • action=false — White.

no

false

size

Size of the button.
  • "S" — 24 px high.

  • "M" — 28 px high.

  • "L" — 32 px high.

  • "XL" — 38 px high.

no

"M"

class

CSS class.

no

".button"

Iframe

To add an iframe into the task, use the {{iframe src=<object URL>}}. For example:

{{iframe src
[no-highlight[

Description

Page URL.

Required

yes

Default value

no

]no-highlight]
=url width
[no-highlight[

Description

Width of the frame. Set in the following units:

  • Pixels. For example, width=“100px“.

  • Percentage of the size of the parent element. For example, width=“100%“.

You can also use a formula for setting the width. For exaple, width=“calc(100%-30px)“.

Required

no

Default value

“300px“

]no-highlight]
="100px" height
[no-highlight[

Description

Height of the frame in pixels. Set in the following units:

  • Pixels. For example, height=“100px“;

  • Percentage of the size of the parent element. For example, height=“100%“.

You can also use a formula for setting the width. For example, height=“calc(100%-30px)“.

Required

no

Default value

“500px“

]no-highlight]
="100px"}}
Full list of parameters

Parameter

Description

Required

Default value

src

Page URL.

yes

no

width

Width of the frame. Set in the following units:

  • Pixels. For example, width="100px".

  • Percentage of the size of the parent element. For example, width="100%".

You can also use a formula for setting the width. For exaple, width="calc(100%-30px)".

no

"300px"

height

Height of the frame in pixels. Set in the following units:

  • Pixels. For example, height="100px";

  • Percentage of the size of the parent element. For example, height="100%".

You can also use a formula for setting the width. For example, height="calc(100%-30px)".

no

"500px"

content-width

The width of the content in the frame, in pixels. For example, content-width="700".

To make the frame the width of the screen, set content-width="false".

no

"1280"

zoom

Button for increasing the frame to the size of the browser window.

  • zoom=true — Increase frame to the browser window.
  • zoom=false — Keep the set size of frame.

no

false

class

CSS class for the frame.

no

".iframe"

sandbox

Enables sandbox mode, which restricts working in the frame.

To disable certain restrictions, you can use the following values (separate with spaces if combining them):

  • "allow-same-origin" — Allows following links within the frame (interprets them as content from the same source as the parent document).

  • "allow-top-navigation" — Allows opening frame links in the parent document.

  • "allow-forms" — Allows frame content to submit forms.

  • "allow-scripts" — Allows running and executing scripts. However, creating popup windows is prohibited.

  • "false" — Disables the restrictions listed.

no

"allow-scripts", "allow-same-origin"

Full URL path to receive data from external service

To get a get URL path for receiving data through proxy server, use the {{proxy "<relative link>"}} component. The relative link must begin with the unique name of the data source that is specified when connecting an external HTTP service. For example:

{{proxy "my_files/images"}}