Recent software enhancements are in red.

Introduction

The visual editor is used to compose Activities and Messages in Salsa Engage. This help section 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 a specific form. 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 amount configuration options since those elements don't apply to Sign-Up forms.

Replace Elements in Older Activities and Emails

If you have older Activities that you want to copy, you'll want to (1) delete the deprecated Form Element, and (2) replace it with the new Form Element.

Content Tab

All Activities include a Compose Content and Confirmation step as well as a step for creating Autoresponders. Events and Peer to Peer Events include additional tabs for the creation of Registration and Checkout Pages.

Salsa Engage automatically lands on the Content tab after a layout has been chosen. You can choose from the following views: Edit, Outline, Preview.

Copy and Paste

If you are copying and pasting content from elsewhere, check out our copy and pasting best practices article.

Edit View

This is the view that you will first see when you open the Visual Editor. Most of the work will be done from here, as this is where elements and content are added, edited, or removed. All available elements are defined below.

Outline View

The Outline view enables you to shift Rows or Elements in your form. The Outline view is the only place where you can make structural changes.

Click  to toggle the screen into outline mode. The Outline Mode ON button replaces the Outline Mode OFF button.

Once in the Outline view, click, hold and drag elements into different sections of the form. Click, hold, and drag the icon to move entire sections.

Save & Preview

The Preview view enables you to save your work and see what your form HTML will look like in your browser, simulating the view in a browser, tablet, or mobile device.

• Click the Save & Preview button to the top left of the editor to open a new browser tab.
• To the right of the screen, use the Preview controls to toggle between 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. Here is a helpful resource that other clients of ours have used to mitigate these kinds of problems: http://www.email-standards.org. 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 clients your Supporters are using.

Rows Tab, Elements Tab, and Design Tab

On the right-hand side of the menu bar that features the View Buttons (Outline, Edit, and Preview), you'll see tabs that you can use to add Elements: Rows, Elements, and Design.

Design Tab

The tab enables you to define design and page preferences and to use your own, custom style sheets, or CSS. 

To open Design controls, click the Design tab at the top-right of the screen. Design controls contain three tabs:

1. Design Preferences - This tab enables you to make changes to a specific form that may deviate from the default choices made at the account level. Changes can be made to general settings (background colors and dividers), text, buttons, callouts and even form level changes to field styles.
   • If you don't like how the URL hotlink reads, you can change the part after the slash to whatever you'd like. From the Compose page of your form, click the Design button in the Editor Controls menu to the top right of the form. The Update Design Basics window will open.
   • Click the Page Preferences tab, and then scroll down to the Page Settings frame.
   • The Page Settings frame contains the Page Title and URL fields. In the editing text box to the right of the URL, enter what you want the URL to contain. Whatever you enter here will appear at the end of the hot-linked URL that Salsa Engage creates.
   • Click Save Settings.
2. Page Preferences - This tab enables you to choose to set a background image and link, apply keywords and a Facebook title, description, and images.
   
   
   • Change Your URL
     If you don't like how the URL hotlink reads, you can change the part after the slash (/) to whatever you'd like:
     • Click the Design button in the Editor Controls menu to the top right of the form. The Update Design Basics window will open.
       
     • Click the Page Preferences tab, and then scroll down to the Page Settings frame.
     • The Page Settings frame contains the Page Title and URL fields. In the editing text box to the right of the URL, enter what you want the URL to contain. Whatever you enter here will appear at the end of the hot-linked URL that Salsa Engage creates.
     • Click Save Settings.
     • Click the Republish This Form button.
   • Page Description for Search Engines - Add a short description that will help users know what this page is all about -- and why they should click to take action -- when they find your page in a search engine. Search engines show the description in search results mostly when the searched-for phrase is within the description, so optimizing the description is crucial for on-page search engine optimization.
     
   • Keywords - It's critical for people to find your site via search engines. Your keywords help connect searches to your site.
   • Social Network Title - Enter the title Social Network should display when this page is shared. Once the share reaches 50 or more likes or shares of its own, the Title cannot be altered.
   • Social Network Description - Add a short description that will be included in the post when this page is shared.
     
     NOTE: Twitter only refreshes its technology weekly, so changing your Social Network description and republishing will not take effect for one week, unless after you publish your page you check your live form at https://cards-dev.twitter.com/validator.
   • Social Network Image - This is the image that will be shared along with your description of your Social Network. Make the image at least 200 pixels high and 200 pixels wide, but no more than 5 MB in size. The image can be larger than 200 x 200 pixels but not smaller, in order to maintain a clear image.
3. 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.
   
   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.
   

Rows Tab

