Introducing drag and drop email content and a new campaign editing experience

It’s an exciting day! We’re pleased to announce our first major release of the Drag and Drop editor. It’s a feature that we believe will transform the way you design, build, and edit responsive email templates.

At Vero, we strive to help you send engaging, personalized content at scale. A core part of that is enabling product and marketing teams to communicate product updates, news, and promotions and to also edit the automated product engagement emails. Building this new editor is critical to helping teams achieve these goals. This is why we listened to your feedback and tackled one of the most-requested features ever.

Besides the new Drag and Drop editor, we’ve also made some big improvements to the overall campaign creation process. These are a combination of necessary updates required to make sure Drag and Drop is integrated into the campaign creation workflow. Also, small incremental improvements that make it easier to go from idea to live when sending a customer-facing email. 

We believe that these updates to Vero will make the content creation part of your job smoother, more enjoyable, and more powerful than it was previously.

The final result is a collection of improvements we are incredibly proud of. We believe that it makes Vero the best solution on the market for any team building their own software and technology, whether they send 10 emails a month or 100 million. 

Read on to find details on everything we’ve released today.

Visually design and edit your email content

The star of the show: Our all new drag and drop content editor. A new tool in your team’s arsenal giving everyone the ability to design and build beautiful emails, without writing a line of code.

Based on your feedback, it was clear to us that building responsive and highly compatible email templates is still a huge challenge for most marketing and product teams. The reason for this is there are many people involved, and multiple levels of technical ability.

Our solution aims to give any team member, no matter their level of technical ability, a tool they can use to build beautiful and effective templates.

The decision to build the feature from the ground up on top of the popular and open source MJML framework, rather than dropping in a third party template builder, meant we could focus on the user experience. And at the same time, ensuring your templates are fully supported across all major devices and email clients.

Here’s a few things you’re going to love about drag and drop template editing:

1. Intuitive interface Design and build your custom layouts using the intuitive drag and drop interface. Choose your layout, add content blocks, and make granular style adjustments until things look exactly how you want. All without writing a single line of code.
2. Inline content editing With direct, contextual content editing, adding or updating your content is as simple as clicking on your content and typing inline.
3. Reusable templates Save your design as a template, choose it in any campaign, and update the content in exactly the same way you created it.
4. Built in templates to start you off Give yourself a head start by choosing from one of our sample templates or layouts.
5. Live previews See exactly how your content will look while you edit, making edits in both desktop and mobile mode.
6. Built on MJML We’ve built our drag and drop editor on top of the popular MJML framework. You can feel confident that every change you make is supported by all the major email clients on every device.

We’re incredibly happy with our first release of this editor, however we know there’s still more we can do to deliver the perfect template editing experience. So please let us know your thoughts, and if you have any specific feature requests, we’d love to hear them.

Improved content options

With the addition of Drag and Drop, there are now four types of content you can choose from when adding content to an email:

• Drag and Drop – This is our ‘no code’ solution for creating visually-interesting email templates.
• HTML – Perfect for when you have existing HTML that you want to use and are comfortable making content changes directly in the code.
• Rich Text – Send a basic, no fuss text-based email with a more personal feel (similar to how you would in Gmail, etc.)
• Plain Text – For those times you need zero styling and simply need to send some un-styled text.

To make these options clearer and to describe when they are useful, we have overhauled the interface when choosing the type of content for an email.

Not only can you choose between these four modes, you can also start from one of our sample templates or starting layouts, or one of your saved templates.

We’ve also updated the way reusable templates behave. When selecting a Drag and Drop or HTML template, the content of the template is copied to the campaign and changes to the template can be made non-destructively. This means you can change the content of the campaign without needing to update the underlying template. You won’t have to create a new template every time you want to change the layout, remove a section, etc.

For current Vero users, the above changes mean that “vero-editable” regions are becoming a legacy feature and, while you can still use them, be aware that in the future, they will be deprecated. You can read more about why we’re making this change below and how the new editor will fully replace and enhance what you could do with “vero-editable” regions.

