Placeholders in TinyMCE via Merge Tags — Transcript

Transcript of the free Vue.js lesson Placeholders in TinyMCE via Merge Tagswatch the video lesson.

Oftentimes our emails contain dynamic content that depends on the user the email is being sent to. For example, maybe you want to show the user an item that they abandoned in their cart for an e-commerce site. Maybe you want to provide a user's unique link to download something meant just for them. Or it could be something as simple as making things feel a little bit more personable by including the recipient's name in the email body.

Whatever the case may be, Merge tags provide the power to make your email templates easy to edit, but flexible enough to have slight differences per recipient. Okay, let's get them working in our email editor. The first thing we should do is add the merge tags plugin. Next, let's also add a toolbar to give the email editors easy access to the tags.

Back over in the browser though, notice that nothing has changed yet. That's because we need to define what tags are available. This is great. It means we have complete control over what tags can be inserted.

Why? Well, because when the email is sent, only specific tags will be replaced with particular information. So, it's important that the ones creating the email only use the predefined tags. This is exactly what TinyMC supports with the Merge Tags List option.

This will be an array of objects that have a title property and a menu property. This data format means that we can group our merge tags by category. For example, maybe we have a contact category and a downloads category. Then we can organize all the recipients' merge tags under contact.

Things like the recipient's first name and last name. Then let's organize some unique links to free downloadable content under the downloads merge tags. Each of these objects under the Menu property have a value and a title. The title is the nice user-friendly name that will show up in our Merge Tag menu, and the value is the string that will be printed in our email template and replaced at send time.

Over in the browser now, we've got this nice new tool in the toolbar. It's great out though as we aren't editing any content. If I focus on the heading and click on the tool, There are our merge tags, and we can easily search through them or browse by category. When you click on any of them, they're added where your cursor is currently placed.

And we can type anything else that we'd like before or after the tag. That's all there is to adding a powerful merge tag feature to your custom email editor with TinyMCE. Oftentimes our emails contain dynamic content that depends on the user the email is being sent to. For example, maybe you want to show the user an item that they abandoned in their cart for an e-commerce site.

Maybe you want to provide a user's unique link to download something meant just for them. Or it could be something as simple as making things feel a little bit more personable by including the recipient's name in the email body. Whatever the case may be, Merge tags provide the power to make your email templates easy to edit, but flexible enough to have slight differences per recipient. Okay, let's get them working in our email editor.

The first thing we should do is add the merge tags plugin. Next, let's also add a toolbar to give the email editors easy access to the tags. Back over in the browser though, notice that nothing has changed yet. That's because we need to define what tags are available.

This is great. It means we have complete control over what tags can be inserted. Why? Well, because when the email is sent, only specific tags will be replaced with particular information.

So, it's important that the ones creating the email only use the predefined tags. This is exactly what TinyMC supports with the Merge Tags List option. This will be an array of objects that have a title property and a menu property. This data format means that we can group our merge tags by category.

For example, maybe we have a contact category and a downloads category. Then we can organize all the recipients' merge tags under contact. Things like the recipient's first name and last name. Then let's organize some unique links to free downloadable content under the downloads merge tags.

Each of these objects under the Menu property have a value and a title. The title is the nice user-friendly name that will show up in our Merge Tag menu, and the value is the string that will be printed in our email template and replaced at send time. Over in the browser now, we've got this nice new tool in the toolbar. It's great out though as we aren't editing any content.

If I focus on the heading and click on the tool, There are our merge tags, and we can easily search through them or browse by category. When you click on any of them, they're added where your cursor is currently placed. And we can type anything else that we'd like before or after the tag. That's all there is to adding a powerful merge tag feature to your custom email editor with TinyMCE.