Custom Attributes

Feature Overview

Custom attributes in Beefree provide Enterprise plan customers with the ability to add and use custom attributes within HTML code for emails and landing pages. These attributes enhance flexibility by allowing users to pass data efficiently without altering the core HTML structure.

Benefits and Use Cases

Adding Custom attributes to your HTML code can be particularly helpful if you are trying to achieve one of the following scenarios: 

• Integration with third-party platforms: Enables compatibility with ESPs, CRMs, and analytics tools.
• Enhanced tracking and segmentation: Allows users to 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 Beefree.

This article will cover how to enable and use custom attributes within Beefree. It will include prerequisites, setup steps, and additional considerations when adding custom attributes.

Prerequisites

Prior to getting started with Custom Attributes, ensure you meet the plan and role types specified in the following section.

Plan Type

Custom attributes are available only for Enterprise plan customers.

Role Type

Ensure you have the role type within Beefree that corresponds with the action you are trying to perform.

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

Feature Restrictions

Consider the following feature restrictions when working with Custom attributes within Beefree:

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

Terminology

Throughout this article, you’ll notice the following terms are referenced often. Before taking the steps outlined in the next section, ensure that you are familiar with the terms below:

• 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 vs. Tag: Understanding Target Types

When adding custom attributes in Beefree, you can choose between two target types: Link and Tag. The difference between these lies in where the attribute is applied within the HTML structure.

Target Type: Link

A custom attribute of the Link type is applied directly to the <a> element, which represents hyperlinks. However, for the attribute to appear in the exported HTML, the link must be inserted using the builder settings, which appear when you click on a content block. If the link is not added, the attribute will not be included.

When the link is set, the exported HTML will include the custom attribute:

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

Target Type: Tag

A custom attribute of the Tag type is applied to the entire content block rather than a specific link. This means the attribute is added to elements such as <img>.

For example, a custom attribute applied to an image block results in the following HTML:

<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.

By understanding the distinction between Link and Tag attributes, you can better structure your custom attributes to suit your email and landing page designs.

How to Use

This section includes instructions for:

• Enabling Custom attributes within your Settings
• Adding Custom attributes within the builder
• Using Custom attributes with text content blocks

Enabling Custom Attributes from Settings

Take the following steps to enable Custom attributes within your 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

Take the following steps to add Custom attributes to your design’s html from directly within the Beefree builder.

1. Select a button, image, GIF, sticker, video, or text.
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. No need to save; attributes apply immediately.

Using Custom Attributes for Text

Take the following steps to add Custom attributes to 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 persist unless removed manually.

HTML Result

This section covers what to expect in your HTML output once you export your design from Beefree.

<!-- 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

Consider the following when working with Custom attributes:

• Downgrade Behavior: Custom attributes remain in designs but are not editable.
• Plan type: Available for Enterprise plans only.  
• 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.
• When two or more custom attributes have the same name, only the most recent will appear in the builder.