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.

Insert a normal link

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"
}
Copy text

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"
  }
}
Copy text

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.

Group links together

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.

Create a button link

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"
  }
}
Copy text

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

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

Check if the link was clicked on

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.

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"
  }
}
Copy text

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.

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.

Learn more about reusing the code in Reuse code.

Last updated: February 10, 2023