Copywriting

For projects of this type, you can use the Generating product descriptions preset.

This preset helps to create a description of products based on the image and its name.

Take a look at the example: the labeling interface includes an image, text data, button and a text input area. If the Toloker clicks on the button, a search engine opens with a request about the product. Note that validation and task layout are already configured in this example.

View example
Components used in the example

If this template doesn't meet your needs, see other examples in the Text section.

Set the desired text length

To set the desired text length, use the condition.schema component instead of condition.required. It won't let a Toloker submit a response if the text they entered is longer or shorter than specified.

Show code
View example

Use short single-line text field

For short single-line text, use the field.text component instead of field.textarea.

Show code
View example

Add a description

To add a detailed description to the task, use the label property of the view.image component.

Show code
View example

Add a layout

To enhance Toloker's experience, you can highlight different types of data with colors using view.alert.

You can place it in the view.list along with the other components.

In this example, the description is highlighted with a blue border.

Show code
View example

Remove an image

For tasks where images or columns are not required, use a simplified example without them.

Show code
View example

Add a condition

The helper.if component displays an interface element after a specific response is selected.

Parameters can be displayed using: field.radio-group, field.button-radio-group, field.checkbox.

Radio buttons
Buttons
Checkbox

Use the field.radio-group component.

Show code
View example

Use multiple columns

To compare two texts, place them in adjacent columns using the layout.columns component. It allows you to set the column width and vertical alignment.

The view.group component adds frames around the texts to visually separate them from each other and make them easier to read.

The third column in the example contains two input fields for Tolokers to write their text.

Show code
View example

Add a button that opens the search results and generate a search query link using the helper.search-query component. To make sure that a Toloker clicked on the link and checked its contents, configure validation, as in the example.

Show code
View example

Allow a Toloker to add input fields

This is a complex example that consists of four main parts.

What's unique about this example is that a Toloker can add and remove text input fields. The condition is implemented using field.list.

Show code

In addition, the example checks that each line has at least three characters, including letters and spaces. The condition is implemented using condition.schema.

Show code
View example
Components used in the example
Contact support

Last updated: April 17, 2023

Introduction
Getting started
Important tips
Useful recommendations
Working with Toloka
Projects
Pools
Tasks
Results
Project analysis
Toloka settings
Task interface
Template Builder
HTML/CSS/JS editor
Help and support
FAQTroubleshootingSupportGlossary