Merge Tags allow a single email design to display personalized content that Listrak inserts when the message is sent. Instead of manually entering values such as a customer's first name, a product title, an image, or a destination URL, you can add a Merge Tag placeholder in your design.
When the email is rendered, Listrak replaces the placeholder with the appropriate data for each recipient.
Because Figma doesn't have access to live subscriber or journey data, Studio displays easy-to-read placeholder text while you're designing. These placeholders help you understand what content will appear in the email, but they are only visual representations. The actual Merge Tag is preserved and included when the design is exported to Listrak.
For example: a product title Merge Tag may appear in Figma as a descriptive label, while the exported HTML contains the corresponding Listrak Merge Tag placeholder value:
[[Journey:Browse.Product.Title]]
**Move this section somewhere else**
Two related systems should not be folded into that count:
System links, such as
[[BrowserLink]]and[[UnsubscribeLink]], are destination presets offered by link controls.Item Block fields use the block schema and Handlebars, such as
{{Title}}. Inside an Item Block, Field Binding owns dynamic content instead of Merge Tagging.
Merge Tags and Item Blocks can coexist in the same email, but they operate in different parts of it.
Types of Tags
Journey tags
Listrak Studio groups Journey fields by campaign which include: cart abandonment, browse product, browse page, product alert, purchase/winback, Shopify order and Shopify shipping events, and subscription/welcome.
Journey tags represent data supplied by the event that triggered a message. Their form is:
[[Journey:<event path>]]
Examples:
[[Journey:Cart.Total]] [[Journey:Browse.Product.ImageURL]] [[Journey:OrderShipping.TrackingLink]]
*Explain this more*
Choose the campaign that will actually send the message. A Cart link and a Browse Product link are both destinations, but they depend on different event data.
Journey fields can also be marked as link or image values. In Setup Mode these appear with link or img guidance.
⚠️ The badge describes the value's intended HTML location; it does not convert that location for you.
Profile tags
Profile tags identify a group and field in a subscriber profile:
<<Group\Field>>
For example:
<<SubscriberAttributes\FirstName>>
Both values are required. Studio assembles and preserves the token, but it does not verify the group or field against the destination Listrak account. Spelling and account structure must match there.
Custom tags
Custom mode accepts a complete token exactly as entered. Use it when the needed syntax is not represented by Studio's Journey catalog.
Custom tags are deliberately grammar-agnostic. Studio trims and stores the value, but does not validate its delimiters, capitalization, destination suitability, or Listrak support. That flexibility makes exact verification especially important.
Setup Mode: tag a whole layer
Use Setup Mode when one complete Figma layer represents one dynamic value.
Common examples:
a text layer that consists only of a recipient's first name;
a product-title layer that should contain a Journey title;
an image or logo whose
srcshould come from a Journey image URL.
When the Merge Tag group appears
Select a supported text or image-like layer. The Merge Tag group appears when that layer can emit dynamic text or an image and is outside an Item Block.
Image eligibility follows Studio's export meaning, not only the raw Figma node type. Explicit image, logo, or social-icon tagging can establish that meaning, and a childless node with a bindable image fill can qualify. Backgrounds, spacers, and structural layers are excluded.
Inside an Item Block, Setup shows Field Binding instead. That is intentional: the block schema must resolve fields such as {{Title}}, while ordinary Merge Tags belong outside the block.
Apply a Journey tag
Select the text or image-like layer.
Open Merge Tag and choose Journey.
Choose the campaign that supplies the data.
Choose the field.
Check the generated token in the panel summary.
Changing the campaign clears the selected field because a field from the prior campaign may not exist in the new one.
Setup shows the complete field list for the chosen campaign. Match the badges to the target: ordinary values belong in text, image URL values belong on images, and destination values should normally be applied through a link control in Edit Mode.
Apply a Profile or Custom tag
For Profile, enter both Group and Field and check the assembled <<Group\Field>> value. The token remains incomplete until both inputs contain text.
For Custom, paste the full token and verify it exactly in the generated-token preview.
Saving, changing, and removing
Setup has no separate “Save Merge Tag” button. Campaign and field choices, Profile inputs, and Custom input update the selected Figma node directly. The canvas refreshes shortly afterward so its chips and indicators match the stored state.
Use untag, the applicable Setup Untag action, or None to clear the binding from the current layer. This clears the stored token, type, and campaign for that layer only. Switching among Journey, Profile, and Custom also clears the old token because their grammars are different.
Setup tagging always owns the whole layer. If only part of a sentence should be dynamic, use inline Tagging in Edit Mode.
Edit Mode: three different jobs
Edit Mode adds precision rather than repeating Setup Mode. It can:
make a link destination dynamic;
make an image source dynamic;
replace one selected run of visible text with a Merge Tag.
Link URL and Image URL Tags selectors
When an editable element exposes Link URL or Image URL, the neighboring Tags selector inserts a suitable preset into that field.
The Link URL vocabulary includes Journey destinations and the system destinations [[BrowserLink]] and [[UnsubscribeLink]]. When the design contains a supported Item Block, a design-specific block-link option can also appear where applicable.
The Image URL selector currently offers the built-in Journey image presets for Browse Product and Product Alert:
[[Journey:Browse.Product.ImageURL]] [[Journey:Alert.Item.ImageURL]]
Choosing a preset fills and commits the neighboring URL field through its normal path. It does not create a separate Merge Tag record; the existing link or image URL simply becomes the token.
The shared Link URL vocabulary is also used for navigation rows and post-export Destinations rows such as Logos, Nav, and Buttons. Each navigation row is keyed to its own child, so two links with the same visible URL can still be edited independently.
Social destination rows intentionally do not receive this selector because they represent authored profile destinations. System-link rows already contain system tokens, so another token selector would be circular.
Tag one word or phrase
Inline tagging is for copy such as:
Hello First Name, your order is ready.
where only First Name should become <<SubscriberAttributes\FirstName>>.
Enter Edit Mode and select a normal text element.
Click the selected text again to enter text interaction.
Select the word or phrase. Studio expands the selection to word boundaries.
In the overlay, switch to Tag if it opened on Link.
Choose Journey, Profile, or Custom and construct the token.
Select Apply.
You can also press Ctrl+K or Command+K with a text selection to open the Link view, then switch to Tag.
The inline Journey list contains text-valued fields only. Link and image fields are filtered out because visible copy cannot correctly act as an href or src. The overlay reports the filtering and directs you to the corresponding URL control.
Studio records the selected text, token, and occurrence index. The index distinguishes repeated text—for example, the second occurrence of “Today” rather than the first.
The canvas replaces the selected run with a readable dynamic-field label. Click an existing tagged run to reopen its stored token. Remove tag restores the original characters recorded when the tag was created.
Inline text interaction does not support _inline text rows, and inline Merge Tags are not available inside Item Blocks.
The Link and Tag overlay
Link and Tag are two views of one editing session over the current text selection.
Link view
Link view provides:
a URL input;
Journey and System Link presets;
[[BrowserLink]]and[[UnsubscribeLink]];an unsubscribe-and-redirect preset ending in
?redir=, ready for the redirect URL;Apply and Unlink actions.
Choosing a preset inserts it into the URL field. The result is an ordinary inline-link record whose destination happens to be a Listrak token.
Tag view
Tag view provides:
the Link/Tag switch;
Journey, Profile, and Custom modes;
a generated-token preview;
Apply and Remove tag actions.
This view changes visible text, not its destination.
Switching views and overlapping ranges
Switching between Link and Tag preserves the active selection, any surrounding link, and any existing tag carrier. You do not need to select the words again.
A selected run can carry both a link and a Merge Tag. If their ranges are identical, the export puts the link outside the tagged value. A tagged run may also sit wholly inside a larger link.
Studio refuses partial crossings—for example, a tag beginning inside a link and ending outside it—because that range cannot produce predictable, balanced markup. Adjust the selection so it is fully inside, fully outside, or coincident with the link.
Press Escape, click outside, apply, remove, unlink, or leave text interaction to end the overlay session.
Preview, export, and the recipient
Studio's preview is intentionally not the canonical message. Dynamic text becomes a readable label, and an unresolved dynamic image can receive a safe preview placeholder and editor overlay. Those treatments help the designer; they must not become recipient HTML.
When clean output is required, designs containing Merge Tags, Handlebars, or other dynamic structures use regeneration from stored Figma data. The generator restores the exact token to text, href, or src.
Before copy, push, or send consumption, Studio removes editor-only data-* metadata. It does not remove the Merge Tag token itself. Listrak receives that token and resolves it from the active message context.
That context must agree with the token:
a Journey token needs the matching campaign/event data;
a Profile token needs a real group and field in the target account;
Browser and Unsubscribe tokens depend on Listrak's message renderer;
a Custom token must be valid in its exact HTML location.
Studio cannot predict the result of a syntactically plausible token that is absent from the sending context. Test the final message in Listrak with realistic event and subscriber data.
Practical patterns
Personalized greeting
If the entire layer is only a name, tag the layer in Setup. If the name sits inside a sentence, select only the placeholder words and use Edit's Tag overlay.
Dynamic product card outside an Item Block
Product-title layer: Setup Journey tag
[[Journey:Browse.Product.Title]]Product image: Setup Journey tag
[[Journey:Browse.Product.ImageURL]]Product button destination: Edit Link URL tag
[[Journey:Browse.Product.Link]]
These describe one product but occupy three different HTML locations.
View-in-browser or unsubscribe destination
Use a Link URL Tags selector or the inline Link overlay and choose [[BrowserLink]] or [[UnsubscribeLink]]. These are destinations, not visible-text replacements.
Troubleshooting
The Merge Tag group is missing in Setup. Check that the selected node is eligible text or image content and is not inside an Item Block. Structural layers use other controls; Item Blocks use Field Binding.
The Journey field list is empty. Choose a campaign first. Changing campaigns deliberately clears the old field.
The inline Tag list does not show image or link fields. This is intentional. Use Image URL or Link URL for those values.
The preview shows ordinary words instead of brackets. Studio is showing a semantic label. The exact token remains the stored and exported value.
A tag cannot cross part of a link. Select wholly inside or outside the link, or select the same complete run. Partial crossings are refused.
The wrong repeated word changed. Reselect the intended occurrence. Studio stores an occurrence index, but substantial later edits to the authored copy can make an old record stale; reapply it after changing the sentence.
The token exported but Listrak did not resolve it. Verify the sending campaign, account-specific Profile names, exact Custom syntax, and whether the token is in the correct text/href/src location.
Technical knowledge and know-how
This section describes implementation boundaries for maintainers. It is not required for ordinary authoring.
Persistence
Whole-layer Merge Tags use three Figma plugin-data keys:
mergeTag mergeTagType mergeTagCampaign
mergeTag controls generated HTML. The other two keys restore the Setup authoring state.
Inline word-level tags use a separate textTags key containing JSON records:
[ { "text": "First Name", "tag": "<<SubscriberAttributes\\FirstName>>", "index": 0 } ] Inline links use the sibling textLinks store and carry href rather than tag. They remain separate stores even though generation must resolve their geometry together.
Link and image preset selectors do not use either tag store. They write the token into the existing content property, chiefly linkHref or imageUrl.
Generation and overlap rules
Outside Item Blocks, a whole-layer text Merge Tag replaces all generated text content. On an eligible image or logo, it becomes the literal src. Inside Item Blocks, field/Handlebars resolution takes precedence.
Inline tags and links are applied to the original visible text in one combined pass. This prevents one replacement from shifting the offsets used by the next.
The supported geometry is:
coincident link and tag ranges: supported, with the link outermost;
full containment: supported;
partial crossing: refused;
stale records whose original text can no longer be located: omitted during generation.
The editor uses a temporary data-imt-tag span carrier to preserve inline-tag identity. Whole-layer output similarly carries data-merge-tag while inside Studio. Clean-output stripping removes those editor attributes while leaving the literal tokens intact. The current inline output retains an otherwise inert span after its carrier attribute is stripped.
Preview and serialization
Preview transforms tokens into semantic labels and protects the canvas from unresolvable dynamic image URLs. These transforms are display state, not the source of truth.
Dynamic designs take the re-export path when canonical HTML is needed. The generator re-derives output from Figma plugin data, avoiding accidental serialization of friendly labels, transparent image placeholders, selection chrome, or other editor state.
UI architecture and shared vocabulary
The inline Link and Tag popovers live in the parent document rather than inside the message iframe. They use the shared Edit overlay seam for positioning, scroll/fit movement, cleanup, and degradation reporting.
Both views share one popoverSession. That shared session preserves the selected range, surrounding anchor, tag carrier, and original text through repeated Link/Tag switches.
Setup and inline Edit consume the Journey schema, but each filters it for its job:
Setup shows the complete selected campaign and badges link/image fields;
inline Tag removes
isLinkandisImageUrlfields;link and image selectors use purpose-built preset subsets.
The typed schema is src/schemas/journeyTags.ts; the UI consumes its shipped JavaScript counterpart in src/ui/schemas.js. Link presets also have a dedicated shared option builder used across Edit surfaces. A vocabulary change is therefore a multi-surface change and must be checked across Setup, inline Edit, URL selectors, preview, generation, and preservation probes.