The Visual Editor is used to compose visual content in the workflows for Activities and Messages in Salsa Engage. This article documents the Visual Editor as if it were a stand-alone part of Salsa Engage. However, in practice, the Visual Editor can be found only in the context of specific activities or emails. This help section covers the common options and standard workflows of the Visual Editor.

Many components of the visual editor are featured in all of Salsa Engage's forms. However, each form has unique elements, and each element has different editing tools. For example, Sign-Up Forms do not have payment configuration options since those elements don't apply to Sign-Up forms. Descriptions for creating various activities and emails can be found in their own articles.

Navigating the Visual Editor

"When starting with any email or form, when you arrive in the Edit screen (after clicking "Edit Email Content" or "Edit Form Content,") go to the Settings section under the Editor Menu before beginning any design work. Check to make sure that the defaults for things like font type, link color, button color, and style all match your organization's branding. This will save you time as you're editing, so you can avoid having to tweak each content section and each button's design independently because you'll have those defaults in place."

Ilona Globa, Salsa Product Adoption Specialist and Head of the Smart Start Fundraising Program

Most of the work will be done from the Compose section of your activity or the Create the Email section of your messages. This is where you add, edit, or remove your activity metadata, page content, form elements, payment gateways, or third-party tracking codes. Click on the Edit Content button to get started or continue editing your page. All available elements are defined below.

The page edit screen displays a realistic view of your email or web page as you continue to add to and edit your content.

Elements must be embedded in rows. This makes it easier and quicker for you to build good-looking pages and emails. Salsa Engage supports nested rows up to two deep.

Moving your mouse over a page element will display an orange dashed line around the element that shows the extent of that element. A blue dotted line shows the extent of rows within the page putting your mouse over the row button.

The options available by clicking any of these icons will depend on the type of design element you're working on. For instance, selecting the pencil icon on an Image element will bring up your image library. Clicking the same icon on a Text element gives you an in-line text editor. It's important to not confuse Row controls with Element controls.

Replace Elements in Older Activities and Emails

If you have older Activities that you want to copy, after the form has been cloned, you'll want to...

Delete any deprecated Form Elements.
Replace it with the new Form Element.

For instance, any forms older than 2018 with a Social Follow element (white social media buttons) should replace the Social Follow element with a new version of the element (colored social media buttons) by deleting the element and choosing it again from the Elements tab (described below).

Old 'Follow' Element	New 'Follow' Element

In another example, if you clone any older activities with Form elements, Salsa Engage will alert you to remove the existing form element and replace it with a new element.

Navigating Page Contents

At the top of the page, the grey toolbar contains information about which email or activity you're viewing, which page within the activity you're currently viewing, the live preview button, and save options. Along the right side is an Editor Menu that contains page settings, an outline mode, row items, and elements to add to the page.

Page Identity (A)

This section displays the activity or message type and name. If you are displaying an activity that has multiple page templates, like a peer-to-peer event that has a main page, a fundraiser page, and a team page to design, that page template type also displays here.

Page Navigation (B)

These links at the top of the page are called 'breadcrumbs' which represent a trail to follow through your site you are building. These links show you the current page that is displayed of all the pages in your activity as a little blue line below the page name. Clicking on that breadcrumb takes you to that page for editing that form. In the example above, this event form has 4 pages:

The activity's Landing Page where visitors start their experience. That is the currently displayed page, indicated by the blue line below the link.
The Registration form where tickets are selected and personal information filled out.
The Checkout screen where supporters pay for their tickets.
The Confirmation screen confirms their registration was successful and directs supporters on what to do next.

A Targeted Action page has different breadcrumbs:

The activity's Landing Page where visitors start their experience.
The Action page where you display the target set and have them take action through the defined channels.
The No Targets page where the supporter is led when they don't match one of your targets.
The Confirmation screen confirms their registration was successful and directs supporters on what to do next.

Page Preview (C)

This button displays the message or activity in a new window with all the editing functionality removed. The Preview view enables you to save your work and see what your message or form HTML will look like in your browser, simulating the view in a browser, tablet, or mobile device.

Click the Preview button to the top right of the editor to open a new browser tab.
To the right of the new screen, use the Preview controls to toggle between a computer screen, tablet, and a cell phone view of your content.

