Overview
When designing templates with dynamic content, you often need to include links that are generated at the time of sending or exporting. Because the actual destination URL does not exist during the design phase in Unlayer, you must use merge tags as placeholders.
To ensure the final linked text inherits your desired colors and text decorations (like underlines), you must link the merge tag to itself and apply the styles directly within the Unlayer editor. When your application parses the exported HTML, the inline CSS will remain intact on the final link.
Step-by-Step Configuration
To successfully style a dynamic link, follow this exact workflow within the editor:
Insert the Merge Tag Text: Add your desired merge tag (e.g., {{dynamic_link}}) as standard text inside a text block on the canvas.
Assign the Link to Itself: Highlight the merge tag text and click the Link icon in the text formatting toolbar. In the URL destination field, paste the exact same merge tag (e.g., {{dynamic_link}}).
Apply Link Colors and Styles: With the merge tag still highlighted, use the editor's text color or link color configuration tools to set your preferred color and styling attributes (such as removing underlines).
Post-Export Behavior: At export time, your application's backend will replace both the display text merge tag and the href URL merge tag with the final destination URL. Because the styles were applied directly to the placeholder in the editor, the generated HTML <a> tag will successfully inherit and retain those inline CSS styles.
Important Notes
Before implementing this workflow, keep the following technical constraints in mind:
Host Application Responsibility: Unlayer's export engine does not replace the merge tags with actual URLs. The editor simply outputs the raw HTML containing your merge tags. Your own application or sending provider is responsible for parsing and replacing the tags post-export.
Exact Syntax Matching: The merge tag used in the text block and the merge tag pasted into the URL field must be identical. If there is a typo in the URL field, your application's parsing logic may fail to recognize and replace the link destination.
Inline CSS Generation: Applying the color while the text is actively linked ensures Unlayer writes the style="color: #XXXXXX;" attribute directly onto the generated <a> tag, preventing email clients from overriding it with default blue link colors.
Common Use Cases
This configuration method is necessary when you need to style:
Personalized call-to-action (CTA) links that redirect to user-specific dashboards.
Unique, system-generated unsubscribe or preference center URLs.
Dynamic product, tracking, or affiliate links generated per recipient.
Reset password links triggered by individual user requests.
To dive deeper into configuring, customizing, and passing variables into the editor, review our official documentation on Merge Tags.