LogoLogo
Try it outResourcesAPIsAddOnsBook a demo
  • Getting Started
    • Introduction to Beefree SDK
      • Create an Application
      • Installation and Fundamentals
        • Configuration parameters
          • Configuration Reload
          • Workspaces
          • Debugging the Beefree SDK Editor
        • Methods and Events
        • Authorization Process
        • How the UID parameter works
        • Set up two-factor authentication
        • Naming conventions
      • Development Applications
      • Manage Users
      • Manage Subscriptions
      • Installation and Fundamentals
    • Tracking Message Changes
    • Sample Code
    • Release Candidate Environment
  • Visual Builders
    • Email Builder
    • Page Builder
      • Integrating Page Builder
      • Embedding videos in a page
    • Popup Builder
      • Popup Builder - Getting Started
      • Testing and Integrating
      • Setting layout and size
        • Advanced settings
    • AI-Driven Design Creation
  • APIs
    • Content Services API
      • Authentication
      • Export
      • Convert
      • Row Processing
      • AI Collection
      • Brand Style
    • Template Catalog API
      • Authentication
      • Templates
      • Categories
      • Collections
      • Designers
      • Tags
    • HTML Importer API
      • Authentication
      • Import HTML
  • Forms
    • Form Block
    • Integrating and using the Form block
      • Passing forms to the builder
      • Form structure and parameters
      • Form layout customization
      • Allowed form fields
      • Edit form field modal
  • Rows
    • Reusable Content
      • Create Reusable Content
        • Pre-build Reusable Content
          • Implement Custom Rows
        • Save Reusable Content
          • Implement Hosted Saved Rows
          • Implement Self-hosted Saved Rows
            • Self-hosted Saved Rows Concepts and Tutorial
      • Sync Reusable Content
        • Implement Synced Rows
        • Initialize Edit Single Row Mode
      • Manage Reusable Content
    • Storage for Reusable Content
      • Hosted Saved Rows
      • Self-Hosted Saved Rows
  • File manager
    • File manager application overview
      • Mime Types and Groups
  • Server-side configurations
    • Server-side options
      • Toolbar options
      • Storage options
        • Configure your AWS S3 bucket
        • Connect your file storage system
      • Content options
      • Services options
      • Undo & Changes history
      • Custom JavaScript Libraries Injection
  • Other Customizations
    • Advanced options
      • Special Links and Merge Tags
      • Content Dialog
      • Custom Color Palette
      • Font management
      • Roles and Permissions
      • Smart Merge Tags
      • Commenting
      • Custom Attributes
      • Meta Tags
      • Custom Languages
      • Display Conditions
      • Advanced Permissions
      • Custom File Picker
      • Custom Headers
    • Appearance
      • Content Defaults
      • Custom Sidebar Position
      • Content Tile Sorting
      • Content Tile Grouping
      • Loading Spinner Theme
      • Custom Tab Layout
      • Themes
      • Custom CSS
        • Change Log
    • AMP for Email
    • Collaborative Editing
      • Co-editing Integration Guide
    • Mobile Design Mode
    • Multi-language Templates
    • Cards Style and Image Round Corners
    • Hover Effect for Buttons
    • Content Area Padding
    • Line Height
  • Data Structures
    • Getting Started
    • Schema Catalog
    • Simple Schema
      • Template Schema
      • Definitions Schema
      • Row Schema
      • Column Schema
      • Title Schema
      • Image Schema
      • Button Schema
      • Paragraph Schema
      • HTML Schema
      • Menu Schema
      • List Schema
      • Icon Schema
      • Divider Schema
    • Row Metadata
    • Form Validation Schema
    • Comments Schema
      • Change Schema for Comments
  • Builder AddOns
    • AddOns
      • AddOns Overview
      • Partner AddOns
        • Partner AddOns directory
        • Installing Partner AddOns
        • DeepL
        • Stability AI
        • Azure AI Vision - Image Analysis
          • Alternate Text Generation with AI
          • AI Alt Text Bulk Generation
        • AI Writing Assistant
          • Available Providers
            • OpenAI
            • Azure OpenAI
            • Anthropic
          • AI Providers and Data Security
          • AI-Generated Meta Tag Fields
          • Token Upselling
          • Apply a Brand Tone
        • Custom AI Writing Assistant
      • Custom AddOns
        • AddOn Development
        • Contribute to the Partner AddOn Marketplace
      • AddOns Configuration
      • AddOn FAQs
  • Resources
    • Error Management
      • onWarning
      • Beefree SDK Editor Errors
      • File System Provider errors
      • JSON Parser errors
      • Template Validation and Update
      • Template validation and update errors
    • Scheduled maintenances
Powered by GitBook
LogoLogo

Policies

  • Privacy & Cookies
  • Terms of Services
  • GDPR Compliance
  • Trust Center

Contact Us

  • Submit a request
  • Book a demo
  • Report a security issue

Resources

  • Developer website
  • Create a Developer Account

© Bee Content Design, Inc. San Francisco, CA | Part of Growens

On this page
  • Pre-build Reusable Content
  • Use cases
  • Default rows
  • User/campaign tailored contents
  • Blog updates and other news
  • E-commerce products
  • Save Reusable Content
  • How it works
  • Data Structures for Rows
  • Row Metadata

Was this helpful?

