Inserting links

In this section, you will learn how to add a link or a search engine query and how to check whether a Toloker has clicked on them. Links can be opened when a certain event occurs. You can also group links together and set shortcuts for them to allow Tolokers to work faster.

If you want to insert a link without additional formatting, use the view.link component. The link is underlined and changes color after clicking on it.

{
  "type": "view.link",
  "content": "Link text",
  "url": "url"
}

View example in the sandbox.

Create a search query

For some tasks, you may need to create a link that opens the entered query in the search engine you selected. To do this, use the helper.search-query component. You can see the list of available search engines in the engine property.

{
  "type": "view.link",
  "content": "Link text",
  "url": {
    "type": "helper.search-query",
    "query": "search query",
    "engine": "google"
  }
}

Tip

If you need to insert links to several search engines with the same query, then you can take out query in the input data, and refer to them in the code via "path": "query" in order not to duplicate the request.

View example in the sandbox.

If the search engine you need is not available in the engine property, leave this field empty and enter the search query in query using the helper.join component.

View example in the sandbox.

To group multiple links together, use the view.link-group component. Links will be underlined. For emphasis, you can add a border around one of the links and remove the underline. To do this, set the theme property to primary for this link.

View example in the sandbox.

You can create a link in the form of a button using the action.open-link component. The button is added using the view.action-button component. In the payload property, specify the address or the helper.search-query component with the search query.

{
  "type": "view.action-button",
  "label": "Text on the button",
  "action": {
    "type": "action.open-link",
    "payload": "url"
  }
}

Tip

To make sure the button looks nice and doesn't stretch to the entire screen width, set view.action-button as an element of the items array for the view.list component.

When adding multiple buttons, you can arrange them horizontally (instead of vertically) in the direction property.

View example in the sandbox.

To assign a shortcut to a button, use the plugin.hotkeys component.

View example in the sandbox.

To check if the Toloker clicked on the link, use the condition.link-opened component by specifying it in the validation property.

Remember that the condition only works if a Toloker clicks the link in the interface. If the link is opened via the address bar, the condition doesn't work.

View example in the sandbox.

Add keyboard shortcuts

You can add keyboard shortcuts for links. Shortcuts allow Tolokers to open links by pressing a keyboard key, which helps them work faster.

To add a shortcut, use the plugin.hotkeys plugin. Select a key and assign it to open the link, using the action.open-link component.

{
  "type": "plugin.hotkeys",
  "y": {
    "type": "action.open-link",
    "payload": "url"
  }
}

View example in the sandbox.

Learn more about shortcuts in Configure keyboard shortcuts.

Use event-driven links

You can set a link to open when a certain event occurs. For example, when a Toloker chooses an option, this can open a specific search query. To do this, use the plugin.trigger plugin.

View example in the sandbox.

Reuse the code

Just like any piece of the code, the code for opening the link and its address can be reused using the {"$ref": "path.to.element"} structure. This is useful when adding keyboard shortcuts. To avoid duplicating the code for the link display and for plugin.hotkeys, just enter the code once in vars.

View example in the sandbox.

Learn more about reusing the code in Reuse code.