Adding content

Undo, redo & history

Say hello to the new undo, redo & message changes history feature!

This article applies to all users of the BEE editor in any application in which the feature has been enabled.

When designing with BEE, you can rewind and fast-forward to any point in your recent edit history. As soon as a change in the message is detected, a compact Undo widget displays in the bottom left corner of the editor.

The history timeline allows you to browse back and forth through the most recent changes.

For each event in the timeline, BEE displays:

An icon to identify the type of content that was changed (an image, a text, etc.)
A description of what changed, including the new value assigned to the element, if any
The exact time the change occurred
All these details provide a lot of information about what kind of edit was applied and when, giving you the ability to go back to a previous state with a high degree of precision.

The Undo widget currently remembers the 15 most recent changes in the current browser session (it does not remember changes that happened during a different session), but you can always rewind to the "Message opened" step to go all the way back to the beginning.

Hiding content on mobile or desktop devices

You are now able to toggle between always showing a specific content element...

Optimizing for mobile

Mobile design is not only about the layout responsiveness, but also about having the appropriate content in the right context.

An email that may yield excellent results on desktop screens may not work as well when the user needs to scroll on his mobile device to reach the call to action.

The best way to solve this challenge is to hide unnecessary design and/or content elements when the message displays on mobile devices. And that's what this new BEE feature is all about!

Content block options

When this feature is turned on, all content blocks in the BEE editor will include a new "Hide on" setting in the property panel. To use it, simply scroll down in the right panel until you see the "Block options" section.

You can check the result of turning this property on for a specific content block by going into the Preview and selecting the Mobile view. You will see that as you toggle between Desktop and Mobile the content blocks for which "Hide on" has been turned on will not be shown.

Working with padding

BEE gives you granular control on padding. You can either set padding around a content element for all sides at once, or individually for each side.

Working with borders

For those structural and content elements where you can set a border, you have the option to do so for all sizes, or for each side individually. This give you great flexibility in setting the look and feel of your email message.

Adding video to your email

An easy way to add content from YouTube or Vimeo

The video content block allows you to share your video content easily in your emails. You only need to copy and paste the URL of your video from YouTube or Vimeo, and BEE will do the rest: it will automatically grab the cover image for the video, overlay a Play icon on top of it, and link it to the video content.

How it works
You will now find a new "Video" tile in the "Content" panel. Drag it into your design to get started.

The "Content properties" section will ask you to provide a video URL from YouTube or Vimeo, the popular video hosting services that we currently support.

Once you insert a valid URL, the content block in the editing panel will display the cover image for the video with a Play icon overlayed on top of it. You can edit the type, color, and size of the Play icon to change the way it looks.

Notice that the editor can't access password-protected videos to get the cover image.

Select the icon type that fits your design, choose the color that looks best with your cover image, and pick a size.

Notes about embedding video in email

This feature does not embed the actual video in the email designed with BEE, but rather links to it in a smart way.

The reason why the actual video content is not embedded into the message is that, unfortunately, it doesn't work very well. Many email clients do not support it, and Apple has been "back and forth" on video support in iOS over the years (if you are interested, there are lots of details in this Email on Acid article).

Additionally, many emails are opened on mobile devices and viewing videos on a mobile device can cause substantial data usage in addition to a poor user experience due to the quality of the data connection.

Everything considered we believe that the approach we chose provides the best results.

Using web fonts in the BEE editor

What are web safe fonts?

In most online text editors you tend to find the same, small set of available fonts. Why a small set and why only these fonts? Because they are the ones typically installed on your device. These are the fonts that are normally referred to as "web safe" fonts.

See, the set of fonts available on your computer is defined by the fonts that shipped with your operating system, those added by applications you installed, and individual fonts that you've added manually over time.

As you can imagine, the resulting list of installed fonts can vary greatly from device to device. There is a subset of fonts, however, that are considered a minimum common denominator as they are almost always found. Those are what we refer to as web safe fonts:

"safe" because they are available on pretty much every device.
"web" because they are used when editing documents online.
In the BEE editor, you will find these web safe fonts at the top of any font selection tool. They are:

Arial
Courier
Georgia
Helvetica
Lucida Sans
Tahoma
Times New Roman
Trebuchet MS
Verdana
Now, the issue with these fonts is that they are only a handful, and therefore greatly limit design choices in terms of typography. One solution is to expand the set of available fonts by using web fonts.

When can we use web fonts?

