Smart Merge Tags
This feature is available on Beefree SDK Core plan and above. If you're on the Essentials plan, upgrade a development application for free to try this and other Core-level features.
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
![](https://docs.beefree.io/~gitbook/image?url=https%3A%2F%2F806400411-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F8c7XIQHfAtM23Dp3ozIC%252Fuploads%252FeXMUwbBzQHBZuONxu4qU%252FSmart-merge-tags-outlined.png%3Falt%3Dmedia%26token%3Ded08e58b-c934-4eb9-abd5-163f4cd7422b&width=768&dpr=4&quality=100&sign=a3fe8d2f&sv=1)
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.
![](https://docs.beefree.io/~gitbook/image?url=https%3A%2F%2F806400411-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F8c7XIQHfAtM23Dp3ozIC%252Fuploads%252FWVfGHdnIKE2lk0Y93uXk%252F2smart-merge-tags-styled.png%3Falt%3Dmedia%26token%3D109ee594-3ecb-46fb-9228-a780a52f8fa7&width=768&dpr=4&quality=100&sign=e699cca9&sv=1)
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:
![](https://docs.beefree.io/~gitbook/image?url=https%3A%2F%2F806400411-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F8c7XIQHfAtM23Dp3ozIC%252Fuploads%252Fe88ZkAaR7dx9foR8wFpE%252F3Smart-merge-tags-with-sample-content.png%3Falt%3Dmedia%26token%3D433e1f2b-c653-4436-bb5c-e568ad65fc74&width=768&dpr=4&quality=100&sign=7c737d24&sv=1)
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.
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 standard toolbar or you’re not passing sample content for your merge tags.
Configuring sample content
After enabling Smart merge tags from your developer account, you need to apply a minor change to the merge tags’ initial configuration.
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.
The way to do this depends on how your integration manages the toolbar options.
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:
![](https://docs.beefree.io/~gitbook/image?url=https%3A%2F%2F806400411-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F8c7XIQHfAtM23Dp3ozIC%252Fuploads%252FrYc926OPQix7yW2YW85t%252F4smart-merge-tags-toolbar.png%3Falt%3Dmedia%26token%3Df20fd710-1ca4-4530-b853-af30decf022c&width=768&dpr=4&quality=100&sign=f86e4fe&sv=1)
The option works as a toggle that alternates between displaying the previewValue
and the name parameter inside the merge tag UI.
Toolbar disabled
As with all the actions available in the toolbar, we provide methods to control this option from your own UI:
Use this method to replicate the behavior described for the standard toolbar.
Last updated