You can build pretty emails using Rock's built in email editor and can also create templates to help with the design process and integrity. We found even with this tool, our staff would find their own way to build and send emails while using Rock's Communication Block. There are many third party email/newsletter campaign builders out there like Mailchimp and Constant Contact, but they keep their data on their system and you can't easily track that in Rock. We found an email creation tool that gives us the flexibility and control to create beautiful emails for all platforms and still use Rock's Communication tools and tracking. We now have a more uniform look to all our communications because our design team can directly influence how the emails look within the system.

The Details

This system uses Bee Free, https://beefree.io, to design our emails. Choose the Bee Pro product. You are able to create an organization that can be shared amongst your team for colaboration and sharing of designs. There is so much more to the product that would take a long time to describe. Dig into the product to see all that you can do. We will cover the basics on how to use this with Rock.

Shortcode for Template

A special shortcode is needed for the communication template to work properly. BeeFree adds some code that we strip out using a shortcode inside the template:

Create a Lava Shortcode (/admin/cms/lava-shortcodes):

  1. Name: Bee Free
  2. Tag Name: beefree
  3. Tag Type: Block
  4. Shortcode Markup: 
    {% assign emailContent = blockContent %}
{% assign originalsize = emailContent | Size %}
{% assign emailContentSplit = emailContent | Split:'<table class="nl-container"' %}
{% assign introsize =  emailContentSplit[0] | Size %}
{% assign remainingsize =  originalsize| Minus:introsize %}

{% assign emailContent = emailContent | Slice: introsize, remainingsize %}
{% assign originalsize = emailContent | Size %}
{% assign emailContentSplit = emailContent | Split:'<!-- End -->' %}
{% assign outrosize =  emailContentSplit | Last | Size %}

{% assign remainingsize =  originalsize| Minus:outrosize %}
{% assign emailContent = emailContent | Slice: 0, remainingsize %}

{{ emailContent | RunLava }}
    ShortCode

Commuications Template

A special communications template is needed to paste the code from BeeFree and process out the code using the shortcode

Create a communication Tempate (/admin/communications/templates)

  1. Name: BeeFree Blank
  2. Description: Used for sending emails composed using BeeFree
  3. Category: General
  4. Email:
    1. From Name: {{ CurrentPerson.FullName }}
    2. From Address: {{ CurrentPerson.Email }}
    3. Message Template (Advanced):
      {% raw %}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta charset="UTF-8"> 	
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if mso]><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch><o:AllowPNG/></o:OfficeDocumentSettings></xml><![endif]-->
    <!--[if !mso]><!-->
    <link href="https://www.oneandall.church/Themes/ONEALL/Styles/emailfont.css" rel="stylesheet" type="text/css">
    <!--<![endif]-->
    <style>
        * {
            box-sizing: border-box;
        } 		
        body {
            margin: 0;
            padding: 0;
        }
        th.column {
            padding: 0
        }
        a[x-apple-data-detectors] {
            color: inherit !important;
            text-decoration: inherit !important;
        }
        #MessageViewBody a {
            color: inherit;
            text-decoration: none;
        }
        p {
            line-height: inherit
        }
        @media (max-width:620px) {
            .row-content {
                width: 100% !important;
            }
            .image_block img.big {
                width: auto !important; 
            }
            .video_block .sizer {
                max-width: none !important;
            }
            .stack .column {
                width: 100%;
                display: block;
            }
        }
    </style>
</head>

<body class="clean-body" style="margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #ffffff;">
<span id="preheader-text" class="preheader" style="display: none !important; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; mso-hide: all !important; opacity: 0; overflow: hidden; visibility: hidden;"></span>
{[ beefree ]}
    <div class="structure-dropzone">
        <div class="dropzone">
        </div>
        <div class="component component-section" data-state="component">
            <div class="dropzone">
                <div class="component component-code" data-state="component">Replace This With BeeFree Code</div>
            </div>
        </div>
    </div>
{[ endbeefree ]}
{% endraw %}
[[ UnsubscribeOption ]]
</body>
</html>
      ShortCode

Bee Pro

Using Bee Pro is easy. You drag and drop your content/pre-created rows into your email, edit those elements, preview the email and collaborate with others using comments.

Once you are done creating the email, Exit the editor Click on the Export button and choose "Copy the HTML"

From there all you do is paste the email into the Communication you are working on that uses the BeeFree Blank Communication Template.

ExportOptions