Pro Tip: It can be challenging to create emails that render well in all email clients, because email clients, unfortunately, have little standardization in the way they display HTML. Consider using a third-party program like litmus.com to test how your HTML email will perform in the myriad of different email programs. In addition, keep an eye on the breakdown of email clients accessing your content and start tailoring the design to the majority of those email clients your Supporters use.
NOTE: Be sure to send yourself actual test emails before publishing. Emails render differently in various email clients from this web preview.

Save Options (D)

The teal-colored Save button in the top right saves your progress when editing your activity or message. The Exit menu to the right of the Save button will allow you to...

Save your work and exit the Edit screen.
Cancel all changes since your last save and exit the Edit screen.

Editor Menu (E)

The Editor Menu by default can be found on the right side of the screen, but if you click on the yellow title area and drag it around the screen, you can reposition the Editor Menu wherever you wish. Just below that yellow area, the Hide Options area minimizes the Editor Menu's footprint temporarily as you work within your message or form.

Within the editor menu, you will find some buttons that will make large-scale changes to your message or form:

Settings

When you set up your Salsa account, you defined a set of default styles that are used for Activities. You can modify the overall look and feel of this particular form by changing the default design settings. The global changes you can set here pertain to...

Global Setting	Description
Page Settings	Page color or background image Content area color Maximum content area width
Text Element Settings	Font Font color Font size Link color Divider color
Button Element Settings	Background color Text color Border Corner style Button size Button style
Callout Element Settings	Background color Text color Border Corner style Padding
Form Element Settings	Field border Field corner style Field padding
Custom CSS	If you wish, you can write your own custom CSS for your form. The styles you define here will be included in the final output. These styles will not be applied in Edit mode, but you will see them in the Preview and Published versions. NOTE: Keep in mind that support for certain CSS declarations can vary widely between browsers and devices and may even not be supported by different browsers and devices. Only those with advanced CSS skills should use this feature.

Restore Default Look & Feel

If you wish to erase the current form settings and replace them with your default Look & Feel that was defined when you first set up your Engage account...

Click the Settings button on the Editor Menu.
Click the orange Restore Defaults button.
Verify you want to clear any customizations you have made to your Settings and restore them to your organization's default "Look and Feel" options. This is useful for removing undesired changes, restoring a cloned item to your default styling for a fresh start, or replacing the look of a pre-designed template with your own branding. This action will not clear out any code in the "Custom CSS" section.

Check the box to remove any styles that have been set for each element in its "Container Settings" or "Form Settings" configuration and restore them to your defaults. (Elements could include text boxes, buttons, images, callouts, etc.)

If the box is left unchecked, then the defaults will only apply to anything currently getting its styles from the Settings. Here is what resets when you check that box:
- ALL ELEMENT CONTAINERS (the right column of the Container Settings modal)
  - Border
  - Background
  - Corner Style
- BUTTONS:
  - Background color
  - Text Color
  - Font
  - Border
  - Corner Style
  - Button Size
  - Button Style
- DONATION AMOUNTS ELEMENT
  - Everything in the Design tab except alignment. Same as for Buttons plus Font Size.
- FORM SETTINGS
  - Nothing
Click OK to clear any customizations you have made; otherwise, select Cancel. This action cannot be undone.

Disable Theme Styles

If you are embedding your form onto your own site, you can disable your Engage theme styles so your form elements inherit the CSS styles from your own website.

Slide the Theme Styles slider to the left to disable your theme styles.
Disabling your theme may cause you to lose any custom design settings that you have set for this form. If you save and exit, and then come back and re-enable the theme, the style settings will be reset to the default that you set up in Engage for your organization. To disable the theme styles for this form, click Ok.
Once disabled, you can write your own custom CSS for your form. Only those with advanced CSS skills should use this feature.

You may need to use !important and id's to successfully override existing styles. Keep in mind that support for certain CSS declarations can vary widely between different browsers and devices. Because Engage element styles rely on specific class names, you may need to add some additional CSS styling to get your embedded form to look exactly as you want.
Use the Copy to Clipboard button to the left to copy base declarations for Engage classes. We recommend that you then paste the base declarations into the box to the right. You can also paste them into your own stylesheet.

