Import and author HTML email content with the message editor

In this video, we’ll show you how to import and author email content in Adobe Journey Optimizer. We’re going to see how to import existing HTML content, how to use the HTML Converter, how to tweak its design, how to add a mirror page link to view the web version of the email, and how to add an unsubscription link to an external landing page. Finally, we’ll see how we can quickly copy-paste an email’s HTML code to create emails directly. To start, while I’m editing a message, I’ll click on the Email Designer to edit the email body. I’m presented with a few options to create it, and the one we’re going to focus on now is Import HTML. I have the option to either drag and drop the file or select it from my browser. I’m going to select a zip file that contains both the HTML and the set of images for that email. What this will do is that all these images will be uploaded to our asset library, and Adobe will host these images for you.

Alternatively, we could also just upload the HTML file by itself. I’ll change the design, and again, we’ll pick the Import HTML option. And this time, instead of selecting a zip file, we’ll select the HTML file. Once that’s done, we offer a visual experience where you can quickly edit your content. This is called compatibility mode, where I’m only able to personalize the text, add links, or include assets in the content. If I navigate over to the HTML converter, I can convert it so that I can now personalize the imported file as needed with the Email Designer functionalities. We’ll also be able to add a mirror page link, which allows your end user to view the email online. Scrolling down at the bottom, I can select the text, go into Insert Link, select the type Mirror Page, and that way my customer will be able to view a web version of my email. Another thing I can do is add an Unsubscription link. Just like before, I’ll select the text, go into Insert Link, and this time I’ll select Unsubscribe Link. This will allow you to direct that link to your external landing page, and Adobe will append the profile parameters. Let’s say you’re creating this email using code within an external code editor. In this case, you can quickly copy and paste it into the editor in Journey Optimizer, and you can also directly edit it from here. You have access to all of our personalization capabilities on the left, you can switch between the text version and the code version, and you can also view a preview to get a sense of how this message is going to look. At the bottom, we have an option to validate the code, which will validate both the HTML and the personalization of the message. We’ve now learned how we can import existing HTML content, how we can quickly tweak its design, how we can add a mirror page link and an Unsubscription link to an external landing page, and how we can create or copy-paste email code directly with the code editor.