Skip to main content

Set Default Custom Action for Close Button in Popup Editor

If you want to assign a custom action as the default behavior for the close button in Unlayer’s Popup Builder, you can do so by registering your own link type and assigning it in your initialization settings.

Khizar Tanveer avatar
Written by Khizar Tanveer
Updated over 3 months ago

Step 1: Register a Custom Link Type

Inside your unlayer.setLinkTypes() function, define a new link type for the popup close button.

unlayer.setLinkTypes([
  {
    name: 'custom_close',
    label: 'Close popup',
    attrs: {
      href: '#ecdp-custom-close-button'
    }
  }
]);

Step 2: Set the Custom Link Type as the Default Close Action

Inside your unlayer.init() function, add the popupCloseButton_action property to define which link type should be the default for the close button.

unlayer.init({
  tools: {
    bodies: {
      properties: {
        popupCloseButton_action: {
          editor: {
            defaultValue: {
              name: 'custom_close'
            }
          }
        }
      }
    }
  }
});

This ensures that every new popup automatically uses your custom_close link type as its close button action.

Step 3 (Optional): Add Default Link Attributes

If you also want to include predefined attributes like a custom URL or target behavior, you can extend your default configuration as shown below:

unlayer.init({
  tools: {
    bodies: {
      properties: {
        popupCloseButton_action: {
          editor: {
            defaultValue: {
              name: 'custom_close',
              attrs: {
                href: 'https://custom_website.com',
                target: '_blank'
              }
            }
          }
        }
      }
    }
  }
});

This gives your close button a fully configured custom action by default, making your popup templates more consistent and reducing manual setup time.

Did this answer your question?