NOTE: if you disable the default theme for a Peer-to-Peer or Event Activity, you'll have to style the registration flow through the Engage Custom CSS, not your own stylesheet.

Add A Row

This button item displays a menu of drag-and-drop columns that include Header and Footer, but also multi-columns and sidebars. The Rows menu also include pre-formatted configurations into which you can easily place your Elements. This makes it easier and quicker for you to build good-looking pages and emails. Salsa Engage supports nested rows up to two rows deep.

Click the Add a Row button, and then drag the row option into the cell that you want to break into rows.

Add An Element

Elements enable you to add various content to Activity forms. Elements must always exist within Rows. Click the Add an Element button, and then click and drag any Element into the Row container to which you want it added. An Options dialog box will open for the Element that you've placed. See Font and Element Options for a detailed list of available Elements and what you can do with them.

The best way to learn what options are available for Elements that are already on a form is to hover over any Element you are interested in, click the pencil icon, and experiment with the various options. For example, if you are in a Fundraising form on a donation amount button, click the pencil icon. A dialog box will open in which you can change...

The button type (Traditional or Radio Style).
Whether a donor should have options for a One Time Gift, Recurring Gift or Both.
Suggested donation amounts.
How often the donation will be collected (Once a Month or Once a Year).
Button design.

If you've made changes that you do not want to keep, click Cancel to close the dialog box without saving changes.

NOTE: Some elements can be used only once. If one of these Elements is already included in your form, it will be grayed out in the Elements tab.

Outline Mode

Working with embedded rows in your form or email can be tricky. Outline view is particularly useful for managing embedded rows. The Outline view enables you to shift Rows or Elements in your form. Click the Outline switch button to toggle the screen into outline mode. The Outline Mode ON button replaces the Outline Mode OFF button.

When Outline Mode is OFF, to the upper-left corner of each Element and each object within an element is a small, orange rectangle with white dots.

Click this rectangle to open a menu that enables you to move the Element.
When Outline Mode is OFF, Click on the teal Row button (above) to switch to Row control. Click the teal dots icon, hold, and drag the icon to move entire row.
When Outline Mode is ON, click the grey icon dots, hold, and drag the icon to move entire element.

Element Warnings

Some elements need information that is important to the proper functioning of the element. When that information is not available, Salsa Engage will warn you that more information is needed.

For instance, you have a map element on your home page, but you have not added an address to your event. Salsa Engage will produce a warning on the Editor Menu and a warning icon on the element as a visual reminder that the information needs to be included. Clicking on the red Editor Menu warning displays the items that require your attention.

You can also put your mouse over the red element warning symbol to see the warning for that particular element.

Editing Page Contents

Row Controls

Row Settings—Use the icon that looks like small, interlocking gears is where to select a background color or image, border, padding, corner style, and mobile adjustments for the given cell.
Duplicate Row—Use the icon that looks like loosely stacked sheets of paper to duplicate the row and place the new copy in certain locations, as in the example below:
- Copy to top.
- Copy to Registration.
- Copy to Checkout.
- Copy to Confirmation.

Delete Row—Use the 'trashcan' icon to delete the given row. You'll be prompted before the row is deleted forever. There is no Undo function with this step.

Element Controls

Element Container Settings—Here is a brief description of the types of features that are available via the 'gear' icon for each type of Element (with further explanation below):
- Design—Control the element padding, width, height, vertical scrolling within the element, border, corner style, and background.
- Mobile—All Salsa Engage forms are responsive by default. However, you may want to make further adjustments to any element based on the size of the display you expect your supporters will be using to view your forms or emails.
- Advanced CSS—In conjunction with Custom CSS added to Engage, you can list any custom CSS classes you want to apply to this element's container. You may define style declarations for these classes in the Custom CSS tab of your overall Design settings. Use the element ID in your Custom CSS to specify certain elements.
  
  Pro Tip: Keep in mind that support for certain CSS declarations can vary widely by different browsers and devices and may even not be supported by different browsers and devices. Only those with advanced CSS skills should use this feature.
