Build an Amazing Email Marketing Software using Froala WYSIWYG Editor

This guide will take you step by step through the process of setting up Froala Editor to allow nontechnical users to create and design good-looking professional emails without having to code, which is great for designers, marketers, and everyone else.

Froala features that make it the best WYSIWYG editor for emails:

Froala is equipped with +240 options to customize the editor. Below are the best options and recommendations for using Froala in email marketing software:

1- Using inline styles

Email specialists recommend using inline styles as many email clients do not support classes. By setting the useClassesoption to false, Froala automatically will add element styles inline.

CODE EXAMPLE

new FroalaEditor('.selector', {
     useClasses: false
});

2- Nested tables

If you want to support all mail clients, you need to put your email content within nested tables. This old technique guarantees it will be displayed correctly on all email clients—a feature that not every WYSIWYG editor supports but that Froala Editor does. If you’re not familiar with this coding practice complexity, click here to see what a simple email code looks like.
Froala comes with its intuitive UI to eliminate this complexity and make email design a bit of fun.

Check different table options.

Many email clients don't support all rich-content features. To ensure that your emails will look consistent in all mail clients, use the toolbarButtons option to customize the editor toolbar and hide the unwanted features.
This will prevent designers from using these features while creating emails.

CODE EXAMPLE

new FroalaEditor('.selector', {
      toolbarButtons:[ 
      ['fullscreen',
                 'undo',
                 'redo',
                 'getPDF',
                  'print'
      ],
      [
            	'bold',
                'italic',
                'underline',
                'textColor',
                'backgroundColor',
                'clearFormatting'
      ],
      [
                 'alignLeft',
                 'alignCenter',
                 'alignRight',
                 'alignJustify'
    ],
    [
             	'formatOL',
            	'formatUL',
                'indent',
        	'outdent'
    ],
    [
                'paragraphFormat'
    ],
    [
                'fontFamily'
    ],
    [
                 'fontSize'
         ],
    [
                'insertLink',
                'insertImage',
                 'quote'
            ]
            ],
});

4- New line wrapper

Some designers will need to wrap new lines in <div> HTML tag instead of <p> tag. Doing this in the Froala WYSIWYG Editor is very easy; all you need to do is set the enter option to your desired value.

CODE EXAMPLE

new FroalaEditor('.selector', {
      enter: FroalaEditor.ENTER_DIV 
});

5- Legacy and custom HTML output

If you still need to support legacy elements or use custom attributes in your coding, you should consider customizing the following options:

6- Keep the `<style>` tag

We recommend writing styles online, but in some cases, you may want to add a <style> tag. In that case you should customize the htmlRemoveTags option since Froala removes the <style> and <script> tags from HTML code by default.

CODE EXAMPLE

new FroalaEditor('.selector', {
      htmlRemoveTags: ['script']
});

Working with images

Many email clients block images by default, which is why many designers avoid including images in emails. When they do include them, they recommend:

Include ALT tag.
Add a caption.
Set image widths and heights

With Froala, the image popup menu allows you to do this with the click of a button. Moreover, you can:

Set image alignment
Change image display

7- Set images’ widths and heights as attributes

By setting the imageOutputSize option to true, Froala will automatically set image width and height as attributes of the image in the output HTML code.

CODE EXAMPLE

new FroalaEditor('div#froala-editor' {
      imageOutputSize: true,
});

8- Image path

Make sure all your image paths are using absolute URLs because, otherwise, they won't appear in emails correctly.

Brand control

Here are features that will help your designers stay true to the brand.

9- Font family

Mail Clients supports a limited number of font families. Using the Froala fontFamily option, you can determine the fonts from which your users can choose. We recommend setting it to the email-safe fonts, which include:

Arial
Courier New
Georgia
Times New Roman
Trebuchety
Verdana

It’s a shorter list than web-safe fonts primarily because these are fonts that come preloaded on nearly every computer or device.

CODE EXAMPLE

