Custom Attributes

Beefree App is now RGE Studio!
The email design suite you already know and love just leveled up. We’re working hard to update our help center, but you still may see some references to the old product name.

Overview

Custom attributes let you add user-defined HTML attributes to elements in your emails and pages. Use them to pass data to third-party platforms and tools without changing your core HTML structure.

Benefits and Use Cases

Custom attributes can be particularly useful in the following scenarios:

• Integration with third-party platforms: Enables compatibility with ESPs, CRMs, and analytics tools.
• Enhanced tracking and segmentation: Lets you implement tracking elements and personalized content.
• Enterprise-level control: Owners, Admins, and Managers can standardize custom attributes across teams.
• Reduced human error: Eliminates the need to manually add attributes after exporting a design from RGE Studio.

Prerequisites

Plan Type

Custom attributes are available only for Enterprise plan customers.

Role Type

Your role in RGE Studio determines what you can do with custom attributes:

• Owners, Admins, and Managers can enable and manage attributes.
• Editors and Contributors can use existing attributes in the builder.

Feature Restrictions

Custom attributes have the following restrictions:

• Custom attributes are applicable to buttons, images, GIFs, stickers, videos, links, and text (titles, lists, paragraphs).
• Attributes are not saved in the workspace when added from the builder; they are design-specific.

Terminology

• Custom Attributes: User-defined attributes added to HTML elements.
• Link vs. Tag:
  • Link attributes apply to <a> elements.
  • Tag attributes apply to content blocks like <img>.
• ESP (Email Service Provider): A platform for sending emails, which may require specific custom attributes for integration.

Link and Tag attributes

When adding custom attributes in RGE Studio, you can choose between two target types: Link and Tag. The difference lies in where the attribute applies within the HTML structure.

Target Type: Link

A Link type attribute targets the <a> element, which represents hyperlinks. The attribute appears in your exported HTML only when you set a link using the builder settings. Builder settings appear when you click on a content block.

When the link is set, the exported HTML includes the custom attribute:

<a href="https://example.com" data-custom-attribute="value">Click here</a>

Target Type: Tag

A Tag type attribute applies to the entire content block rather than a specific link. For example, it adds to elements such as <img>:

<img src="image.jpg" data-custom-attribute="value" alt="Example Image">

Key considerations

• A custom attribute can be targeted as either a Link or a Tag, but not both.
• One content block can contain multiple custom attributes, which supports your tracking and customization workflows.

How to Use

• Enabling custom attributes in your Settings
• Adding custom attributes in the builder
• Using custom attributes with text content blocks

Enabling Custom Attributes from Settings

1. Navigate to Settings > General settings.

   

2. Locate the Enable custom attributes in the builder toggle under Builder preferences.

   

3. Turn the toggle ON.

   

4. Click Manage custom attributes.

5. In the modal:

   • Click Create new attribute.
   • Enter a Name (for example, data-segment-link).
   • Enter a Value (if applicable).
   • Choose a Target: Link or Tag.
   • Click Confirm.

   

6. The attributes are now available in the builder.

   

Adding Custom Attributes from the Builder

1. Select a button, image, GIF, sticker, video, text, social, icon, or menu.
2. In the sidebar, locate the Attributes section.
3. Click Add new attribute.
4. Select an existing attribute or create a new one.
5. Assign a value if required.
6. Attributes are saved automatically when added.

Using Custom Attributes for Text

1. Highlight a text element (Title, List, or Paragraph).
2. Click Add/Edit link in the toolbar.
3. Go to the Custom Attributes tab.
4. Add a new custom attribute (same process as above).
5. Attributes remain until you remove them.

HTML Result

The following shows what to expect in your HTML output after exporting your design from RGE Studio.

<!-- Container div with inline styles for typography and alignment -->
<div style="color:#ffffff; direction:ltr; font-family:Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif; font-size:15px; font-weight:400; letter-spacing:0px; line-height:150%; text-align:center; mso-line-height-alt:22.5px;">
   <p style="margin: 0;">
       <strong>
           It's a time for 
           <!-- Anchor tag with a custom tracking attribute -->
           <a 
               href="https://tracker.io" 
               target="_blank" 
               data-segment-link="mycustomtracker.com" 
               data-mce-attribute-name-1="tracker" 
               data-mce-attribute-value-1="data" 
               tracker="data" 
               style="text-decoration: underline; color: #ed1e79;" 
               rel="noopener"
           >
               queer celebration
           </a>, 
           solidarity, vigils, and tributes to those who have been lost due to hate and intolerance. It’s an exciting, often playful, sometimes sad, and incredibly important month for our queer community. Join our celebration!
       </strong>
   </p>
</div>
<!-- Explanation of the custom attribute -->
<!--
   data-segment-link="mycustomtracker.com" 
   This custom attribute is used for tracking purposes by an analytics tool or marketing platform.
   It specifies an alternate tracking URL ("mycustomtracker.com") instead of the direct href link ("tracker.io").
-->

Important Considerations

• Downgrade Behavior: Custom attributes remain in designs but are not editable.
• Bulk Import: Custom attributes are imported when cloning workspaces.
• Disabling the Feature: Attributes remain in designs but become hidden in Settings.
• Multiple Attributes: A content block can have more than one attribute.
• Duplicate attribute names: When two or more custom attributes share the same name, only the most recently created attribute appears in the builder.