Edit Element—Use the 'pencil' icon to edit each type of Element (with further explanation below):
- Button—You can add a button anywhere on your form that links to another page. Once you've selected the Pencil, you can refine the button's attributes: Adjust the link, the positioning, and the size.
- Callout—When selecting the Pencil for this field, the Edit Featured Content window will open. It's a lot like the edit text window for the Text element. The important choice for this field, however, is made using the Design tab, in the upper right-hand corner of the visual editor. That's where you can adjust the color of the Callout field itself.
- HTML—Be careful when using this field. Use the Pencil if you want to tweak HTML directly. Keep in mind that you can break your form if your HTML is invalid or incorrect in any way.
- Image—For the Image element, the Pencil icon opens the Salsa Engage image library. Using the image library window, you can add to your form and images to Salsa Engage. Click here for an overview about adding images to and editing images in Salsa Engage. Click here to see images best practices.
- Merge Fields—Use the head and shoulders icon to open the Insert a merge field dialog box. Merge Fields enable you to insert dynamic text elements into your forms and messages. For example, the message could include a link to the supporter's fundraising page, so when your supporter sends a message to a donor, the donor will receive a link to the supporters fundraising page. Insert available merge fields and use the radio buttons to format capitalization. Also, enter the message that you want if the merge field for a supporter is blank.
- Share (Social)—You can add the option of sharing your form to social media, such as Facebook and Twitter, to your forms. Select the Pencil to change the arrangement of these options vertically or horizontally and to decide which social media options you'd like to include or exclude. By default, all are chosen. You can also add a message which outlines why it is important that your supporters share this page. You can edit this verbiage with a slightly truncated version of the 'Edit Featured Content' window, explained in the Text section above.
- Text—Selecting the Pencil on the Text element will bring up the Edit Text window. The window features many of the editing tools that you are familiar with from popular desktop publishing tools, such as Microsoft Word and Google Docs. Hover over any icon in the window to see a description of what it is or just experiment.

Everything Else—You will see additional Elements depending on the type of form you're building. If you're building a fundraising form, you won't see the 'Signatures' icon, but you will see it if you're building a petition. These are all editable with the Pencil, but you'll notice that some are grayed out. A grey icon indicates that the field is already included in the form and another cannot be added.

Delete Element—Use the 'trashcan' icon to delete the given row. You'll be prompted before the row is deleted forever. There is no Undo function with this step.

Hyperlinks

Add hyperlinks to Activity and Messaging actions so that supporters can click to find more information. You can add hyperlinks to both Your Pages created in Engage or An External Page that exists entirely outside of Engage. Add hyperlinks to Text, Buttons, and Images Elements.

The process looks the same whenever you click to add a hyperlink to your elements:

the Choose a Link section, on the Your Pages tab, Link to any Salsa Engage Activities page that you have created.
- Use Search to find the Activities page or look for it in the table below.
- Click the Select button on the corresponding row to use that internal page as your hyperlink.
If you want to use an external URL, click the An External Page tab.
Enter or paste the URL that you want to link to into the Link field. Be sure the right Protocol is selected (if you paste in HTTP or HTTPS in your URL it should select the right protocol automatically) and enter only the URL in the Link field.

NOTE: If you want to link to a Salsa Engage Activities page that you have created, use the Your Pages tab (above) instead of this one
If the destination form is an Engage form and you have 'Form Prefill' enabled in your Settings, we will always pre-populate the supporter's data if known. However, using the tabs below, you can also append parameters to your link that will pre-populate custom fields with specified values on the destination page when someone clicks on this link from their email.
You can optionally set a Salsa Tracking Code for this email on this screen.
Click Save to add your link to your text.

Text element

Add a hyperlink within your content by first editing your text in the text editor.

Highlight the text you wish to turn into the anchor for your hyperlink.
Click the "chain link" button in the text editor.

Button element

Add a button to your page that links out to either another Engage form or to an external web site. Buttons in emails are rendered in HTML. Even if a recipient doesn't display images for their emails, they'll likely see your button.

Double-click your button to start editing.
Click the Link tab.
Click Add a Link.

Later, you will be able to edit this link or clear it on the same Link tab.

Image Element

Add a link to make your images clickable. Supporters can click on an image that directs them to internal Engage forms or external pages.

