This article provides a detailed overview of the primary areas of the Drag & Drop Campaign Builder (“Builder”) as well as a description of the tools and features found in each.
The Builder is made up of two main sections: the Canvas work area, where a user will interactively construct their email template; and the left side menus and control panels, which provide the user with many features and tools to aid the in the construction and styling of their template.
CANVAS AREA
Presented below in Fig 1 is an example of the Builder’s Canvas work area when a new, blank template has been selected (as opposed to selecting a premade template or if the user has copied one of their own existing templates).
Fig 1
We will describe each feature as shown above.
1 - The “Go Back” and “Go Forward” buttons. These buttons allow the user in most circumstances to undo or redo an action in the canvas area. Please note that certain actions or sequences of actions can “break” the event chain, thus blocking the undo or redo action. A good policy is for the user to save their work often.
2 - The “Clear Canvas” button will clear all user input inside the canvas work area. It is essentially a way to start over with a clean canvas.
3 - “Campaign Name” and “Subject” input fields.
The campaign name field is used for internal purposes to allow the user to create names for their campaign templates to assist in keeping track of their work. The email recipient (user’s contacts) will not see this name.
The subject is what the email recipient will see in their inbox as the primary indicator of the email’s topic / contents.
4 - “Desktop vs Mobile View” toggle button. Allows the user to view the template in either a traditional horizontally-oriented desktop mode or a vertically-oriented mobile device mode. Please note a much more detailed and device-specific preview can be found by using the “Inbox Preview” tool.
5 - The “Inbox Preview” button opens up a very powerful third-party email presentation tool by Email On Acid (“EOA”). The EOA tool allows the user to view their emails on many different device / email application / operating systems combinations. These various combinations are grouped into three major categories: Mobile Clients, Desktop Clients and Web.
For example, the user can review how their email template will be rendered when viewed on an Apple iPhone 8+ running iOS 13 vs an Android 7-based phone using the Samsung Mail app. Or perhaps view it in desktop mode in any number of various Outlook email client versions.
The EOA preview tool is provided to all Pinpointe customers at no additional charge.
6 - “Quick Send” button. The Quick Send feature allows the user to send a preview of the email to an email address or addresses that they input. See Fig 2 below.
Some points to note when using this feature:
The user can select which email address they would like to use as the send-from for Preview sends. The default will be their contact email address under Account Settings.
Custom field values embedded within the template (denoted with a ‘%%’ before and after the custom field name), unsubscribe links, social icon links and other variable links will not be active in a preview-sent email. Pinpointe strongly suggests that all users send an actual live test campaign from their database to themselves before sending any email to a live contact audience. This is the best method to ensure the user sees what their contacts will see (within the confines of recipients using different devices and email client applications).
Previews for all user accounts are sent from a centralized server and NOT from that of the specific user, therefore, deliverability of a preview email is not indicative of deliverability from a user’s specific account. Particularly in corporate settings, this can result in preview emails being routed initially to the recipient’s spam folder. One way of addressing this is for the user to make a request of their IT department to white list Pinpointe’s IP range. More information on this option is available from Pinpointe Support.
Fig 2
7 - “Save” button. Clicking on the Save button initiates a drop down menu that gives the user three options:
“Save” - saves a persistent version but user remains in the Builder
“Save & Exit” - creates a persistent version but closes Builder and returns user to the Manage Campaigns page
“Exit (without saving)”
8 - “Preview Text” input field. This allows the user to add up to an additional 80 characters as a secondary subject description of the email. This secondary description will appear directly after the main subject in the recipient’s inbox. Most email client applications will show an email’s subject followed by a certain number of characters included in the first identifiable test string found in the body of the email. This may or may not be truly indicative of what the email is about, or it may not result in the best marketing presentation of the content. The Preview Text field allows the user to have greater control on what follows the email’s primary subject text.
9 - This is the main canvas area where the template is constructed.
10 - “Custom Tracking Pixel” input field. Users have the option of including their own custom tracking pixel in the template. This pixel would be identified and tracked by a user-developed program or script, with the resulting data being gathered, warehoused and manipulated in the user’s own system. Essentially, it allows the user to gather certain email engagement metrics outside the metrics specifically tracked and warehoused by Pinpointe in the user’s Pinpointe account.
CONTROL PANEL AREA
The Control Panel area consists of two sections: a static leftmost vertical menu which provides access to several features and tools, and to the right of this, the primary styling and control panel and its sub-panels.
We’ll start with discussing the leftmost static menu. Presented below is an example of the menu (please note this representation does not include the “Preset Blocks” option since this example assumed starting with a blank template).
Leftmost Static Features Menu
1 - Brings up the “Global Styles” menu (Fig 3 below).
The Global Styles menu allows the user to set / edit certain color, typography and spacing settings for a template. In addition, the user can set the default justification for text, buttons and social icons when the email is rendered in mobile device mode.
Fig 3
2 - Brings up the “Basic Blocks” menu (see Fig 4 below for a partial image). The Basic Blocks menu is the primary menu from which the user can select various parent blocks to add to the structural framework of their template. The user can select different designs for one, two and three column blocks.
Fig 4
3 - Brings up the “Saved Blocks” library, assuming the user has previously saved one or more blocks. Users may select any parent block from either a premade template or one they have created from scratch, and save it to their own “library''. These saved blocks can then be dragged into any template they create.
4 - Selecting the “Widgets” feature offers the user a sub-menu of various widgets (elements) that can be added to any parent block or column within a multi-column parent block by simply dragging the widget icon to the canvas area. When the user sees a green horizontal line appear, the user can drop the widget into the target block just below that line. See Fig 5 below for the widget sub-menu.
Fig 5
5 - “+ Attach” tool. This tool allows the user to attach a separate file to their email campaign, such as a PDF.
Note: Users should avoid attaching files whenever possible. Most ISPs may consider an attachment a form of spam and place your email in the recipient's spam folder, or worse, block the email altogether. In addition, most corporate inbound servers will consider an attachment a potential malware risk and block or quarantine your email unless the sender is specifically listed as a “safe sender”. Even if the email is allowed to reach the targeted inbox, the recipient may not be able to open the attachment.
6 - “Spam Check” feature. Although the Builder will automatically run Pinpointe’s spam checking tool when a user Saves & Exits the application, the user may check the template’s current spam score at any time by clicking the “Spam Check” tool link.
Note: Pinpointe uses a third-party spam checking algorithm called Spam Assassin. This is a very popular tool used by many ISPs and provides valuable feedback as to the calculated spam score of an email's content. Users should be aware, however, that an email’s numerical spam score is only one of dozens of determinants of whether a given email will be placed in the recipient’s spam folder or inbox. Many industries must use words that will automatically be flagged as spam-like, but this should not deter a user in that industry from using these words. It is better to have an email that presents a focused, informative and interest-inducing message with a higher spam score than otherwise.
7 - “</> Html”. This tool is used primarily by Pinpointe Support and Engineering to troubleshoot various issues and problems with a particular template. Although a user can click on this link and see the underlying HTML code for their template, the code cannot be modified directly.
8 - “Versions”. As a user saves his template, it creates various versions, which in turn creates a timestamp in this list. A user may select an older version should the need arise to recover a previous structure / style.
Styling Control Menu and Sub-Menus
Rolling over any parent block will bring up various small icons just to the upper left and right of the block. On the left side, closest to the block’s boundary line, will be a green square with a grey gear icon inside (see Fig 1 below). Clicking this icon will bring up the primary styling control panel (called “Module Options”) just to the left of the canvas area (See Figs 2 and 3 below).
Fig 1
Module Options panel
Fig 2
Fig 2 shows the upper section of the Module Options control panel.
1 - Background
The user can set both the inbox background (the “Background” option) and the background of the parent block itself (the “Body” option).
The “Background” is the recipient’s inbox background that surrounds the actual email. The default color in the Builder for all Basic Blocks is a light grey, but the user can change it to whatever color they prefer.
The “Body” refers to the visible background of that parent block. The default color in the Builder for Basic Blocks is white, but may be set by the user to the color of their choice.
In addition to using a color as a background, the user may also select an image. The user may overlay this background image with text, titles, buttons, images, separator lines and icons. Please note: Outlook does not allow background images and will default to whatever default color you have selected. If you do use background images, please make sure to select a default background color that will contrast with any elements in that parent block. For example, if your text is white, you would not want a white or very light color as the default background color, as it would make the text unreadable for those recipients using Outlook as their email application.
2 - Title
3 - Text
Under the “Typography” section, the user will find two main element sections, “Title” and “Text”. Using the options available in these sections, a user can control various styling parameters for any title or text block in this parent block, including font, font-weight, justification, color, font-size, and line height.
These controls will globally affect ALL title or text blocks within that parent block. For example, if there are three titles within a given parent block, and the user uses the primary control module to set titles to font color of red, all the titles in that block will become red. A user may set the color of a single title within a parent block, however. That feature will be described later in this article.
4 - Save Block button
As discussed above, clicking this button will add whatever parent block is selected to the user's "Save Block" library.
Fig 3
5 - Spacing
All parent blocks have a default top and bottom space bar. In all Basic Blocks, this is set to a default of 25, but a user may use the button slider or increment / decrement tool to adjust the value from 0 to 100.
All Basic Blocks also have a vertical spacer called a “gutter” on the left and right outside edge. The default value is 20, but may be set by the user from 0 to 50.
Two and three-column Basic Blocks also have an “Inner Spacer” between the columns. The values for these inner gutters can be set separately from the outer gutters.
Column Options sub-panels
Clicking on any title, text, image, button, separator line, interior spacer or icon element will bring up a sub-control panel called “Column Options”. The features and controls of these sub-control panels will differ depending on the element type.
Presented below is a brief overview of these sub-control panels. A more in depth discussion can be found in various other articles specific to each type.
1 - Text / Title Column Options
The Text (works for both titles and text) sub-control panel allows the user to selectively style a single block of text within a parent block as opposed to all text / title blocks in that same parent block as would be the case when using the primary Module Options control panel discussed above.
The Text sub-control panel also lets the user insert variablized custom fields, as well as links to forms and surveys.
2 - Image Column Options
The Image sub-control panel allows the user to manage their image folder and sub-folders, import new images, select a stock image, make the image a link and apply various styling parameters to the image itself.
3 - Button Column Options
The Button sub-control panel lets the user set various styling parameters for buttons, as well as assigning a link and changing the button label.
4 - Icon Column Options
The Icon sub-control panel provides a library of insertable icons, the ability to set certain styling parameters such as size, justification and color, and to assign an icon a link.
5 - Separator Line Column Options
Using the Separator Line sub-control panel, a user can assign various styles to a separator line.
6 - Spacer Column Options
Since internal spacers are meant to be unobtrusive or invisible, styling options are limited, but they can be given a height parameter, as well as a background color.
Social Option sub-panel
The last sub-panel in our discussion is the Social Options sub-panel.
The Social Options sub-panel lets the user configure the style of their social icon links, and to add or remove links. The user can also set what action will be taken when a recipient clicks on a given link.
This concludes our overview discussion of the main sections of the Drag & Drop Campaign Builder. More detailed information on the various features of the Builder can be found in Pinpointe’s Knowledge Base Library.