Special Links

Define custom link types that appear in the link editor dropdown alongside standard URL and email links.

React

import { useRef } from "react";
import { DragbleEditor, DragbleEditorRef } from "dragble-react-editor";

function SpecialLinksEditor() {
  const editorRef = useRef<DragbleEditorRef>(null);

  return (
    <DragbleEditor
      ref={editorRef}
      editorKey="db_your_key"
      editorMode="email"
      options={{
        specialLinks: {
          customSpecialLinks: [
            { name: "Unsubscribe", href: "{{unsubscribe_url}}" },
            { name: "View in Browser", href: "{{web_view_url}}" },
            { name: "Manage Preferences", href: "{{preferences_url}}" },
            {
              name: "Company Website",
              href: "https://example.com",
              target: "_blank",
            },
          ],
        },
      }}
    />
  );
}

Vue

<template>
  <DragbleEditor
    ref="editorRef"
    editor-key="db_your_key"
    editor-mode="email"
    :options="editorOptions"
  />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { DragbleEditor } from "dragble-vue-editor";

const editorRef = ref<InstanceType<typeof DragbleEditor>>();

const editorOptions = {
  specialLinks: {
    customSpecialLinks: [
      { name: "Unsubscribe", href: "{{unsubscribe_url}}" },
      { name: "View in Browser", href: "{{web_view_url}}" },
      { name: "Manage Preferences", href: "{{preferences_url}}" },
    ],
  },
};
</script>

Angular

import { Component, ViewChild } from "@angular/core";
import { DragbleEditorComponent } from "dragble-angular-editor";

@Component({
  selector: "app-special-links-editor",
  standalone: true,
  imports: [DragbleEditorComponent],
  template: `
    <dragble-editor
      #editor
      editorKey="db_your_key"
      editorMode="email"
      [options]="editorOptions"
    ></dragble-editor>
  `,
})
export class SpecialLinksEditorComponent {
  @ViewChild("editor") editorComp!: DragbleEditorComponent;

  editorOptions = {
    specialLinks: {
      customSpecialLinks: [
        { name: "Unsubscribe", href: "{{unsubscribe_url}}" },
        { name: "View in Browser", href: "{{web_view_url}}" },
      ],
    },
  };
}

Vanilla JS

dragble.init({
  containerId: "editor-container",
  editorKey: "db_your_key",
  editorMode: "email",
  options: {
    specialLinks: {
      customSpecialLinks: [
        { name: "Unsubscribe", href: "{{unsubscribe_url}}" },
        { name: "View in Browser", href: "{{web_view_url}}" },
        { name: "Manage Preferences", href: "{{preferences_url}}" },
      ],
    },
  },
});

When a user selects a button, image, or text link, the special links appear as a dedicated section in the link picker.

Exclude default special links

Set excludeDefaults: true to remove all built-in special links and only show your custom links:

specialLinks: {
  excludeDefaults: true,
  customSpecialLinks: [
    { name: 'Unsubscribe', href: '{{unsubscribe_url}}' },
    { name: 'Company Website', href: 'https://example.com', target: '_blank' },
  ],
}

Link target

Each special link can specify a target attribute to control how the link opens:

customSpecialLinks: [
  { name: "Unsubscribe", href: "{{unsubscribe_url}}" }, // default target
  { name: "Company Website", href: "https://example.com", target: "_blank" }, // new tab
  { name: "Parent Frame", href: "{{parent_url}}", target: "_parent" }, // parent frame
];

Supported values: _blank, _self, _parent, _top.

Special link groups

You can organize links into named groups using SpecialLinkGroup objects:

customSpecialLinks: [
  {
    name: "System Links",
    specialLinks: [
      { name: "Unsubscribe", href: "{{unsubscribe_url}}" },
      { name: "View in Browser", href: "{{web_view_url}}" },
      { name: "Manage Preferences", href: "{{preferences_url}}" },
    ],
  },
  {
    name: "Brand Links",
    specialLinks: [
      {
        name: "Company Website",
        href: "https://example.com",
        target: "_blank",
      },
      { name: "Blog", href: "https://example.com/blog", target: "_blank" },
    ],
  },
];

Update special links at runtime

// React
editorRef.current?.editor?.setSpecialLinks({
  customSpecialLinks: [
    { name: "Unsubscribe", href: "{{unsubscribe_url}}" },
    { name: "Referral Link", href: "{{referral_url}}" },
  ],
});

// Vanilla JS
dragble.setSpecialLinks({
  customSpecialLinks: [
    { name: "Unsubscribe", href: "{{unsubscribe_url}}" },
    { name: "Referral Link", href: "{{referral_url}}" },
  ],
});

:::tip Combine with merge tags Special link href values can use merge tag syntax. Your email sending platform resolves these at delivery time, so {{unsubscribe_url}} becomes a real link for each recipient. :::

:::warning Required for CAN-SPAM compliance Email regulations require an unsubscribe link. Add one as a special link so users cannot accidentally remove or mistype it. :::

Configuration reference

Property	Type	Default	Description
excludeDefaults	boolean	false	Hide built-in default special links
customSpecialLinks	(SpecialLink | SpecialLinkGroup)[]	[]	Custom special links to add

SpecialLink

Property	Type	Required	Description
name	string	Yes	Display name in the link picker
href	string	Yes	Link URL (can use merge tag syntax)
target	string	No	Link target: _blank, _self, _parent, _top

Method reference

Method	Returns	Description
setSpecialLinks(config)	void	Replace the special links configuration at runtime
getSpecialLinks()	Promise<(SpecialLink | SpecialLinkGroup)[]>	Get the current special links list

Next steps

• Merge Tags -- dynamic personalization tokens
• Display Conditions -- conditional content rendering
• Validation -- audit designs for required links