NorthStar CCM Email Editor

Getting Started

Overview

All emails in NorthStar CCM can be easily and quickly designed using the Email Editor. Users can use the online tool to build and organize the content inside the email template in the best possible way. The editor has a friendly interface through which, if you want any element to appear in your template, you can simply drag it from the left sidebar into the design surface.

The Email Editor offers the possibility to design a matching style directly from the website, by modifying background, text color, font size and style, as well as other formatting options that can be changed to suit your taste. Another feature that this editor possesses is the possibility to add important elements from ready-made component such as pre-headers, footers, or other fragments from the Content Library.

Email Templates

A default email template is very similar with a typical project template, but requires you to enter some additional information, like the recipient and the destination address, an email subject and some content.

Before starting to customize your emails within the Email Editor, it is important to take some time to familiarize yourself with the interface and terminologies used to describe what options are available.

Within the Email Editor, you will be able to find the following units:

Design Surface: the central area of the screen, divided into four areas:
- To: here you can add the email address of the recipient.
- From: here you can add the email address of the user filling out the form.
- Subject: here you can add a title for your email.
- Customized content: here you can drag and drop email elements.
Sidebar: positioned on the left side of the screen, provides access to all components, styles or data source.
Toolbar Options: at the editing time, it might be necessary to consider the following options:
- Save: Use the Save ( ) button to save changes made to the current email template.
- Undo: Use the Undo ( ) button to move one step back in the undo chain.
- Redo: Use the Redo ( ) button to move one step forward, after you have used a Undo operation.
- Zoom: The default zoom on a default template is 900px. Select it, and you will be able to zoom in or zoom out by selecting other options from the contextual menu.

Email Elements

Elements of an email template in NorthStar CCM are composed of views that can be accessed through tabs in the left sidebar. In the Email Editor, there are three available tabs that can be accessed directly from the sidebar, each one with a different purpose:

Components - populating the email template with several components.
Style - styling the components inserted in your email template.
Data - assigning a data source to insert dynamic fields into the template.

Components

Email components help you design and sketch the content of your email template. When we use the term "components" of an email, we refer to all the parts of an email message: the recipients, the topic of the message, the sender and the message text itself.

Components Table

Find out in the table below all the components that can be inserted in an email template along with a brief description.


