Unlock $10,000 in Beefree SDK Credits
Learn more
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
    • 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
  • Beefree SDK Startup Program

Resources

  • Developer website
  • Create a Developer Account

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

On this page
  • Overview
  • How it works
  • How to enable it
  • Configuring sample content
  • Displaying sample content during editing
  • Toolbar enabled
  • Toolbar disabled

Was this helpful?

Export as PDF
  1. Other Customizations
  2. Advanced options

Smart Merge Tags

PreviousRoles and PermissionsNextCommenting

Last updated 1 month 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.

Overview

Smart merge tags provide a better way for your customers to leverage personalization when creating content with Beefree SDK.

With Smart merge tags, users can:

  • quickly identify merge tags through a specific highlighting

  • see human-friendly names instead of the raw syntax – e.g., Customer Name instead of {%customer.name%}.

  • select, replace, and style merge tags with just one click

  • get sample content for each merge tag, both during editing and preview.

How it works

After enabling Smart merge tags, the builder will:

  • highlight merge tags with a dotted border

  • display the tag name you passed instead of the raw syntax

When users click on a tag, its border will become solid to signify that it has been selected. After selection, users can style, replace, or delete the merge tag with just one click.

Smart merge tags are easier to identify inside the content you’ve created and will save users tons of time. Furthermore, hiding the syntax will make it impossible for a user to break it while interacting with the overall text element.

On top of this, you can pass sample content for each merge tag, so that users can see an example of the data that will take the place of the merge tags when the web content is rendered:

How to enable it

Smart merge tags are disabled by default. If your application doesn’t have Smart merge tags, you need to activate it. It takes just a few clicks:

  • Click Details next to the application you want to configure

    • We recommend you first familiarize yourself with this feature under a DEV or QA application

  • Click view more under Application configuration.

  • Under the Services section, toggle Enable Smart merge tags ON and click the Save button.

Configuring sample content


{
  name: 'first name',
  value: '[first-name]',
  previewValue: 'John',
}

The optional previewValue parameter is used to pass to the editor a sample content (text string) for every merge tag.

The value of this new parameter will replace the merge tag in the editor preview, meaning that there’s no need to build a custom preview to display the final result of an email or landing page with rich personalization strings.

Displaying sample content during editing

Sample content strings are not limited to the preview, but can be displayed in the editor’s stage as mentioned above.

Toolbar enabled

In this case, you can simply enable the option “Show ‘Merge tag preview’ in toolbar” mentioned above.

When this option is active, the toolbar displays a new action to the user:

The option works as a toggle that alternates between displaying the previewValue and the name parameter inside the merge tag UI.

Toolbar disabled

beePluginInstance.toggleMergeTagsPreview()

Use this method to replicate the behavior described for the standard toolbar.

Notice that, at this point, you will be prompted to enable the merge tag preview in the toolbar. You can skip this option when your integration is not using the or you’re not passing sample content for your .

After enabling Smart merge tags from your developer account, you need to apply a minor change to the merge tags’ .

The way to do this depends on how your integration manages the .

As with all the actions available in the toolbar, to control this option from your own UI:

Login into the Beefree SDK Console
standard toolbar
merge tags
initial configuration
toolbar options
we provide methods
Core plan
development application
usage-based fees