Elements must be embedded in rows. This tab brings up 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 own content. This makes it easier and quicker for you to build good-looking pages and emails. Salsa Engage supports nested rows up to two deep.

Click the Rows tab, and then drag the row option into the cell that you want to break into rows.

Elements Tab

See Font and Element Options for Activities and Messages for a detailed list of available Elements and what you can do with them.

Elements enable you to add content to Activity forms. They always exist within Rows.

Click the Elements tab, 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.

Pro Tip: 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, click the pencil icon for donation amount buttons. A dialog box will open in which you can change the type of button (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); and the button design. If you've made changes that you do not want to keep and you don't want to go to the trouble of reversing your changes, 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.

Add and Edit Rows and Elements

When you are on the Content tab and hover over an Element or object within an Element, the Element and/or object will be outlined in orange, and editing tools will appear for that Element and/or object. When you want to change an Element, you'll want to make sure that you have selected the Element and not merely the row.

Pro Tip: Because you are working in a browser, it's a good idea to save your work frequently, whenever you get to a point where you wouldn't want to have to redo your work if your browser were to crash.

 Row Movement Options

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.

 Row Settings (gears), Duplicate Row (pages), and Delete Row (trash) Controls

It's important to not confuse Row controls with Element controls. The gears icon controls Rows (aka, containers). The pencil icon for an Element controls its parameters and values. 

• Row Settings - The icon that looks like small, interlocking gears is where you can select a background color, border, padding, and corner style for the given cell.
• Duplicate Row - The icon that looks like loosely stacked sheets of paper, will replicate the cell and place the new copy directly below the original.
• Delete Row - The trash icon deletes the given element. You'll be prompted before the element is deleted forever.

 Element Settings (gears), Edit (pencil), Delete (trash) Controls

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 a text editor. It's important to not confuse Row controls with Element controls.

Following is a brief description of the types of 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.
  
  
  • Display Options include the following:
    • Show this element on both small and large screens
    • Hide this element on small screens; show it only for large screens
    • Hide this element on large screens; show it only for small
  • Alignment Options include the following:
    • On small screens, width of the container should always be 100%
    • Container position on smaller displays (left, right, center)
    • Alignment of content within the element on smaller displays (left, right, center)
• 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.
  
  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. 

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 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, 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.

Linking

Campaign Managers can add hyperlinks to the following Elements:

• Text links in Text elements for both "Your Pages" created in Engage and "An External Page" created entirely outside of Engage.
  
• Button element links for both "Your Pages" and "An External Page".
• Image Element links for both "Your Pages" and "An External Page".

In addition, Campaign Managers who choose to code their own HTML can add a link in the "Choose a Link" dialog for both "Your Pages" and "An External Page".

Append Donation Preset Fields

Campaign Managers can set parameters for outgoing links from Engage emails. One example is a link that 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 link parameters that are set on the link.

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, as shown above, you can also append parameters to your link that will pre-populate data. In the case of fundraising forms, donation amounts or custom fields with specified values on the destination page when someone clicks on this link from their email.

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

A Default One-Time or Recurring 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.

If you are choosing 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 an 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

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

Salsa Tracking Codes

If you have many different communications channels pointing to an Activity form (a fundraising form, for instance), and you want to differentiate the different ways that someone got to your Activity form, you can apply a Salsa Tracking Code to the URL used to get to the Activity form that makes that URL unique and reportable.  For example, you're A/B testing emails and want to tell which donations came from which email. You'd add a Tracking Code to Email A and a different Tracking Code to Email B. Each tracking code would report separately in the Form Results reports.

The Tracking Code that you add, as seen in the image above, is just a single, unique word used to differentiate that link. 

The Confirmation View Tab

The Confirmation tab is where you can craft a "Thank you" message page (#1) or choose to redirect to another URL (#2). These are optional, but many organizations like to display a follow-up page as confirmation of form submission. This tab also enables you to publish out to social channels.

This tab features many of the controls documented above. For example, click the Pencil icon to add and edit text. You can see the outline view (although there's not much to move around). You can also define some of the design elements.

Social Sharing

A unique element of this tab is the Social Sharing option. Open the Social Sharing Configuration window, where you can choose which social media channels you wish to include in your follow-up page. These posts are always public-facing and cannot be directed in private messages.

Once you have your message the way you like it, you can save the content using the appropriate button in the lower right-hand corner of the window.  In most cases, your form will be completed and ready to publish.

Autoresponders

Autoresponders are email messages that trigger once a form has been submitted. Strictly speaking, they are not part of the visual designer. Default autoresponders are built in for each type of Activity and can be used as-is or customized. A Visual Editor that is very similar to the one documented here is used for editing Autoresponder messages. See the Autoresponders page for additional information.