Email Composer

When you open the builder, there are two primary sections:

• The Composer section is where you drop content blocks and rows while designing. This is the section on the left side of the screen.
• The Sidebar is where many of the design elements can be customized. This is the section on the right side of the screen. There is a chevron icon that separates the builder stage and the sidebar. You can use this to minimize the sidebar at any time.

Settings

The Settings tab in the Sidebar allows you to set defaults for your entire design. When working with rows and content, those design elements inherit these settings.

You can use the settings tab to modify the following options:

• Content area width
• Content area alignment
• Background color
• Content area background color
• Background image
• Default font
• Link color

Rows

Rows are the primary structural element for designs created in the Composer.

Most importantly, rows act as a container for all of your content blocks. Click and drag over a pre-formatted row container. The listed options show how pre-formatted columns are configured within the row. For example, the first entry shows a row with one column stretching 100% across your email. The second entry shows two columns, the first of which is 1/4 the total width. The third entry shows two columns, the first of which is 1/3 of the total width.

Content Blocks

Even when starting with a default template, there will be elements that you’ll want to add to the email. To do this, click on the Content tab in the right column. Select an element you want to add and drag it into your email where you want that block to display.

There are several content blocks you can use while designing in the Composer. All content blocks include padding settings and hide-on settings in the sidebar.

• Image—Adds a new image block.
• Button—Adds a new button element.
• Divider—Adds a horizontal line to separate items in the template. You can customize the color and size of the divider line after adding it to the email.
• Social—Adds a block where you can enable social media icons with links. You can choose to enable any number of social icons including Facebook, Twitter, LinkedIn, Instagram, and more.
• HTML—The Custom HTML content block allows you to easily add your own HTML code to a design created in the Beefree builder. It’s as simple to use as a text block.
  

  HTML experts only: Using your own code may affect how the design is rendered. This could prevent it from adjusting to the screen size (i.e. the "responsiveness" of the design). Make sure to use HTML that is email-compliant and responsive. Keep in mind that custom HTML is often outside of our scope of support.

• Icons—This type of content block allows you to use small images and text together in a single content block to provide more flexibility in your designs.
• Text—Adds a new text block.

Insert and Edit Text

To edit a text block, click inside that block. There are formatting options displayed as you type or paste the text into the block.

• Fonts: There are several email-friendly fonts available from the font drop-down. Please note that these are the approved fonts. We don’t recommend using a custom font because those will not always display properly to all email recipients.
• Basic Formatting: You can change the size of the font, bullet or numbered list, change the color, and more using the options that display in the toolbar.
• Merge Tags: If you want to insert a global variable, such as the user's first name, place the cursor in the text where you want the variable to display...
  1. Click the “Merge Tags” option.
  2. You’ll now see all of the possible variables that can be inserted into the text.
  3. Click the merge tag that you want to use and you’ll then see it added to your text block.

• Special Links: If you want to create a link in the text to an activity in the community...
  1. Highlight the text you want to turn into the link.
  2. Click the Special Links option.
  3. You’ll now see a list of all the Published and Scheduled activities in the community. Click the activity title to add a link to that activity in the text.

Merge Tags

Variable	Description
COMMUNITY_NAME	Insert your community's name.
COMMUNITY_URL	Insert your community's web site address.
COMMUNITY_LOGO_URL	Insert your community logo.
COMMUNITY_SUPPORT_EMAIL	Insert your email that recipients should use for help or questions.
COMPANY_URL	Insert your company web site address.
USER_EMAIL	Insert the recipient's email address.
USER_NAME	Insert the recipient's user name for logging into the community.
USER_FIRST_NAME	Insert the user's first name. Example: Dear ${USER_FIRST_NAME}
USER_LAST_NAME	Insert the user's last name.
USER_FULL_NAME	Insert the user's first and last name.
USER_REWARDS_URL	Insert the web site link they would click to see their available rewards.
RECRUITMENT_URL	Insert the recruitment URL you've selected to send. This is only for use in a recruitment email campaign.
ACTIVATION_LINK	This is only for use in system emails to send members a link to activate their account. Insert to provide account activation link.
RESET_PASSWORD_LINK	Insert link for members to reset their password.
MOBILE_PASSWORDLESS_LINK	Insert a link to allow members to log into the mobile app without their password.
NPS_SURVEY	This is only for use if you have purchased NPS as a Fuel Cycle add on. Insert an NPS survey into your email.
ACTIVITY_TITLE	This is only for use in system emails which are automated to send about a particular activity (e.g., a live chat reminder email). Insert the activity title for the activity the email is automated for.
INTERVIEW_SCHEDULE_URL	This is only for use in system emails which are automated to send about a particular interview a moderator is set to run. Insert the URL the moderator should visit to launch the interview.
START_TIME	This is only for use in system emails which are automated to send about a particular event or interview a member has signed up for. Insert the start time for an activity. For example, if you are sending a confirmation email to the member when they sign up.
NO_PARTICIPANTS	This is only for use in system emails which are automated to send about a particular event or interview a member has signed up for. Insert the maximum number of participants allowed for an activity.
INTERVIEW_TITLE	This is only for use in system emails which are automated to send about a particular live interview a member has signed up for. Insert the saved title of the interview at the time the member registered. For example, if you are sending a confirmation email to the member when they sign up.
INTERVIEW_TYPE	This is only for use in system emails which are automated to send about a particular live interview a member has signed up for. Insert the type of interview for which the member registered. For example, if you are sending a confirmation email to the member when they sign up.
EVENT_SCHEDULE_URL	This is only for use in system emails which are automated to send about a particular event a moderator is set to run. Insert the URL the moderator should visit to view the event.
EVENT_TITLE	This is only for use in system emails which are automated to send about a particular event a member has signed up for. Insert the title of the event the email is automated for.
EVENT_LOCATION	This is only for use in system emails which are automated to send about a particular event a member has signed up for.  Insert the location of the event the email is automated for.
REMINDER_HOUR	This is only for use in system emails which are automated to send about a particular event, interview, or live chat a member has signed up for. Insert the hours until the session is set to begin.
ACTIVITY_DETAIL_PAGE	This is only for use in system emails which are automated to send about a particular event a member has signed up for. Insert the URL to the activity the email is automated for.
LIVE_CHAT_DETAIL_PAGE	This is only for use in system emails which are automated to send about a particular event a member has signed up for.  Insert the URL to the live chat the email is automated for.
TICKET_TITLE	This is only for use in system emails which are automated to send about a particular Delta Testing ticket. Insert the ticket title for the ticket the email is automated for.
TICKET_URL	This is only for use in system emails which are automated to send about a particular Delta Testing ticket. Insert the ticket URL for the ticket the email is automated for.

