Link types are actions that can be taken on click of a link or button. The following link types are available by default.


Each of these generate a URL with required input from the user. For example, Open Website
asks the user for a URL and Target.


Adding a New Link Type
You can add your own link types. Every link type has the ability to add a URL to href or a JavaScript function to the onClick method of the link or button HTML tag. This could be a simple static URL, or a URL generated with user input.
You have to define the following parameters for each link type.
Parameters
Name | Description |
---|---|
name | Unique name for the link type |
label | Display label for the link type |
attrs | An object where we define the link value. For URL based links, it will have href and target. For JavaScript links, this will have onClick. |
fields | This is where we will define the input fields that the user can fill to generate the URL. Check the input field parameters below. |
Input Field Parameters
If you need to get input from users to create the URL for your link, this is how you can define the fields.
Name | Description |
---|---|
name | Unique name for the input field |
label | Display label for the input field |
defaultValue | Default value for the input field |
inputType | Input type for the field. This is the HTML input type. Examples: |
placeholderText | Placeholder text for the input field |
options | Only required for dropdown. An array of objects containing all the option labels and values. |
Examples
Here are a few examples that demonstrate different link types.
Static Link
In this example, we will add a simple https://google.com
static link as an available link type. If a user selects this action, the button will simply open Google in a new tab.


unlayer.setLinkTypes([
{
name: "static_google_link",
label: "Go to Google",
attrs: {
href: "https://google.com/",
target: "_blank"
},
}
]);
Input Generated Link
In this example, we will ask the user to enter an email and choose a country to generate the link URL. The link would look like: https://mycustomlink.com/[email protected]&country=usa
For this, we will have to define these 2 input fields.


unlayer.setLinkTypes([
{
name: 'my_custom_link_type',
label: 'Custom',
attrs: {
href: 'https://mycustomlink.com/?email={{email}}&country={{country}}',
target: '_blank',
},
fields: [
{
name: 'email',
label: 'E-mail',
defaultValue: '',
inputType: 'email',
placeholderText: null,
options: [],
},
{
name: 'country',
label: 'Country',
defaultValue: 'usa',
inputType: null,
placeholderText: null,
options: [
{ value: 'usa', label: 'United States' },
{ value: 'other', label: 'Other' },
],
},
],
}
]);
JavaScript onClick Link
In this example, we will define a link type that uses JavaScript onClick instead of href. This is useful if you are using our landing page builder.


unlayer.setLinkTypes([
{
name: 'my_custom_alert',
label: 'Show Alert',
attrs: {
onClick: 'alert("Hello World")'
}
}
]);
Disable Defaults
You can disable the default link types.
unlayer.setLinkTypes([
{
name: 'phone',
enabled: false
},
{
name: 'email',
enabled: false
},
{
name: 'sms',
enabled: false
}
]);
Updated 7 months ago
What's Next
Special Links |