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 { PexelizeEditor, PexelizeEditorRef } from '@pexelize/react-editor';

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

  return (
    <PexelizeEditor
      ref={editorRef}
      editorKey="pk_your_key"
      editorMode="email"
      options={{
        specialLinks: [
          {
            name: 'Unsubscribe',
            href: '{{unsubscribe_url}}',
            group: 'System Links',
          },
          {
            name: 'View in Browser',
            href: '{{web_view_url}}',
            group: 'System Links',
          },
          {
            name: 'Manage Preferences',
            href: '{{preferences_url}}',
            group: 'System Links',
          },
          {
            name: 'Company Website',
            href: 'https://example.com',
            group: 'Brand Links',
          },
        ],
      }}
    />
  );
}

Vue

<template>
  <PexelizeEditor
    ref="editorRef"
    editor-key="pk_your_key"
    editor-mode="email"
    :special-links="specialLinks"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { PexelizeEditor } from '@pexelize/vue-editor';

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

const specialLinks = [
  { name: 'Unsubscribe', href: '{{unsubscribe_url}}', group: 'System Links' },
  { name: 'View in Browser', href: '{{web_view_url}}', group: 'System Links' },
  { name: 'Manage Preferences', href: '{{preferences_url}}', group: 'System Links' },
];
</script>

Angular

import { Component, ViewChild } from '@angular/core';
import { PexelizeEditorComponent } from '@pexelize/angular-editor';

@Component({
  selector: 'app-special-links-editor',
  standalone: true,
  imports: [PexelizeEditorComponent],
  template: `
    <pexelize-editor
      #editor
      editorKey="pk_your_key"
      editorMode="email"
      [specialLinks]="specialLinks"
    ></pexelize-editor>
  `,
})
export class SpecialLinksEditorComponent {
  @ViewChild('editor') editorComp!: PexelizeEditorComponent;

  specialLinks = [
    { name: 'Unsubscribe', href: '{{unsubscribe_url}}', group: 'System Links' },
    { name: 'View in Browser', href: '{{web_view_url}}', group: 'System Links' },
  ];
}

Vanilla JS

pexelize.init({
  containerId: 'editor-container',
  editorKey: 'pk_your_key',
  editorMode: 'email',
  options: {
    specialLinks: [
      { name: 'Unsubscribe', href: '{{unsubscribe_url}}', group: 'System Links' },
      { name: 'View in Browser', href: '{{web_view_url}}', group: 'System Links' },
      { name: 'Manage Preferences', href: '{{preferences_url}}', group: 'System Links' },
    ],
  },
});

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

Update special links at runtime

// React
editorRef.current?.editor?.setSpecialLinks([
  { name: 'Unsubscribe', href: '{{unsubscribe_url}}', group: 'System Links' },
  { name: 'Referral Link', href: '{{referral_url}}', group: 'Campaign' },
]);

// Vanilla JS
pexelize.setSpecialLinks([
  { name: 'Unsubscribe', href: '{{unsubscribe_url}}', group: 'System Links' },
  { name: 'Referral Link', href: '{{referral_url}}', group: 'Campaign' },
]);

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.

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.

Method reference

Method	Returns	Description
setSpecialLinks(links)	void	Replace the special links list at runtime

Next steps

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