Insert and Edit Images

Once you insert an image block into your template, click on the image to see more options in the right column. To insert an image, click the Change Image button.

You will now be in the File Manager for your community. From here, you can...

• Upload: Use this option to upload an image from your computer. Once the file is uploaded it will display in the file list below at the top. Click the image name to insert it into the email template. You’ll be returned to the email composer's view with the image inserted and resized appropriately to the template.
• Import: If you have files being shared from Dropbox, Google Drive, and other popular services, you can choose to connect to those services to quickly import files into this email file manager.
• Search Free Photos: Select from over 500,000 stock photos available to use for no extra charge:
  • Start by searching for images by keyword.
  • Once you find an image, hover over it
  • Click the Import button to add it to the File Manager.

Once your file is uploaded or imported, hover over the image in the file manager to see a few options.

• Click the file name to insert the image quickly into your email.
• Click the “+” icon on the right to insert the image.
• If you want to view a large preview, click the middle icon on the right.
• If you don’t want the image in the file manager, click the trash icon to delete it.

Keep the file manager organized by creating folders as you add more images to your File Manager. Click on the folder icon in the upper right corner to create a folder and then move files into folders. This is an optional but helpful feature for organizing your files over time.

After you insert the image, you’ll be returned to the email composer with the image added to the template and resized to fit into the template.

Effects and More

The email composer comes with an image editor with several options. To launch the image editor, click the image in the email template and then click the Apply effects and more button in the right column.

From here, you can enable a filter, add a frame, add text over the image, crop, and more.

When done editing the image, click the Save button to exit the editor and return to the email composer. The image will update based on the changes you made.

Add Buttons

To add a call-to-action button...

1. Click on the Content tab in the right column
2. Drag the Button box into your template where you’d like it to display.
3. Once the button is added to your template, you can customize it by clicking on the block.
   • Change button text by clicking on the button and typing the new text. Similar to editing a text block, you can change the font, size, and other formatting options as you type.
   • Using Button Options in the right column, you can change the button background and text color, button alignment, width, border, and padding.
     
     
   • To add a link to the button...
     1. Go under Action.
     2. Paste a link into the URL text box. Otherwise, you can use the Special Links option or Link File under the URL field.
     3. When you select Special Links, a pop-up window displays where you can search for Published or Scheduled activities in the community and automatically insert the direct link to that activity.

Move or Delete Elements

For each element in the email composer, when you click on it, you’ll see a few options that display.

• To move the element, click and hold the icon on the left side and then drag the block where you’d like to display it.
• To delete the element, click the trash icon in the upper right of the block.
• To copy the element, click the duplicate icon in the upper right of the block.

Add Tagged Links

To create tagged links, scroll down to the bottom of the page. From there, you will see a row of buttons where you can select the Link Creator button.

A pop-up window displays the tagged link options.

• Paste or type the link that you want to tag in the top field.
• Enter a name that you want to use as the tag.
• Click the “+” button and the tagged link will be created in the bottom/gray text field. Click the field to copy the link and close out the window. You can now paste the link you copied into your email button or text link.

Preview the Email

Preview your campaign in the email composer. Click the Actions dropdown in the upper left corner and then select Preview.

Toggle between a Desktop and Mobile view of the email.

To exit the preview, click the "X" icon in the upper right corner.

Save a Template

As you are working on a campaign, you may want to save the template so that you can use the same branding and layout in future campaigns. Click the Actions dropdown in the upper left corner and click Save as Template.

This will download a file called “template.json” to your computer. You can rename this file so you can better find it in the future (make sure to leave the .json suffix on the filename).

When you create a new campaign, simply choose Upload saved template in the Template screen to load your template.

Another way to start a campaign with a customized template is to copy an older campaign. This will pre-populate the email template and design with the campaign you are copying.