Overview
When embedding the Unlayer editor, you may want to enforce strict linking behaviors—such as ensuring all external links open in a new tab—to prevent end-users from accidentally navigating away from their email client or current webpage.
To achieve this, you can remove the "Target" selection dropdown from the editor's link configuration panel entirely. This can be done visually by injecting Custom CSS, or structurally by redefining the editor's core Link Types during initialization.
Method 1: Visual Hiding via Custom CSS
You can use Unlayer's Custom CSS feature to visually hide the specific "Target" field element within the link handler interface.
How it works: By identifying the specific CSS class or ID of the target dropdown in the editor's UI and applying a display: none; rule, users will no longer see or interact with the option. The editor will fall back to its default behavior.
Documentation: For exact instructions on injecting stylesheets, refer to the Custom JS & CSS Documentation.
Method 2: Structurally Redefining Link Types
For a more robust and secure approach, you can redefine the properties of the default "Open Website" link type directly within the editor's initialization script. This allows you to hardcode the target: "_blank" HTML attribute and completely omit the target selection field from the user interface.
Pass the following configuration snippet inside the linkTypes array when initializing your editor:
JavaScript
unlayer.init({
id: 'editor-container',
projectId: 1234, // Replace with your project ID
linkTypes: [
{
name: "web",
label: "Open Website",
inputType: "text",
placeholderText: "e.g. https://example.com",
attrs: {
href: "{{link_site}}",
target: "_blank" // Hardcodes the new tab behavior
},
fields: [
{
name: "link_site",
label: "Link",
defaultValue: "",
inputType: "text",
placeholderText: "https://example.com"
// The target selection field is intentionally omitted here
}
]
}
]
});
Important Notes
Before implementing these methods, please consider the following technical constraints:
UI vs. Data: Method 1 (Custom CSS) only hides the UI dropdown; it relies on the editor's inherent default state. Method 2 is the safer way because it explicitly writes target="_blank" into the final exported HTML attributes regardless of the UI state.
Global Application: Redefining the linkTypes array applies globally to all linkable elements (Text, Buttons, Images) across the entire editor instance.
Common Use Cases
Implementing this configuration is highly recommended when:
Email Template Design: Ensuring that click-throughs do not replace the user's active email client tab (like Gmail or Yahoo).
Simplifying UI: Removing unnecessary technical choices (like _self vs _blank) for non-technical end-users to prevent confusion.
Strict Brand Guidelines: Enforcing global UX protocols across all outbound links generated by your marketing or sales teams.
For a complete overview of managing the array, adding custom link types, and advanced customization, refer to the Link Types Documentation.