Improved HTML editing

We’re making it more straightforward to work with HTML in Vero. This release includes a robust and intuitive user interface in both the template editor and campaign sections of Vero, which are now exactly the same. This means you can easily add or edit HTML for a specific campaign and see the results in the live preview. We’ve also added a “code only,” “preview only,” and two “split” modes: One for desktop and one for mobile. Additionally we’ve added “beautification” (which makes your HTML easier to read), undo and redo, search and syntax highlighting.

Importantly, we’ve also added an “inline CSS” checkbox, meaning you can have more granular control over whether or not Vero will inline your CSS at send time. This is valuable for customers who want to ensure Vero does not alter HTML content pasted into Vero in any way at all.

Improved campaign creation

We’ve updated and refined the newsletter creation experience, and consolidated some of the previously difficult-to-find features to make them easier and more intuitive to use. Here are a few of the improvements we’ve made:

• Improved the UI so each aspect of a newsletter can now be edited independently from the rest of the campaign, meaning you can save a change with confidence you haven’t changed any other component. 
• Moved the “To,” “From,” and “Subject” fields so they are editable from the newsletter’s overview page, making it faster to view or edit. Note: The BCC field is now accessible inside the “To” panel.
• We’ve completely rebuilt our “A/B Testing” and “Languages” features, making each variation and language faster to add and edit. It is now easier to see exactly how many variations and languages are set on your campaign.

Important notes

As with any major feature, building something that truly meets its goals means reassessing and reconsidering how the different aspects of a product work. Building a drag and drop feature led us to make some fundamental changes that lay a better foundation for even more exciting future features and improvements.

Find out what’s changing below:

Template content is no longer locked to the source HTML by default

Previously, if you wanted to make any changes to the layout or structure of the HTML when using a template as the campaign content, you’d have to first make those changes in the source template then save them. You could not edit the HTML directly as part of campaign creation. This meant leaving the campaign, reopening the template, making the changes and saving them, then going back to your campaign to see the result.

Under the old system we supported “vero-editable” regions in a template. These regions would be editable at the campaign level, but the rest of the template would not be. While this is a powerful concept, if any changes were made to the order of “vero-editable” regions, all of the campaigns that relied on that template would break.

With the new Vero, when you choose a template to use in a campaign, the HTML from the template is simply cloned to the campaign and can be edited directly. With this methodology, the underlying template and the campaign are no longer linked. Making changes to the HTML inside a campaign does not affect the underlying template as you are no longer working on an instance of a template, but simply editing new HTML content which was copied from the source template.

For the foreseeable future, using a template in its “locked” form with “vero-editables” will still be a feature in Vero, but we will be encouraging users to use our new Drag and Drop or HTML modes to edit template content going forward. We also have some future improvements that will make locking down parts of your template easier. When we release those features, we will start the process of deprecating the “vero-editable” features.

Whats next?

Now that we’ve released these updates, work will begin to make drag and drop even better, we’ve currently got planned a few updates that we think you’ll really enjoy using:

• Reusable snippets – Allowing you to save and reuse a custom drag and drop section in multiple campaigns, and giving you the ability to propagate any changes to the section across all campaigns using the snippet.
• Pre-header section – We are already working on making it possible for you to add a pre-header section to your emails, so you can easily define the preview content in Gmail.
• Raw HTML Block – This will allow you to add any snippet of HTML into your template, this will be useful if you want to include custom-designed blocks or include complex personalized content using Fusion.
• Data inspector – This will make it easy to preview the parts of your template that use liquid and dynamic data with real customer and event data, to help you see exactly how customers will see the content.
• HTML and MJML email template library – This free library will make it easier for you to send professional-looking, responsive, branded campaigns in no time.
• We’ve got even more improvements to Drag and Drop coming, so keep your eyes peeled for further updates.

—

As ever, if you have any questions, feedback or ideas while trying all these updates or Vero in general, please don’t hesitate to contact us at support@getvero.com or by commenting on our feature request board.