Tokens, Classes, and Element Names in Design Huddle
Design Huddle allows you to automatically populate templates, also known as Smart Templates. Template Customization Objects (TCOs) represent the data used to populate Smart Templates. To make this possible, elements within a project must be tagged so that content can be dynamically replaced.
This article explains the three different types of tagging available in Design Huddle, what each one does, and when to use them.
The Three Types of Tagging
- Text Tokens
- Classes
- Element Names
Text Replacement (Tokens):
Text Replacements allow text content in a design to be dynamically updated. They can be used to replace all text in a text element or only a portion of the text, depending on your needs.
A token refers to the special placeholder syntax used within the text itself, but functionally, this feature enables text replacement.
There are two common replacement patterns:
- Full text replacement – Replaces the entire contents of a text box
- Partial text replacement (text_substring) – Replaces a specific word or phrase within a larger sentence or paragraph
Text Replacements are best used when the layout and styling remain the same, but the wording changes.
Common use cases include:
- Names
- Dates
- Addresses
- Product details
- Any text that changes but keeps the same overall layout
For more information on how to add text tokens, please view this Knowledge Base article: How to add Default Replacement Values for Text Tokens
Classes:
Classes allow entire elements in a project to be replaced dynamically. They are best used for images, but can also be used for text when the entire text box needs to be replaced rather than updating individual words. Classes are especially helpful when using tags across multiple projects, since once a class is created, it is saved in a dropdown. This helps maintain consistency and reduces the risk of spelling errors when tagging elements.
Common use cases include:
- Swapping logos or images
- Replacing full headlines or text blocks
For more information on how to add text classes, please view this Knowledge Base article: How to Use Elements and Classes
Element Names:
Element Names identify a specific element within a single template and are used when applying Template Customization Options (TCOs).
Element Names are best suited for workflows where:
- You need to target one exact element
- The replacement is template-specific
- Classes or Text Replacements are too broad for the use case
Unlike Classes or Text Replacements, Element Names:
- Are not reusable across multiple templates
- Are defined per element
- Provide precise, one-to-one targeting in TCO payloads
Common use cases include:
- Replacing a specific image or text element in a single template
- Applying template-specific overrides
For more information on how to add text classes, please view this Knowledge Base article: How to Use Elements and Classes
If you have any questions about Smart Templates or best practices for when to use each option, please reach out to support@designhuddle.com.