Merge Tags

Insert dynamic personalization tokens into text content that get replaced with real values at send time.

React

import { useRef } from 'react';
import { PexelizeEditor, PexelizeEditorRef } from '@pexelize/react-editor';

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

  return (
    <PexelizeEditor
      ref={editorRef}
      editorKey="pk_your_key"
      editorMode="email"
      options={{
        mergeTags: {
          autocompleteTriggerChar: '{',
          tags: [
            { name: 'First Name', value: '{{first_name}}', group: 'Contact' },
            { name: 'Last Name', value: '{{last_name}}', group: 'Contact' },
            { name: 'Email', value: '{{email}}', group: 'Contact' },
            { name: 'Company', value: '{{company}}', group: 'Organization' },
            { name: 'Unsubscribe URL', value: '{{unsubscribe_url}}', group: 'Links' },
          ],
        },
      }}
    />
  );
}

Vue

<template>
  <PexelizeEditor
    ref="editorRef"
    editor-key="pk_your_key"
    editor-mode="email"
    :merge-tags="mergeTagsConfig"
  />
</template>

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

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

const mergeTagsConfig = {
  autocompleteTriggerChar: '{',
  tags: [
    { name: 'First Name', value: '{{first_name}}', group: 'Contact' },
    { name: 'Last Name', value: '{{last_name}}', group: 'Contact' },
    { name: 'Company', value: '{{company}}', group: 'Organization' },
  ],
};
</script>

Angular

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

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

  mergeTagsConfig = {
    autocompleteTriggerChar: '{',
    tags: [
      { name: 'First Name', value: '{{first_name}}', group: 'Contact' },
      { name: 'Last Name', value: '{{last_name}}', group: 'Contact' },
      { name: 'Company', value: '{{company}}', group: 'Organization' },
    ],
  };
}

Vanilla JS

pexelize.init({
  containerId: 'editor-container',
  editorKey: 'pk_your_key',
  editorMode: 'email',
  options: {
    mergeTags: {
      autocompleteTriggerChar: '{',
      tags: [
        { name: 'First Name', value: '{{first_name}}', group: 'Contact' },
        { name: 'Last Name', value: '{{last_name}}', group: 'Contact' },
        { name: 'Company', value: '{{company}}', group: 'Organization' },
        { name: 'Unsubscribe URL', value: '{{unsubscribe_url}}', group: 'Links' },
      ],
    },
  },
});

Users can type the trigger character (default {) inside any text field to open the autocomplete dropdown, or use the merge tag button in the toolbar.

Update merge tags at runtime

Call setMergeTags() to replace the tag list without reinitializing the editor:

// React
editorRef.current?.editor?.setMergeTags([
  { name: 'First Name', value: '{{first_name}}', group: 'Contact' },
  { name: 'Coupon Code', value: '{{coupon_code}}', group: 'Promo' },
]);

// Vanilla JS
pexelize.setMergeTags([
  { name: 'First Name', value: '{{first_name}}', group: 'Contact' },
  { name: 'Coupon Code', value: '{{coupon_code}}', group: 'Promo' },
]);

Merge tags in links

Merge tags also work inside link URLs. Users can insert {{unsubscribe_url}} as a button or link href from the link editor.

Merge tag groups

Tags are organized into collapsible groups in the dropdown. Every tag must have a group string. Tags with the same group value are displayed together:

const tags = [
  { name: 'First Name', value: '{{first_name}}', group: 'Contact' },
  { name: 'Last Name', value: '{{last_name}}', group: 'Contact' },
  { name: 'Company', value: '{{company}}', group: 'Organization' },
  { name: 'Plan Name', value: '{{plan_name}}', group: 'Billing' },
  { name: 'Amount Due', value: '{{amount_due}}', group: 'Billing' },
];

Custom trigger character

Set autocompleteTriggerChar to match your template engine syntax. Use '{' for Handlebars/Mustache, '%' for Liquid, or any single character.

Method reference

Method	Returns	Description
setMergeTags(tags)	void	Replace the merge tags list at runtime

Next steps

• Special Links — add custom link types like unsubscribe
• Display Conditions — show/hide rows based on merge tag values
• Custom Tools — build tools that use merge tags in their renderer