new FroalaEditor('.selector', {
      fontFamily: {
         'Arial,Helvetica,sans-serif': 'Arial',
         'Georgia,serif': 'Georgia',
         "'Times New Roman',Times,serif": 'Times New Roman',
         'Verdana,Geneva,sans-serif': 'Verdana'
      }
});

10- Font size unit

Email designers argue about the best font-size unit to be used on emails. Font sizes can be defined with pixels (px), points (pt), percentage (%), viewport width (vw), em, and relative em (rem).

While em and percentage scale with the user settings, px and pt do not. Because of this, some designers prefer using em for accessibility, but most designers use px for consistency.

Set your preferred unit in the Froala fontSizeUnit option.

CODE EXAMPLE

new FroalaEditor('.selector', {
        fontSizeUnit: 'pt'
});

11- Font size

Email marketing experts suggest using no less than a 14px font size for the email body, but if you are expecting users to read it from a mobile device, using 16px or 18px would be better. By setting the fontSize option to the desired values, you will be sure that the email designer will use the correct size.

CODE EXAMPLE

new FroalaEditor('.selector', {
        fontSize: ['14', '16',  '18', '24', '32']
});

12- Colors

To keep your email colors matching your brand, consider customizing the following options to your brand colors:

colorsBackground
colorsText
tableColors

CODE EXAMPLE

