Unlayer Documentation

Unlayer Documentation

Welcome to Unlayer Documentation. It takes less than 5 minutes to get our editor up and running on your project.

These guides will take you through the process and get you up and running.

Get Started    

Link Types

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: text, email, number, etc.

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 4 months ago


What's Next

Special Links

Link Types


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.