In This Article:

    Visual Editor Font and Element Options

    In This Article:

      Recent software enhancements are in red.

      This section covers all element options for Activities and Messages, including fonts to be used in email blasts and text elements, and the different elements that can be added to email blasts and activity forms to design the kind of advocacy and fundraising forms you want to display to your supporters.

      Fonts

      Activity fonts

      The following fonts can be used by default in the Visual Editor for Activities:

      • Arial
      • Cabin Sketch
      • Cardo
      • Comic Sans MS
      • Courier New
      • Droid Sans
      • Georgia
      • Josefin Sans
      • Josefin Slab
      • Lobster
      • Lucida Sans
      • Oleo Script
      • Open Sans
      • Poiret One
      • Roboto
      • Tahoma
      • Times New Roman
      • Trebuchet MS
      • Verdana
      • Volkorn

      If you want to use a font style that is not supported natively in Engage, such as a Google Font, you may add it through a custom CSS entry on your form. Here is a code example:

      /* Used to import the font style EB+Garamond from google's font library */
      @import url('https://fonts.googleapis.com/css?family=EB+Garamond');

      /* Used to make the imported EB+Garamond font the default font-family the Engage activity */
      body, p, h1, h2, h3, h4, ul, li, a, div, span, .sli-element {
      font-family: 'EB+Garamond', serif !important;
      }

      NOTE: The below changes are only recommended for activities. It is STRONGLY recommended that you only use our list of email-safe fonts to avoid issues with emails rendering properly across various email clients. 

      In the above CSS, you will need to replace the URL with whatever the URL is for where the font style is located. For example...

      @import url('Font_URL_Here');

      Google Fonts can be used as a library for many different types of font styles. They have over 900 fonts available for free. It will also generate the @import statement for you:

      1. Go to https://fonts.google.com/
      2. use the search tool to find the font you are looking for.
        00001044.png
      3. Select the fonts you want to add them to the "shopping cart".
        00001045.png
      4. Copy the information from the shopping cart into the CSS file.
        00001046.png
      5. When adding the font style after the "serif" or "sans-serif" indicator you will want to add "!important" before the semi-colon (see code example above).

        NOTE: since you are applying the font via CSS, you will need to save and preview or publish the form to see the font applied.

      If the font style is not included on fonts.google.com and instead it is housed on your website, you can instead point to your website.

      NOTE: If directing to your own website, security may block another site from using that font. You will need to allow Engage to access it. Your web developer will need to perform this update—our support staff does not have access to edit your web site. To resolve, the issue is Cross-Origin resources are being blocked and the .htaccess file or httpd.conf file need to be edited. You can find more details here.

      Once the import statement is setup, replace the name of the font-family: in the CSS block.

      Email Fonts

      The following fonts can be used in the Visual Editor for Emails:

      • Arial
      • Arial Black
      • Comic Sans MS
      • Courier New
      • Impact
      • Georgia
      • Lucida Console
      • Lucida Grande
      • Palatino Linotype
      • Tahoma
      • Times New Roman
      • Trebuchet MS
      • Verdana

       

      Elements

      Following are the Elements available in Salsa Engage and information about what types of editing options are available for each.

      Note: you will see only a subset of these for any given Message or Activity.

      360 MatchPro Widget—Two 360MatchPro Widget elements (created in partnership with Double the Donation) work with your fundraising form data collection or confirmation screens to allow donors to check if their donations can be matched by their employers.

      The checkout element allows the supporter to investigate during the checkout process if Double the Donation knows about that company's matching gift program. This element transmits information to your Double the Donation account regarding the potential match.

      The confirmation element lets the donor search for an organization's matching policy information within the confirmation element after the donation has been made. Checkout screen searches also coordinate with this element, so supporters will find that their input from the checkout screen populates this widget.

      See the 360MatchPro by Double the Donation article for more information.

      Add to Calendar—If applied to an Event or Peer to Peer Event, this will give visitors to those pages the option to click and automatically add the event to their calendars.

        • Edit button alignment, size, style, font, border, corner style, and link to an action, internal page, or external page

      Button—Apply a button to your form and choose the color, size, text, destination, and alignment.

        • Edit—Text, alignment, size, color, font, border, corner style
        • Link—Enables you to link the button to your own internal page, an external page, or a Form Action (including Register for Event, Donate, Add to Calendar, and P2P Fundraiser Login).

      Callout—This element functions much like the Text element, however, it is designed to call attention to itself using color and border. Edit text, color, and border.

        • Edit—font, style, and justification. Note, use the container settings (gears) to adjust the background color.

      Designations—Designations are unique to the Form Field Element in Fundraising forms. If you use Salsa CRM, the information that supporters enter into the Salsa Engage Fundraising form will be pushed down to Salsa CRM. It's important to keep in mind that a Designation made by a supporter on the fundraising form is different from the Fund that you used on The Basic tab. Fund on The Basics tab is specifically tied to an account in your accounting software. The designation, in contrast, is not necessarily tied to a Fund. Your organization determines what the Fund will be when you fill out The Basics tab, but the donor chooses the Designation on the fundraising form. The Fund may be something like "Operations Fund", whereas the Designation may be something like "blankets for kennels" or "winter jackets for homeless". Note, to force donors to choose a designation, you have to check the Required check-box and select None as the default value when you configure the Designation field.

      Dedications—Dedications are unique to the Form Field Element in Fundraising forms. If you use Salsa CRM, the information that supporters enter into the Salsa Engage Fundraising form will be pushed down to Salsa CRM.

      Divider—Apply a divider to any row here. To change the color, click on the Design tab to see options.

      Donate Button—This element appears as part of the Form element of the Fundraising activity. Choose a prominent location for the donate button or include one above and below the fold. Enables supporters to donate instead of registering. Event registrants may also make additional donations, but they would do so during checkout. Like standard buttons, you can edit the look and feel.

        • Edit button alignment, size, style, font, border, corner style, and link to an action, internal page, or external page

      Donation Amounts—Contains controls to enable you to set the following: what payment options appear, payment amounts; whether the donation should be a One Time Gift, Recurring Gift, or both; whether users can enter their own amount; and how often recurring gifts will be collected. Also enables you to choose button styles and design.

        • How should donation options be displayed?
        • What giving options will donors have on this form?
        • What donation amounts will you suggest?
        • Let users enter different amounts?
        • For recurring gifts, how often will donations be collected?
        • What donation amounts for recurring gifts will you suggest?

      Event Dates—Pre-populated with Start Date, Start Time, and End Time Merge Fields. Enables you to add dates to your Event Activity form.

        • Edit—font, style, and justification
        • Pre-populated with applicable merge fields

      Follow—Encourage supporters to follow your organization on social.

      • Use the Networks tab to select the social channels that you want to include. The URLs that you entered via Settings > Social Media Pages will be entered by default. (Click here for details about adding default social media URLs.) If you want to use different social URLs, you will need to enter the alternative URL. Note, users will have to already be logged in for the links to work on some social channels. This tab also enables you to edit alignment, font, style, justification.

        NOTE: you must check the social network checkbox and include a URL to include the social channel on your page. If you do not check the social network but there is a URL filled out, the system will treat that as an error.

      • Use the Design tab to edit icon size, color, orientation, and alignment.

      Form—Enables you to create an embedded, single page form into which supporters can enter their information. You can add additional fields, such as Dedications and Designations (where applicable), by dropping Form Field elements into the Form or Multi-step Form element. If you want an embedded form with multiple, embedded steps, see Form Field below. Note, the Form element and Multi-step Form element cannot be used at the same time. So, if you drag the Multi-step Form element onto the page, the Form and Multi-step Form elements will both be grayed out in the Elements chooser. Alternately, you can use the Step control to add additional steps to some forms. (Note, some forms do not have this option.) The difference between adding additional steps to a Form and using the Form Field element is that the steps you add to a Form element will be blank by default but the steps of the Multi-step Form element are pre-populated. This Element contains the following controls:

        • Header
        • Email Address
        • First Name
        • Last Name
        • Address, line 1
        • Address, line 2
        • City
        • State
        • Zip Code
        • Receive update?
        • Button

      NOTE: Country is not a default element on a form. The default country for a form is United States. To be compliant with Canadian addresses, you must add a Country form field to the form. Form Fields are described below.

      Form Field—This Element can be dropped into only a Form or Multi-step Form Element. It enables you to add fields to Form or Multi-step Form elements. Drag and drop the Form Field element to where you want it to appear in the Form or Multi-step Form element. When you place the form Field element, the Select Field dialog box will open. Choose the type of element that you want to include. Elements include the list below and Custom Fields that you have added.

      NOTE: to see the Parameter name for any field, view it in Edit mode. Edit mode open when you first add the Form Field or click the edit pencil icon for a Form Field.

      This Element contains the following controls:

      Field Name Data Type Type
      Confirmation Checkbox Input Activity
      Designation Input Activity
      Display my donation anonymously Input Activity
      Do not display my donation amount Input Activity
      Donation Dedication Input Activity
      I would like to make a donation Input Activity
      Increase donation amount to cover processing fees? Input Activity
      Please keep me informed.
      • If checked, this subscribes supporter as an 'opted-in' condition. Unchecked submissions will never unsubscribe a supporter that is already opted-in. Only Manage Subscription can do that.
      Input Activity
      Please notify the following person(s) that a donation has been made Input Activity
      Public Display Name Input Activity
      Address, line 1 Input Supporter
      Address, line 2 Input Supporter
      Cell Phone Input Supporter
      City Input Supporter
      Country Select Supporter
      Date of Birth Input Supporter
      Email Address Input Supporter
      First Name Input Supporter
      Gender Select Supporter
      Home Phone Input Supporter
      Last Name Input Supporter
      Middle Name Input Supporter
      Preferred Language Select Supporter
      State Select Supporter
      Suffix Input Supporter
      Supporter ID Input Supporter
      Title Input Supporter
      Work Phone Input Supporter
      Zip Code Input Supporter


      Fundraiser Search
      —Optionally apply a fundraiser search button on the P2P Event form which allows visitors to search for a Fundraiser/team by typing in a Fundraiser's name.

      Fundraiser Login Button—Add this button to enable supporters to log in from the P2P event page rather than just their own fundraising page or wherever else you decide to put the login.

      Goal Tracker—The Goal Tracker provides a graphical display of the progress that is being made toward the goal that you defined in Setup. If you did not enable the Goal Tracker on the Setup tab, you'll still be able to place it on your form, but it will not show up in the published form. Enable this Element on the activity Setup tab by selecting "Yes" for "Will this event have an event-level fundraising goal in addition to fundraiser/team goals?". Then, drag and drop this control into your Event, Fundraiser, and/or Team form so that your supporters can see how things are going.

      HTML—Enter your own HTML code, including <style>, tags if you'd like. You can also wrap text around images. However, images cannot be inserted from the Asset Library into an HTML element. That can only be done from a completely custom HTML Email. In addition, use this element to embed YouTube videos into your form. Click here for directions if you want to embed a YouTube video. This feature does not support scripts.

      Image—Use this element to apply images. It enables you to upload from the Asset Library or your computer. Image element aspect ratios can be locked so you can maintain the image as Portrait or Landscape. To lock an image, click on the Lock icon in the top left corner of the element. When an image aspect ratio is locked, you will be prompted to crop a new image to match, if needed. To unlock the image, click the Lock icon again.
      image_locked.png

      Click here for an overview about adding images to and editing images in Salsa Engage. Click here to view an article on image best practices.

      Leaderboard—Optionally apply a Leaderboard to display on the Event form. It will show Top Teams and Top Fundraisers' names and amounts raised as well as profile pictures.

      Logo—Choose the logo element to paste the organization's logo into a row. To update an existing logo or apply a new one, go to Settings > Switch to > Look and Feel.

        • Justification and size controls.

      Location—Pre-populated with Venue Name, Event Address Line, Event Address Line 2, Event City, Event State, and Event Zip Code Merge Fields. Like the Map element, Location is set during Setup and will automatically populate on Events and Peer to Peer Events pages.

        • Edit—font, style, and justification
        • Preset Merge Fields.

      Map—This element is available only on Events and Peer to Peer Events forms, and it automatically renders based on the location that was entered during the Setup step.

      Multi-step Form—Enables you to create an embedded, multi-step form into which supporters can enter their information. For example, you can have a Fundraising activity that contains three embedded steps: Donation Amount, Your Info, Payment Info. Once you place a Multi-step Form element, you'll see the Step controls, which enable you to toggle between steps and add additional steps. You can add additional fields by dropping Form Field elements into the Multi-field Form element. You can edit the buttons and text of a Multi-step Form just like you would any content in the Visual Editor. Note, the Multi-step Form element and Form element cannot be used at the same time. So, if you drag the Form element onto the page, the Form and Multi-step Form elements will both be grayed out in the Elements picker. This Element contains several, individual, default controls and Form Elements:

      • Header
      • Steps navigation
      • Make donation recurring?
      • Donation amount
      • Increase donation amount to cover fees?
      • Button
      • Header
      • Email Address
      • First Name
      • Last Name
      • Address, line 1
      • Address, line 2
      • City
      • State
      • Zip Code
      • Receive update?
      • Button
      • Payment block

      OrgInfo—If you want to add one or two places where you can insert your organization's contact data. You'll notice these are all merge fields. Remove any you don't want, or click and drag to reorder them to your liking.

        • This element is like a Text Element but it is pre-populated with organization information merge fields.

      P2P Share—Share a link to your personal fundraiser page over social media with this element. Add it to your Event Participant autoresponder so that your event participants will gain access to their own fundraiser page link immediately upon registering.

      Payment Block—This element appears as part of the Form element of the Fundraising activity. It contains the fields into which supporters enter their credit card number, security code, card expiration date, and name on the card. Its location on the form can be changed, but it cannot be otherwise edited.

        • Only the container can be modified.

      Register Button—Choose a prominent location for the register button or include one both above and below the fold. Like standard buttons, you can edit the look and feel. In addition to the Register button, you can also add a donate button.

        • Edit—button alignment, size, style, font, border, corner style, and link to an action, internal page, or external page

      Share—Encourage supporters to spread the word via their social networks.

        • Edit—channel selection, alignment, font, style, justification
        • Choose Channels—Facebook, Twitter, Pinterest, LinkedIn, Tumblr, Email.

      Signatures—Displays the name and comments of form signatories and provides the option to add a call to action as well as the option to allow or disallow comments and moderate comments.

      Spacer—Enables you to place an empty <div> (content division element). You can then modify the width, height, background, etc. on its container.

      Steps Navigation—The graphical timeline that indicates what step the user is at in a Multi-step form. The editor enables you to modify step levels, background color, and text color.

      Targeted Messages—The format in which your Targeted Message will appear. Contains values for the Action Page of your Targeted Action.

      NEW: Team Block—Optionally apply an element to the personal fundraiser page that links the fundraiser to the fundraising team that the fundraiser has joined. If the fundraiser is not part of a team, this element does not display.

      Team_Block.png

      Team Search—Optionally apply a team search button on the P2P Event form which allows visitors to search for a team by typing in a team name.

      Text—Use this element to enter compelling content.

        • Edit font, style, and justification.
          Text_Element_Image_Inserted.png
        • Supports Merge Fields in Email Blasts. 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.
        •  To add merge fields into your email...
          1. Click the Text Element pencil icon.
            Text_Element_Edit.png
          2. Click the person icon to the top right of the window. The Add merge fields window will open.
            Text_Element_Merge_Fields.png
        • Add images in-line with text. To add an image inside the text element...
          1. Click the pencil icon.
            Text_Element_Edit.png
          2. Place your cursor where you want the image to be placed. 
          3. Select the Image icon.
            Text_Element_Image_Icon.png
          4. Select the image to add to the text.
            Text_Element_Insert_Image_Details.png
          5. Set the details on the right side that manage the size of the image, the image alignment, and the horizontal or vertical space around the image as a buffer between the text and the image.
          6. Remember to Save your content.

      Tracker—Enables you to track how many supporters have signed your petition. It features the following options:

        • How many signatures do you need to collect—This is the total number of signatures that you want to collect. The percent complete number is relative to the number you enter here.
        • We'll let you know when you hit certain milestones. How often would you like to be notified of your progress? —This feature works by percentage. For example, if you select 10%, you'll be notified when your petition is 10% complete and every time an additional 10% is completed. (In other words, you be notified when your petition is 10%, 20%, 30%, etc., completed.)
        • How would you like your goal tracker to be displayed on the petition page? —You can choose a horizontal or vertical orientation.

      Web View Link—Enables you to include a link that users can click if to see a Salsa Labs hosted web version of your email. This is useful when supporters' email clients are blocking images in your email.

      • Edit—Text content, font styles and colors.
      Was this article helpful?
      0 out of 0 found this helpful
      Have more questions? Submit a request

      Comments

      0 comments

      Article is closed for comments.