Add your Image Element as normal to your page by dragging the Image Element from the Editor Menu onto your page where you'd like to position it.
Double-click the element to select the image.
While you are selecting your image you can also Add a Link on the right side of the Select Image screen.

Custom HTML Hyperlinks

If you choose to code your own HTML in an email, you can add hyperlinks referencing any of 'Your Pages' created in Engage or 'An External Page' that exists entirely outside of Engage using the Link button at the top of the screen.

Manually Add a Tracking Code to a URL

Add tracking codes to your email hyperlinks. For instance, your email marketing specialist generates an email for you, along with a call to action hyperlink within the email to visit your petition. The URL they send in the email may contain a tracking code to identify this exact campaign, providing a mechanism to quantify how many responded to that source by clicking the link to participate.

NOTE: When you add a tracking code to a URL, that code overrides any default code set on the activity to which the URL directs.

To add a Tracking Code manually to a URL, simply add the following field-value pair to your URL query string:

sl_tc=[value]

A URL with a tracking code would look like this:

https://sample.salsalabs.org/index.html?&sl_tc=2018_01_30_SLCR

Form Prefill in Hyperlinks to Engage Pages

If the destination form is an Engage form and you have Form Prefill enabled in your Settings, we will always pre-populate the supporter's data i(f known). However, you can also append parameters to your link that will pre-populate donation amounts or custom fields with specified values on the destination page when someone clicks on this link from their email.

Mail-to Links

If you want to direct a supporter to email someone, add a Mailto: link. Adding this link to your form generates a new email message in the supporter's default mail program with one or more fields like To: and Subject: already pre-populated. To add a mailto link:

Add a hyperlink via one of the elements listed above.
Select An External Page tab.
In the Protocol field, select Mailto:.
In the Link field, enter the email address.

You may enter more than just the email address in the Link field. For example, add the following to the link, which will create a new email in the supporter's default email program, with a To: address (highlighted in red—you do not need to color yours), subject line (highlighted in blue), and email body (highlighted in green):
```
example@domain.com?subject=Subject%20Example&body=Email%20Body
```
NOTE: %20 is the HTML equivalent of a space between characters. Use this instead of the space key on your keyboard.
Click the Save button to save your changes.
Save your form changes in the top right corner.

Append Donation Preset Fields

You can set parameters for outgoing links from Engage emails, once you have selected the link source. One example is a link whose content says, 'Your donation of $20 will fill a backpack for a child. Donate $20 today!' The $20 donation amount will be passed to the destination form and preselected based on conditions set on the link.

In the case of fundraising forms, when someone clicks on this link from their email, donation amounts or custom fields with specified values on the destination page will automatically populate one-time or recurring donation amounts on the fundraising form.

NOTE: The Gift Designation field can be used in conjunction with this functionality.

A Default one-time or recurring donation amount may be set with the following parameters:

A distinct Dollar Amount (in whole numbers)
Most Recent One-Time Donation Amount
- Increment By a specific percentage over the most recent amount.
- With a Minimum Amount of a specific value or leave blank for none.
- Default Amount to be used if none occurred previously, or leave blank for none.
Average One-Time Donation Amount (rounded to nearest dollar)
- Increment By a specific percentage over the most recent amount.
- With a Minimum Amount of a specific value or leave blank for none.
- Default Amount to be used if none occurred previously, or leave blank for none.
Largest One-Time Donation Amount
- Increment By a specific percentage over the most recent amount.
- With a Minimum Amount of a specific value or leave blank for none.
- Default Amount to be used if none occurred previously, or leave blank for none.
Use A Custom Field-Any supporter custom fields that are Number-type fields.

If you choose to link from an external page or form, it is possible to specify the parameter that represents the amount field of that external form. Since there could be millions of combinations of what someone else called the amount field, it's not possible for us to prepopulate what that field would be on an external page. It can, however, be typed in.

Append Field Presets

Populate supporter custom fields based on answers previously submitted via sign-up form; for example, how many days of the week someone can volunteer. For example, if someone answered a question previously on a sign-up form, they have a value stored in their Engage record already. If they fill out another form that contains the same field, then the existing value is populated automatically when they use the form. If they are new, then your default values would be used, as seen below.

Element Container Settings

Features available via the Gear button for each element (also called Container Settings)...