Web fonts are available online, served by services like Google fonts. Your device downloads them only when needed (so there is no need for them to be installed in your computer/device). The word "web" in this case refers to "created for the web, and distributed online".

Web fonts are here to help us expand our text style choices and go beyond standard web safe fonts.

This sounds like the perfect solution for the BEE editor, but not all email clients support them, unfortunately. Known email clients such as Outlook (desktop and web), Gmail and Yahoo! Mail don't support web fonts and display the text with their default font. They will only show the web font if the physical font file is installed in the recipient's device.

Campaign Monitor has a fantastic article that goes deep into the ins and outs of using Web fonts in email. See All You Need to Know about Web Fonts in Email.

Because of this lack of support, in the BEE editor we've built font stacks (using cascading style sheets) that automatically tell any email program how to "fall back" to a safe font when that email client is not able to render them. The stacks work as a descendant list of choices: if the first one is not available, it moves to the next.

Font stacks in BEE

In BEE fonts are grouped together to offer the best possible fallback solution. This ensures that the layout won't break when the selected font is not supported. The variables we considered when building these font stacks were font shape and font size.

The following is a simplified list of the available font stacks:

Web font › Web safe fallback list of options

Bitter › Georgia › Times › Times New Roman › serif

Droid Serif › Georgia › Times › Times New Roman › serif

Lato › Tahoma › Verdana › Segoe › sans-serif

Open Sans › Helvetica Neue › Helvetica › Arial › sans-serif

Roboto › Tahoma › Verdana › Segoe › sans-serif

Source Sans Pro › Tahoma › Verdana › Segoe › sans-serif

Montserrat › Trebuchet MS › Lucida Grande › Lucida Sans Unicode › Lucida Sans › sans-serif

Ubuntu › Tahoma › Verdana › Segoe › sans-serif

Notice that we've kept an eye on the typography design and didn't add fancier or more complex fonts - such as the Lobster font - that wouldn't have an appropriate fallback font.

Working with custom HTML

Overview
The Custom HTML content block allows you to easily add your own HTML code to an email message that you are designing with BEE. It’s as simple to use as a text block.

HTML experts only: Using your own code may affect how the message is rendered in email clients, preventing it from adjusting to the screen size (i.e. the "responsiveness" of the message). Make sure to use HTML that is email compliant and responsive.

Why using custom code

There are many scenarios in which it makes sense to add your own HTML code:

Adding more customized content
You are not limited by a set of predefined parameters and can, therefore, have more granular control of the styles applied.

Adding HTML 5 video, anchor links, etc.
You can now add content that is not available as a standard content element in the editor (HTML 5 video, anchor links, etc.).

Adding advanced effects with CSS
Get creative with animations! Animation effects are not widely supported by the email clients but managed correctly they can help your message get viral.

Adding live content from external providers
Product recommendations, dynamic ads, personalized maps, countdowns… all of this advanced content can now be easily included in a message created with BEE. Just copy and paste the code provided to you by the vendor that you are working with.

How do I add my HTML code?
To add your code just drag an HTML content element into your message. It can be positioned alone, with other HTML content items, or mixed with other types of content.

The newly inserted content block will show some default placeholder text. Click on it and the right-side property panel will display the HTML code editing pane. You will find some placeholder code inside the editing area.

Paste your own HTML code or write it directly in the editing area. The system will highlight your syntax and indent your code to make it more readable.

Why does text lose its formatting?

What the issue is

You may have noticed that in some cases, if you highlight text in the Text Editor within a Text content block, delete it, and start typing, the text loses its previous formatting.

This can be frustrating and we have received many support requests about it.

This article provides some context about this issue and some simple tips to get around it.

Why it exists

This is not a bug in BEE, but rather a default behavior in the text editor that BEE uses in the Text content block, called TinyMCE. Specifically:

If there is only one paragraph (e.g. a title with a large font), when you highlight all the text and start typing, the behavior is the one described. The formatting is lost.
If there are two or more paragraphs (e.g. same title, but followed by other paragraphs with other formatting), then the issue does not occur: the formatting of the title is preserved.

How to avoid the problem

So, to avoid losing the formatting of paragraph of text that you are selecting and need to replace with new text, you have a few options:

Don't remove the entire text in the paragraph. Keep a bit of it, type what you need, then remove the text that should not be there.
Press "Enter" to create a new paragraph, highlight and type. Then remove the new paragraph (an empty paragraph is fine).