Text	Insert a text field into the email template.
Button	Insert a button into the email template (for example, Submit button).
Image	Insert an image into the template (for example, the Company's Logo).
Left	Split the row into two fields, where the left cell is smaller than the right one.
Right	Split the row into two text fields, where the right cell is smaller than the left one.
2 Columns	Insert two text fields in a row with equidistant columns.
3 Columns	Insert three text fields in a row with equidistant columns.

Adding a new Component

Follow the steps below to insert a component into an email template:

In the Email Editor, select the Components tab from the Sidebar.
In the Components section, select the component you want to add to your email, then drag and drop it into the design surface.
Notice that an email component can be inserted into the Design Surface only below the Subject section.

Editing an Email Component

There are two ways to edit an email component in the NorthStar CCM Platform:

In the design surface, select the component you want to edit. Use the options presented in the quick access menu that appears to quickly format your components.
In the Sidebar of the Email Editor select the Style tab. A series of various formatting options will be present to format your component. For particular component properties, select it from the design surface and notice the updated style properties presented in Sidebar.

Style

For configuring components' properties within the Email body, Style Menu from the Sidebar is the first choice. There you will find properties related to the selected component, from the row it belongs or styles of headings, to body or paragraph of the email body template. The tables below list the available properties, grouped by components.


Text	Paragraph	Background	Padding	Layout	Link	Heading	Condition
Button	Action	Content	Padding	Condition	Layout	Link	Heading
Image	Action	Content	Background	Padding	Condition	Layout	Link

Data

The Data tree in the Email Editor should mimic the one in the Template Editor. Additionally, the fields inserted within the template can be edited as common email components from the Properties contextual menu once you select the field. Therefore, you can set a data source for your email template by following the steps below:

In the Online Editor, select the Data tab from the Sidebar.
Select the Browse button to choose a file as the data source.
Choose the data source file for the email template which you are going to design. You can also select Upload File and import files from your local machine if needed.
Once the data source is assigned, you can drag and drop any field from the data tree displayed on the Sidebar into the Design Surface. Text elements are treated as normal fields in the data tree and one user can insert directly a field into the email template by typing @ to open the drop-down list with all the available fields within the assigned data source.
On the right bottom section of the Design Surface, you can select the View Source Code button, where you have access to the entire source code of the body of the email. The body source code can be seen in HTML or JSON format only.

Email Properties

The email template provides advanced editing features such as font type and size, text color, text formatting and justification, numbers and bullets, indentation and others.

Element Properties

Properties corresponding to an element inserted in an email template might be specific to its type. For example, a Button component will have a specific Action property. Below, there are listed all the properties of any element in an email template.

Paragraph

The content inside a text element can be edited by setting up paragraph attributes such as Font Family, Font Size, Alignment, Line Height and Text Color.

Background

Both background properties are optional and they can be set under the Style tab after selecting a component in the Design Surface.

The background-color property is used to specify the component's background color.
The background-image property is used to specify the component's background image by using an URL and it is available only for the text element.

Padding

The component's padding is the space between its content and its border. Using the Padding property you can create extra space within the element.

By default, the Padding property has one value, but you can select the Expand button if you want to set four different values referred to as Top, Bottom, Right and Left.

Layout

For a faster mobile-friendly environment, you can use responsive display by enabling/disabling Hide on mobile option for showing or hiding elements on mobile devices.

Link

The Link property let you edit the content of a link within an email element, by configuring attributes such as Font Family, Font Size, Line Height and Text Color.

Heading

This property defines four levels of headings (h1, h2, h3, and h4). Attributes such as Font Family, Font Size, Line Height and Text Color can be set for any of the four levels individually.

Condition

The content inside any of the elements present in the email body (text, image, button) can be configured by setting up a condition on its appearance. The appearance is based on fields within the data source.

Action

In case of Button element, the Action property let you specify the URL to where to send the form data after you submit it.

In case of an Image element, the Action attribute specifies the URL to where the user might be redirected when the image is clicked.

Content

The Content property for an Image element is used to insert a content for your component from the current workspace or upload a local file.

The content inside a Button element can be edited by configuring attributes such as Font Family, Text Color, Background Color, Font Size, and Alignment.

Row Properties

The Stack on mobile property ensures the elements on a row are positioned properly on mobile devices. If enabled, components will stretch to fill the entire height of the row and wrap when necessary.

Style Properties

The following properties can be set as a general style for an entire couple of same elements. For example, if you have 2 headings set on 2 text components, one heading with red text color and the other one blue-colored respectively, you can set the Heading attribute within Styles properties to one color only, that will be inherited from both headings.

Note

Each element that has its style defined individually, will inherit the settings by this general style accordingly.


Body Style	The Body property defines the style to be used for all bodies within the same components. The attributes that can be configured for the component-box are Max Width, Background Color, and Shadow.
Paragraph Style	The Paragraph property defines the style to be used for all paragraphs within the same components. The attributes that can be set for the components' contents are Font Family, Font Size, Alignment, Line Height, and Text Color.
Link Style	The Link property defines the style to be used for all links within the same components. The attributes that can be set for the components' links are Font Family, Font Size, Line Height, and Text Color.
Heading Style	The Heading property defines the style to be used for all headings within the same components. The attributes that can be set for the components' headings are Font Family, Font Size, Line Height, and Text Color.

Quick Access Properties

You can have access to a contextual toolbar that contains some properties for Button and Text components if you double-click on the content within the element that you want to edit.


Bold	Select this property from the toolbar if you want to set the font style to Bold.
Italic	Select this property from the toolbar if you want to set the font style to Italic.
Underline	Select this property from the toolbar if you want to underline the text inside the component.
Link	Enable this option to add a hyperlink to the selected component. The Link dialog will be displayed, where you can set up your Link related parameters, such as `Display Text`, `Link to` (which defines the type of object to link to: URL or Form) and the `Address` (the URL path). In case you select `Form` as the target of the link, you must choose from a drop-down list the actual form file which you want to display from the available projects. Also, the `Allow Multiple Submissions` option can be enabled, meaning the form is allowed to receive more than one submission per session. The public forms encapsulated within a link will have a Shared ( ) icon attached to their names, but for the others, you can select the `Share` button and the link will become public.
Heading	Enable this option to set a heading level for the selected text within the component.
Bullet	Enable this option to add a bullet for the selected text within the component.
Dynamic Value	Select this option to add a field from the data source as value for the component.