Design—Control the element padding, width, height, vertical scrolling within the element, border, corner style, and background.
Mobile—All Salsa Engage forms are responsive by default. However, you may want to make further adjustments to this element based on the size of the display you expect your supporters will be using.
Advanced CSS—In conjunction with Custom CSS added to Engage, you can list any custom CSS classes you want to apply to this element's container. You may define style declarations for these classes in the Custom CSS tab of your overall Design settings. Use the element ID in your Custom CSS to specify certain elements.

Pro Tip: Keep in mind that support for certain CSS declarations can vary widely by different browsers and devices and may even not be supported by different browsers and devices. Only those with advanced CSS skills should use this feature.

Element Edit Settings

Here is a brief description of the types of features that are available via the Pencil for each type of Element:

Button—You can add a button anywhere on your form that links to another page. Once you've selected the Pencil, you can refine the button's attributes: Adjust the link, the positioning, and the size.
Callout—When selecting the Pencil for this field, the Edit Featured Content window will open. It's a lot like the edit text window for the Text element. The important choice for this field, however, is made using the Design tab, in the upper right-hand corner of the visual editor. That's where you can adjust the color of the Callout field itself.
HTML—Be careful when using this field. Use the Pencil if you want to tweak HTML directly. Keep in mind that you can break your form if your HTML is invalid or incorrect in any way.
Image—For the Image element, the Pencil icon opens the Salsa Engage image library. Using the image library window, you can add images to your Salsa Engage form. Click here for an overview about adding images to and editing images in Salsa Engage. Click here to see images best practices.
Merge Fields—Use the head and shoulders icon to open the Insert a merge field dialog box. Insert available merge fields and use the radio buttons to format capitalization. Also, enter the message that you want if the merge field for a supporter is blank.
Share (Social)—You can add the option of sharing your form to social media, such as Facebook, Twitter, and Google+, to your forms. Select the Pencil to change the arrangement of these options vertically or horizontally and to decide which social media options you'd like to include or exclude. By default, all are chosen. You can also add a message which outlines why it is important that your supporters share this page. You can edit this verbiage with a slightly truncated version of the 'Edit Featured Content' window, explained in the Text section above.
Text—Selecting the Pencil on the Text element will bring up the Edit Text window. The window features many of the editing tools that you are familiar with from popular desktop publishing tools, such as Microsoft Word and Google Docs. Hover over any icon in the window to see a description of what it is or just experiment.
Everything Else—You will see additional Elements depending on the type of form you're building. If you're building a fundraising form, you won't see the 'Signatures' icon, but you will see it if you're building a petition. These are all editable with the Pencil, but you'll notice that some are grayed out. A grey icon indicates that the field is already included in the form and another cannot be added.

Text Element Merge Fields

Merge Fields enable you to insert dynamic text elements into your forms and messages. For example, the message could include a link to the supporter's fundraising page, so when your supporter sends a message to a donor, the donor will receive a link to the supporters fundraising page.

Supporter Type

Address, line 1
Address, line 2
Cell Phone
City
Country
Date of Birth
Email Address
First Name
First Petition Signature Date
Home Phone
Last Name
Last Petition Signature Date
Middle Name
State
Subscription Change Date
Subscription Date
Suffix
Supporter Since
Title
Total Petition Signatures
Work Phone
Zip Code
[custom fields]

Fundraise Type

NOTE: Engage will automatically add a $ to the front of a merged fundraising field value. Cents will not be displayed nor will a decimal point if the decimal value is zero. A ten-dollar average donation amount will display as $10 and not $10.00.

Amount Of Most Recent Donation
Average Donation Amount
Average One-Time Giving Amount
Average Recurring Giving Amount
Date Of Most Recent Donation
Largest Donation Amount
Largest One-Time Giving Amount
Largest Recurring Giving Amount
Last One-Time Giving Amount
Last Recurring Giving Amount
Lifetime Giving Amount
Lifetime Number of Donations
Type Of Most Recent Donation
[custom fields]

Organization Type

Organization Name
Org Address Line 1
Org Address Line 2
Org City
Org State
Org Zip
Org Phone
Org Email

Separate types exist for custom supporter, activity, and general custom fields and are unique to every organization.

Visual Editor for Activities and Messages