Var colors = ['#61BD6D', '#1ABC9C', '#54ACD2', 'REMOVE']; {
        new FroalaEditor('.selector', {
         new colorsBackground: colors,
         tableColors: colors 
         colorsText: colors,
});

13- CTA buttons:

In an email campaign, you shouldn’t let your users wonder, “What should I do next?” Guide them through call-to-action buttons to initiate the next action. But can your nontechnical marketing officer design it? In Froala, you can set the style of the CTA using the inlineStyles option, and then your nontechnical marketing officer just needs to choose that style from the editor toolbar.

CODE EXAMPLE

new FroalaEditor('div#froala-editor', {
        toolbarButtons: [
        [
        	'bold',
                'italic', 
                'underline',
                'textColor',
                'backgroundColor',
                'inlineStyle',
                'clearFormatting'
                 'clearFormatting'
        ],
        ],
         inlineStyles: {
        [
        	'CTA': 'background-color: #706FD3; padding: 12px 16px; color:#ffffff;
       };
});

14- Predefined styles

With Froala Editor you can define ready styles for links, images, and tables to be used while email is created. The following options will help you to do so:

CODE EXAMPLE

new FroalaEditor('div#froala-editor', {
        linkList: [
        {
        	text: 'Unsubscribe from this list',
                href: '{{UnsubscribeURL}}'
           },
            {
               text: 'View this email in your browser',
               href: '{{WebVersionURL}}'
            },
            {
               text: 'Powered by Froala',
               href: '{{RewardsURL}}'
               }
            ],
});

Productivity Features

15- Real-time collaboration

Take your email design to the next level with the real-time collaboration feature, where multiple designers can work at the same time on the same design. Read more about the real-time collaboration feature.

16- Comparing mail versions: Test a new idea

With the new Track Changes feature, you will be able to compare and test modifications on the email without the need to create two separate editor instances.

All you need to do is to enable Track Changes, and then, by turning on the Show Tracked Changes button, the new changes will be highlighted and you can decide to keep them or remove them using the Accept/Reject Changes buttons.

17- Create simple emails faster

If you need to create a simple email, try to use the Markdown feature . It will help you create the email faster since you can style your text and insert tables, images, and links through a predefined markdown syntax.

Automated quality control

18- Spell Checker

With the Spell Checker feature, the designer will see and correct any typos or grammatical errors while typing or in a separate dialog mode. All detected misspellings and grammatical errors will be instantly underlined. The designer just needs to hover on a marked word and select a suggestion for a replacement.

Get benefits from Froala Editor events

Froala is equipped with +100 events. Events are triggered for almost every action, and you can use them to alter the output HTML code of the email. For example, some designers would prefer to set the attributes border="0" cellpadding="0" cellspacing="0" for every table in the email. You can do this with the help of table.inserted event.

CODE EXAMPLE

<script>
new FroalaEditor('.selector', {
useClasses: false,
events: {
      'table.inserted': function (table) {
        table.border = '0';
            table.cellPadding  = '0';
            table.cellSpacing= '0';
      },
}
});
</script>

Putting all the pieces together

From what we explained above, the following code is a full-code example for initiating Froala Editor when used for creating emails, but remember that you are free to customize it for your needs. Hence, we recommend that you go through all Froala options first.

    <script>
var colors =  ['#000000', '#333333', '#61BD6D', '#1ABC9C', '#54ACD2', '#4280F7', '#FFFFFF', 'REMOVE'];
var ctaStyle = 'background-color: rgb(13, 12, 140); padding: 12px 16px; color:#ffffff; border-radius: 4px; text-decoration: none; box-shadow: 1px 1px 0 rgb(33, 33, 60);'

new FroalaEditor('#froala-editor',{
  useClasses: false,
  imageOutputSize: true,
  fontFamily: {
  'Arial,Helvetica,sans-serif': 'Arial',
  'Georgia,serif': 'Georgia',
  "'Times New Roman',Times,serif": 'Times New Roman',
  'Verdana,Geneva,sans-serif': 'Verdana'
    },
  fontFamilySelection: true, //Display the selected font family at the toolbar
  fontSize: ['14', '16',  '18', '24', '32'],
  fontSizeSelection: true, //Display the selected font size at the toolbar
  fontSizeUnit: 'px',
  colorsBackground: colors,
  colorsText: colors,
  tableColors: colors,
  inlineStyles: {
      'CTA': ctaStyle,
      },
      tableStyles: {
      'fr-no-borders': 'Hide Borders',
  'fr-dashed-borders': 'Dashed Borders',
  'fr-alternate-rows': 'Alternate Rows'
  },
    linkStyles: {
   'fr-blue': 'Normal',
  'fr-green': 'Green',
  'fr-strong': 'Thick'
  },
  linkList: [
      {
        text: 'Unsubscribe from this list',
        href: '{{UnsubscribeURL}}'
      },
      {
        text: 'View this email in your browser',
        href: '{{WebVersionURL}}'
      },
      {
        text: 'Powered by Froala',
        href: '{{RewardsURL}}'
      }
    ],
  toolbarButtons: [
            ['html',
            'fullscreen',
            'undo',
            'redo'
            ],
            [
              'bold',
              'italic',
              'underline',
              'textColor',
              'backgroundColor',
              'inlineStyle',
              'clearFormatting'
            ],
            [
              'fontFamily',
              'fontSize',
              'lineHeight',
            ],
            [
              'alignLeft',
              'alignCenter',
              'alignRight',
              'alignJustify'
            ],
            [
              'formatOL',
              'formatUL',
              'indent',
              'outdent'
            ],
            [
                'paragraphFormat',
              'paragraphStyle',
              ],

            [
              'insertLink',
              'insertImage',
              'insertTable',
              'insertFile'
            ],
            [
                'trackChanges',
              'markdown',
              
            ]
          ],

            quickInsertButtons: ['image', 'table', 'hr'],
      events: {
          'table.inserted': function (table) {
            table.cellPadding  = '0';
            table.cellSpacing= '0';
          },
      }

});

</script>

This generates the following editor

To demonstrate the idea, we used the above editor to create the following layout:

But how to get this email displayed correctly in different email clients?

Get your email ready to send

As you have learned from the get started guide to display the Froala Editor content correctly, you should do these steps:

Include <link href = "/css/froala_style.min.css" rel = "stylesheet" type = "text/css" /><"/script"> stylesheet.
Display the content inside an html element that has a fr-view class.

But for emails, we recommend making the following tweaks:

Including the stylesheet as <link href = "/css/froala_style.min.css" rel = "stylesheet" type = "text/css" /><"/script"> will be ignored by many email clients. Instead, open the file related to the Froala version you are using, copy the CSS code, and include it inside the <style> tag of your email template HTML code. After that, you can use CSS inliners like Juice for better results.
As we assume you are using the old technique of writing emails using tables instead of DIV elements, you can replace the following code:

<div class="fr-view">

  <!-- Put here the HTML edited with the Froala rich text editor.-->

</div>

With the following code

<table style="max-width:600px; border:0; border-collapse: collapse;">
   <tbody>
      <tr>
         <td class="fr-view">
         <!-- Put here the HTML edited with the Froala rich text editor.-->
         </td>
      </tr>
   </tbody>
</table>

Summary of the above two points is to wrap the Froala editor output inside the following code

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>email Title</title>
    <!-- CSS rules for styling the element inside the editor such as p, h1, h2, etc. -->
    <style>
.fr-clearfix::after{clear:both;display:block;content:"";height:0}.fr-hide-by-clipping{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.fr-view img.fr-rounded,.fr-view .fr-img-caption.fr-rounded img{border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-view img.fr-shadow,.fr-view .fr-img-caption.fr-shadow img{-webkit-box-shadow:10px 10px 5px 0px #cccccc;-moz-box-shadow:10px 10px 5px 0px #cccccc;box-shadow:10px 10px 5px 0px #cccccc}.fr-view img.fr-bordered,.fr-view .fr-img-caption.fr-bordered img{border:solid 5px #CCC}.fr-view img.fr-bordered{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.fr-view .fr-img-caption.fr-bordered img{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fr-view{word-wrap:break-word}.fr-view span[style~="color:"] a{color:inherit}.fr-view strong{font-weight:700}.fr-view table[border='0'] td:not([class]),.fr-view table[border='0'] th:not([class]),.fr-view table[border='0'] td[class=""],.fr-view table[border='0'] th[class=""]{border-width:0px}.fr-view table{border:none;border-collapse:collapse;empty-cells:show;max-width:100%}.fr-view table td{min-width:5px}.fr-view table.fr-dashed-borders td,.fr-view table.fr-dashed-borders th{border-style:dashed}.fr-view table.fr-alternate-rows tbody tr:nth-child(2n){background:whitesmoke}.fr-view table td,.fr-view table th{border:1px solid #DDD}.fr-view table td:empty,.fr-view table th:empty{height:20px}.fr-view table td.fr-highlighted,.fr-view table th.fr-highlighted{border:1px double red}.fr-view table td.fr-thick,.fr-view table th.fr-thick{border-width:2px}.fr-view table th{background:#ececec}.fr-view hr{clear:both;user-select:none;-o-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;break-after:always;page-break-after:always}.fr-view .fr-file{position:relative}.fr-view .fr-file::after{position:relative;content:"\1F4CE";font-weight:normal}.fr-view pre{white-space:pre-wrap;word-wrap:break-word;overflow:visible}.fr-view[dir="rtl"] blockquote{border-left:none;border-right:solid 2px #5E35B1;margin-right:0;padding-right:5px;padding-left:0}.fr-view[dir="rtl"] blockquote blockquote{border-color:#00BCD4}.fr-view[dir="rtl"] blockquote blockquote blockquote{border-color:#43A047}.fr-view blockquote{border-left:solid 2px #5E35B1;margin-left:0;padding-left:5px;color:#5E35B1}.fr-view blockquote blockquote{border-color:#00BCD4;color:#00BCD4}.fr-view blockquote blockquote blockquote{border-color:#43A047;color:#43A047}.fr-view span.fr-emoticon{font-weight:normal;font-family:"Apple Color Emoji","Segoe UI Emoji","NotoColorEmoji","Segoe UI Symbol","Android Emoji","EmojiSymbols";display:inline;line-height:0}.fr-view span.fr-emoticon.fr-emoticon-img{background-repeat:no-repeat !important;font-size:inherit;height:1em;width:1em;min-height:20px;min-width:20px;display:inline-block;margin:-.1em .1em .1em;line-height:1;vertical-align:middle}.fr-view .fr-text-gray{color:#AAA !important}.fr-view .fr-text-bordered{border-top:solid 1px #222;border-bottom:solid 1px #222;padding:10px 0}.fr-view .fr-text-spaced{letter-spacing:1px}.fr-view .fr-text-uppercase{text-transform:uppercase}.fr-view .fr-class-highlighted{background-color:#ffff00}.fr-view .fr-class-code{border-color:#cccccc;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box;background:#f5f5f5;padding:10px;font-family:"Courier New", Courier, monospace}.fr-view .fr-class-transparency{opacity:0.5}.fr-view img{position:relative;max-width:100%}.fr-view img.fr-dib{margin:5px auto;display:block;float:none;vertical-align:top}.fr-view img.fr-dib.fr-fil{margin-left:0;text-align:left}.fr-view img.fr-dib.fr-fir{margin-right:0;text-align:right}.fr-view img.fr-dii{display:inline-block;float:none;vertical-align:bottom;margin-left:5px;margin-right:5px;max-width:calc(100% - (2 * 5px))}.fr-view img.fr-dii.fr-fil{float:left;margin:5px 5px 5px 0;max-width:calc(100% - 5px)}.fr-view img.fr-dii.fr-fir{float:right;margin:5px 0 5px 5px;max-width:calc(100% - 5px)}.fr-view span.fr-img-caption{position:relative;max-width:100%}.fr-view span.fr-img-caption.fr-dib{margin:5px auto;display:block;float:none;vertical-align:top}.fr-view span.fr-img-caption.fr-dib.fr-fil{margin-left:0;text-align:left}.fr-view span.fr-img-caption.fr-dib.fr-fir{margin-right:0;text-align:right}.fr-view span.fr-img-caption.fr-dii{display:inline-block;float:none;vertical-align:bottom;margin-left:5px;margin-right:5px;max-width:calc(100% - (2 * 5px))}.fr-view span.fr-img-caption.fr-dii.fr-fil{float:left;margin:5px 5px 5px 0;max-width:calc(100% - 5px)}.fr-view span.fr-img-caption.fr-dii.fr-fir{float:right;margin:5px 0 5px 5px;max-width:calc(100% - 5px)}.fr-view .fr-video{text-align:center;position:relative}.fr-view .fr-video.fr-rv{padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}.fr-view .fr-video.fr-rv>iframe,.fr-view .fr-video.fr-rv object,.fr-view .fr-video.fr-rv embed{position:absolute !important;top:0;left:0;width:100%;height:100%}.fr-view .fr-video>*{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;max-width:100%;border:none}.fr-view .fr-video.fr-dvb{display:block;clear:both}.fr-view .fr-video.fr-dvb.fr-fvl{text-align:left}.fr-view .fr-video.fr-dvb.fr-fvr{text-align:right}.fr-view .fr-video.fr-dvi{display:inline-block}.fr-view .fr-video.fr-dvi.fr-fvl{float:left}.fr-view .fr-video.fr-dvi.fr-fvr{float:right}.fr-view a.fr-strong{font-weight:700}.fr-view a.fr-green{color:green}.fr-view .fr-img-caption{text-align:center}.fr-view .fr-img-caption .fr-img-wrap{padding:0;margin:auto;text-align:center;width:100%}.fr-view .fr-img-caption .fr-img-wrap a{display:block}.fr-view .fr-img-caption .fr-img-wrap img{display:block;margin:auto;width:100%}.fr-view .fr-img-caption .fr-img-wrap>span{margin:auto;display:block;padding:5px 5px 10px;font-size:14px;font-weight:initial;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-opacity:0.9;-moz-opacity:0.9;opacity:0.9;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";width:100%;text-align:center}.fr-view button.fr-rounded,.fr-view input.fr-rounded,.fr-view textarea.fr-rounded{border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;-moz-background-clip:padding;-webkit-background-clip:padding-box;background-clip:padding-box}.fr-view button.fr-large,.fr-view input.fr-large,.fr-view textarea.fr-large{font-size:24px}a.fr-view.fr-strong{font-weight:700}a.fr-view.fr-green{color:green}img.fr-view{position:relative;max-width:100%}img.fr-view.fr-dib{margin:5px auto;display:block;float:none;vertical-align:top}img.fr-view.fr-dib.fr-fil{margin-left:0;text-align:left}img.fr-view.fr-dib.fr-fir{margin-right:0;text-align:right}img.fr-view.fr-dii{display:inline-block;float:none;vertical-align:bottom;margin-left:5px;margin-right:5px;max-width:calc(100% - (2 * 5px))}img.fr-view.fr-dii.fr-fil{float:left;margin:5px 5px 5px 0;max-width:calc(100% - 5px)}img.fr-view.fr-dii.fr-fir{float:right;margin:5px 0 5px 5px;max-width:calc(100% - 5px)}span.fr-img-caption.fr-view{position:relative;max-width:100%}span.fr-img-caption.fr-view.fr-dib{margin:5px auto;display:block;float:none;vertical-align:top}span.fr-img-caption.fr-view.fr-dib.fr-fil{margin-left:0;text-align:left}span.fr-img-caption.fr-view.fr-dib.fr-fir{margin-right:0;text-align:right}span.fr-img-caption.fr-view.fr-dii{display:inline-block;float:none;vertical-align:bottom;margin-left:5px;margin-right:5px;max-width:calc(100% - (2 * 5px))}span.fr-img-caption.fr-view.fr-dii.fr-fil{float:left;margin:5px 5px 5px 0;max-width:calc(100% - 5px)}span.fr-img-caption.fr-view.fr-dii.fr-fir{float:right;margin:5px 0 5px 5px;max-width:calc(100% - 5px)}
    </style>
</head>
<body>
    <table style="width:100%; border:0; border-collapse: collapse;"><tbody><tr><td class="fr-view">
<!-- Put here email content/ the output of Froala editor -->
</td></tr></tbody></table>
</body>
</html>

Send test emails and if it still needs improvements, you can edit the HTML code directly on the Froala code view panel.

Result:

Here are screenshots of the above example from some popular email clients:

What do customers say about Froala Editor?

Are you ready to start using Froala Editor?

Was this helpful?

Help us to spread the knowledge. This will motivate us to create more resources like this.

Build an Amazing Email Marketing Software using Froala WYSIWYG Editor

Froala features that make it the best WYSIWYG editor for emails:

1- Using inline styles

CODE EXAMPLE

2- Nested tables

3- Customize editor toolbar

CODE EXAMPLE

4- New line wrapper

CODE EXAMPLE

5- Legacy and custom HTML output

6- Keep the <style> tag

CODE EXAMPLE

Working with images

7- Set images’ widths and heights as attributes

CODE EXAMPLE

8- Image path

Brand control

9- Font family

CODE EXAMPLE

10- Font size unit

CODE EXAMPLE

11- Font size

CODE EXAMPLE

12- Colors

CODE EXAMPLE

13- CTA buttons:

CODE EXAMPLE

14- Predefined styles

CODE EXAMPLE

Productivity Features

15- Real-time collaboration

16- Comparing mail versions: Test a new idea

17- Create simple emails faster

Automated quality control

18- Spell Checker

Get benefits from Froala Editor events

CODE EXAMPLE

Putting all the pieces together

Get your email ready to send

Result:

What do customers say about Froala Editor?

Are you ready to start using Froala Editor?

Was this helpful?

WYSIWYG EDITOR

FREE TOOLS

Resource

Get In Touch

Sign Up

6- Keep the `<style>` tag