Export as PDF
  1. Rows
  2. Reusable Content

Create Reusable Content

PreviousReusable ContentNextPre-build Reusable Content

Last updated 10 days ago

Was this helpful?

This feature is available on Beefree SDK and above. Upgrade a at no extra charge to explore features from higher plan tiers. Note: Usage on a development application still counts toward and limits.

The discusses, on a very high-level, the differences between key row-related features offered within Beefree SDK. This page provides more detailed information on pre-building and saving reusable content.

Pre-build Reusable Content

Use cases

User saved rows

By enabling the feature, your end users will be able to save design elements that they want to use in other designs in the future.

To display saved rows in the Rows tab, add them to the list of rows available to users by leveraging the .

Prebuilt rows

When using the standard, empty rows, users are forced to start from scratch every time they introduce a new row.

A set of pre-built rows may accelerate message construction, providing users with commonly used structures filled with sample content. For example, a set of headers, footers, news sections, etc.

With Custom rows you – the host application – are in control of the content that is included. In some cases, providing canned text can speed up the email creation process and provide consistency across all the communications.

Imagine, for example, the case of a CRM where customer success representatives can quickly build curated emails selecting from a number of pre-built text blocks.

Default rows

In addition to the empty rows that have always been part of the Beefree SDK system, we now provide a set of default rows that you can add to your application with a simple configuration parameter.

They feature a series of popular structures, filled with placeholder text, images, and buttons.

For some users, they may work better than empty rows as they allow them to immediately visualize what they can accomplish with a specific structure.

User/campaign tailored contents

Does your application onboard users asking for company or brand information?

If so, you can use custom rows to provide footers with legal information already applied (and centralized), header designs that already include the company logo, etc.

Other common use cases:

  • Approved promotional material

  • QR codes or barcodes

  • Advertising content

  • Product recommendation templates

Check how to configure these sample rows below under Rows configuration > Parameters > Default rows

Blog updates and other news

Create custom rows with content from different sources like blogging platforms, content management systems, etc.

This will allow your customers to save time and reduce errors by avoiding copying and pasting text, links, and images.

Additionally, this helps you ensure that only reviewed and approved contents, provided by a common repository, are used in the message creation.

E-commerce products

Transform products from your e-commerce catalog into custom rows, using product images, text, and call to actions to create a promotional message with a few clicks.

You can divide the products into categories and feed them into the builder as different arrays of custom rows.

Or you can use different sets of custom rows to provide different layout options in order to add design flexibility.

Save Reusable Content

In this tutorial, you will learn how to implement Saved Rows in an application that has embedded Beefree SDK.

How it works

When the feature is enabled, a new Save icon is added to the action icons when a row is selected:

The same action is also available in the row properties panel when a row is selected:

By clicking on this icon, users trigger a request to the host application to store the row’s JSON document, which includes:

  • row structure and settings;

  • contents and their settings;

  • all style settings.

It is entirely up to the host application:

  • where to store the JSON documents that describe these saved rows;

  • if and how to display them to users of the application;

  • whether to allow users to edit them individually

Data Structures for Rows

There are two data structures that are important to understand and utilize when working with both Custom Rows and Self-hosted Saved Rows.

These structures are the following:

Row Metadata

The following code shows a row with metadata and columns objects.


[
    {
        metadata: {
            name: 'My row name' // Identifies the row, required.
        }
        columns: { ... }
        ...
    }, // The row that was previously saved. - (*)
    ...
]

The metadata section of the rows schema allows you to keep track of row-specific information.


metadata: {
    "name": "My Saved Row", // The row's title displayed in the "Rows" panel.
    "tags": "product, two columns, blue",
    ... additional custom parameters
}

Required metadata

  • name: The saved row’s title displayed in the Rows panel.

    • A string of plain text that identifies the row.

    • Displayed in the row card when the row is shown in the Rows panel.

    • Used for text searches within the Rows panel

Recommended metadata

  • category: A category can be useful for organizing your feeds on the Rows tab.

  • id: A handle that identifies the row in the host application’s data storage.

  • idParent: Useful to track rows that were saved from previously saved rows. Keeping track of where a row came from allows you to implement additional editing features.

  • dateCreated: The date the row was created: useful for filtering/sorting rows for content management purposes in your application. It can also help with technical support tasks.

  • dateModified: The date a saved row was updated: useful for filtering/sorting rows for content management purposes in your application. It can also help with technical support tasks.

  • userId: To let your application decide whom can edit or saved rows.

  • tags: Useful to create filters, management, search, and in general to organize the content in your application.

Reference to learn more about how to configure these sample rows.

Saved Rows allows users to select a row in a message and save it for later use. More specifically, it allows users to submit a request to the host application to save a piece of content and turn it into a reusable element. The host application, using the feature, can feed these saved elements back to the builder as rows that can be dragged into other messages.

Also, see the !

when and how to feed them back to the builder, using the feature.

Reference the or the to learn more. Throughout the subsequent pages, these two schemas and their applications will be referenced and discussed more thoroughly.

Reference the to learn more.

Rows Configuration
Custom Rows
sample code
Custom Rows
Simple Row Schema
Rows Metadata
Simple Row Schema documentation
GitHub repository for Simple Schema
Row Metadata page
Core plan
development application
usage-based fees
Reusable Content page
Save Rows
Custom Rows feature