WYSIWYG Editor Manual The Salvation Army Southern Territorial Headquarters 2015 InterChange University
Table of Contents 4: WYSIWYG Editor... 2 What is the WYSIWYG Editor?... 3 WYSIWYG is used in many LO Modules... 4 WYSIWYG Buttons... 5 First Row Toolbar... 5 Second Row Toolbar... 6 Third Row Toolbar... 7 Creating a Table... 8 Editing a Table... 9 Table Row Properties... 9 Table Cell Properties... 10 Merge Table Cells... 10 Split Merged Table Cells... 10 Inserting/Editing an Image... 11 The Image Library... 12 Inserting/Editing Hyperlinks... 13 Create a LO Hyperlink... 13 Create a hyperlink to an external URL... 15 Edit a Hyperlink... 17 Embedding Components... 18 Creating Personalization... 20 Setting up Conditionals... 23 Basic Conditionals... 23 Group Conditionals... 26 Previewing Conditionals... 28 HTML and Plain Text... 29 Job Aids... 31 2015 InterChange University 1
4: WYSIWYG Editor Overview: In this course, you will learn how to use the WYSIWYG Editor so that you can create, edit and manage HTML content in various modules in Luminate Online. Assumptions: -You have taken the prerequisite classes. -You are familiar with Microsoft Programs and the HTML editing features in these programs. -You have access to the Luminate Online Application. Lesson Objectives: After completion of this course, you will be able to: Explain what the WYSIWYG Editor is and how it s used in different modules in LO. Understand all of the buttons of the WYSIWYG Editor and their respective functions. Create and edit tables within the editor. Manage images within the editor and within the Image Library. Create and edit hyperlinks to both internal and external content. Connect hyperlinks to interests. Embed components into your content. Set up personalization options. Define conditionalization options and create both basic and group conditionals. Preview your content before publication. Access the HTML and Plain Text functions. *Some of the images used in this manual are taken from the Blackbaud University curriculum. 2015 InterChange University 2
What is the WYSIWYG Editor? -WYSIWYG stands for What You See Is What You Get, meaning that what you create and edit within the content box is what the content will look like to your recipients. -The WYSIWYG Editor is pictured above. It is the HTML content editor that is used throughout Luminate Online. -The WYSIWYG Editor is used to format text and to add and edit tables, images and links to text. It is also used to personalize and conditionalize content. -With the WYSIWYG Editor, one does not need to know HTML coding to create and edit information because the HTML codes are inputted automatically on the back-end when you click on the respective icons. For example, if you wanted to make a text bold, you could do this via HTML by typing in: <b>this text is bold</b>. But let s say that you didn t know HTML. You could, instead, just click the bold button in the WYSIWYG Editor and this would bold your highlighted text. So the WYSIWYG editor makes it easier for users to add and modify content, without requiring knowledge of HTML. Supported Browsers The WYSIWYG Editor is not fully supported on all browsers/versions of browsers. Concurrently, the Admin side and the Constituent side of LO vary in regards to supported browsers. If your WYSIWYG Editor does not look like what s pictured above, or does not contain the functionality described in this manual, check blackbaud.com for more information on LO s supported browsers. (Generally, Chrome, Internet Explorer and Firefox are supported.) 2015 InterChange University 3
WYSIWYG is used in many LO Modules The WYSIWYG Editor is used throughout Luminate Online, in many different modules. Wherever HTML content needs to be created, edited or managed, you will find this editor. Therefore, learning its functions will assist you with building the content you need to build in Luminate Online. Word vs. Notepad Many times, you may want to take content that you ve already typed into a Microsoft Word document and place it into different modules in LO. MS Word documents have additional HTML coding on their back ends, which means that if you copy and paste a MS Word document into a WYSIWYG Editor, you ll get a bunch of code/symbols in your content. So, a best practice is to copy and paste content from Word into Notepad (or another plain text program) and save it. Then you can transfer it over to the WYSSIWYG Editor by copying and pasting it from this program. 2015 InterChange University 4
WYSIWYG Buttons WYSIWYG Editor LO 1 2 3 The WYSIWYG Editor has three rows. The first and second rows contain icons that should be familiar to you if you use Windows applications. The third row contains icons that are relevant to creating, personalizing, and conditionalizing content in Luminate Online; therefore, this manual will focus solely on how to use these buttons of the WYSIWYG Editor. A list of each of these icons and an explanation of what they do is provided below. First Row Toolbar 2015 InterChange University 5
Second Row Toolbar WYSIWYG Editor LO 2015 InterChange University 6
Third Row Toolbar WYSIWYG Editor LO Tool Icon Name Function Image Icon Used to specify the URL of an image file and its properties, and insert the URL into your content. Also opens the Image Library where you can select available images to load into your content or add and upload an image to the library. Create Link Icon Used to create a hyperlink. Break hyperlink This breaks or undoes any hyperlink that has been previously created. Anchor Icon Used to enable you to place a marker into your content (A hyperlink that takes you to another place within the same content screen) Components Icon Used to add content from other LO modules (i.e.: Email, Donations, etc.) into your content. Personalization Icon Conditionalization Icon Edit Conditional Icon Used to customize the content displayed to a specific viewer (such as addressing someone by first name) Used to display selected content to users based on their status relative to a given group or feature (ie: Information shown may differ from a donor to that which is shown to a non-donor) Used to modify a pre-created conditional Toggle Conditional Icon Insert Custom Character Icon Insert Table Icon Table Row Properties Icon Table Cell Properties Icon Merge Table Cell Icon Split Table Cells Icon Insert Table Row Above Insert Table Row Below Used to switch between values in a conditional (i.e.: To switch from one tab to another in a conditional box) Used to insert symbols such as Greek letters, currency and extend characters Used to insert a table into your content. Displays the Table properties box which allows you to create a table. Used to set the alignment and other properties of a created table. Used to set the alignment of cells within a created table. Used to merge selected cells within a table. Used to divide a selected cell into another row or column. Used to insert a new row above the current or selected row. Used to insert a new row below the current or selected row. 2015 InterChange University 7
Insert Table Column Before Icon Insert Table Column After Icon Delete Table Row Icon Delete Table Column Icon Used to insert a column before the current or selected column. Used to insert a new column to the right of the current or selected column. Used to delete the selected table rows. Used to delete the selected columns. As you can see, the buttons in the third row of the WYSIWYG editor contain functions that allow you to create and modify tables, insert images, manage the images that are in your Image Library, and create and manage hyperlinks. Icons in this third row of the WYSIWYG editor also allow you to embed content from Luminate Online modules into your content for purposes of personalization and customization. Let s take a look at each function in more detail so that you know how to use this part of the editor when creating and editing your content in Luminate Online. Creating a Table To create a table using the WYSIWYG editor, complete the following: 1. Click the Insert Table Icon. The Insert/Modify Table box will appear. Notice that there are two tabs here: General and Advanced. Here is where you can set up your table by choosing how many columns and rows you d like it to have. You can also set up its size, alignment and create a border for your table. You can choose a color for your border or the background of your table. Once you ve set up all of your specifications, click Insert. 2015 InterChange University 8
Editing a Table WYSIWYG Editor LO Once you create a table, you ll notice the table editing functions light up on the WYSIWYG toolbar. Each of these icons corresponds to a different editing feature for your table. (For an overview of each icon and what it does, see the table on pages 7-8). Let s take a look at the most commonlyused editing icons. Table Row Properties The Table Row Properties Icon opens up a box that also has both a General and an Advanced tab. Under these tabs, you can choose from various ways to modify the rows within your table. For example, you can set alignment, height and even the background color of rows in your tables. Pay special attention to the drop-down menu at the lower left-hand corner of this box. From this dropdown, you choose which row you d like to modify. Click Update to save the changes to your row(s). 2015 InterChange University 9
Table Cell Properties WYSIWYG Editor LO The Table Cell Properties Icon opens up a box that contains options for modifying the cells (or the blocks) within your table. This box also contains General and Advanced tabs and contains a dropdown menu that allows you to choose which cells you d like to modify. Merge Table Cells If there are cells within your table that need to be merged together, you can do this by clicking on the Merge Table Cells Icon. A box will appear asking you which columns and rows you d like to merge. When you re done entering the required information, click Update. Split Merged Table Cells The Split Table Cells Icon is designed to be used when you need to split a cell into another row or column. As of this writing, this button was not functioning. 2015 InterChange University 10
Inserting/Editing an Image b a c d e 1. To insert an image, first click on the Image Icon. The Insert/Edit Image box will appear. From this box, you can: a. Type in an Image URL (if you have one) b. Browse the Image Library and choose an image that lives in the library (see Image Library for more information) c. Set up the image s alignment d. Set the size of your image e. Place some extra space around your image (i.e.: padding) 2. Click Insert when you re ready to place the image into your content. 2015 InterChange University 11
3. To edit an image, first click on the image you d like to edit. Then click the Image Icon button. The box pictured above will appear and you can make changes as needed. Clicking the Update button will save your changes. The Image Library Images in the library Most of the time, you will want to either choose an image that is in the Image Library or upload an image to this library to use in your content. When you click on the Browse Image Library button, the box pictured above will appear. From here, you can choose an image that already exists in the library, or you can add an image to the library by clicking on Add New Image. 2015 InterChange University 12
Inserting/Editing Hyperlinks In Luminate Online, you can create hyperlinks that link to other areas in Luminate Online (i.e.: a donation form or a survey). You can also create hyperlinks that link to external URLs (i.e.: another website). The cool thing about the hyperlinks you create in LO is that you can tie Interests to the links. This means that when a user clicks on a certain hyperlink, the associated interest will then be placed on his/her constituent record. Here is how you go about creating hyperlinks in your content with the WYSIWYG Editor: Create an LO Hyperlink 1. First, highlight the text that you d like to change into a hyperlink. Then click on the Insert Hyperlink icon. 2. The Insert Link box will then appear. Click Browse Links to find the part of LO to which you need this text to link. 2015 InterChange University 13
3. The Insert Link box will then appear. From here, you can pick which part of Luminate Online you d like to connect your hyperlink to. Notice that there are four columns in this box: Link Type (which are categories that house relevant information), Name (which show you the names of each piece of information in that particular link type), ID number and Description. Click on the Name of the LO part you d like to connect. a b 4. Now you ll see additional options appear. From this box, you can: a. Choose which page to connect the hyperlink to (if applicable) b. Connect this hyperlink to an Interest. *Make sure, if you re connecting a hyperlink to an Interest, that you check the automatic log-in box. 2015 InterChange University 14
5. Click Select (at the bottom of the screen) once you ve set these link options up. 6. Now you ll see that your text has become a real hyperlink! Because you ve created a hyperlink, you will now see the Break Hyperlink icon light up. Clicking this button will undo your hyperlink. Create a hyperlink to an external URL 1. First, highlight the text that you d like to change into a hyperlink. Then click on the Insert Hyperlink icon. 2015 InterChange University 15
2. The Insert Link box will appear. Type the external URL address into the Link URL field. Then click Insert. 3. Now you ll see that your text has become a real hyperlink! Because you ve created a hyperlink, you will now see the Break Hyperlink icon light up. Clicking this button will undo your hyperlink. 2015 InterChange University 16
Edit a Hyperlink This editing process is the same for both internal and external URL s. WYSIWYG Editor LO 1. To edit a previously-established hyperlink, highlight the hyperlinked text. Click the Insert Hyperlink icon. 2. The Insert Link box will open up. From this box, you can enter another link URL. External URLs Interests In Luminate Online, you can use internal hyperlinks only to populate an Interest onto a constituent s record. External hyperlinks cannot populate Interests onto constituent records. Therefore, when you choose to connect text in a WYSIWYG box to an external hyperlink, you will not see the Additional options appear, as you would when creating an internal hyperlink. 2015 InterChange University 17
Embedding Components In Luminate Online, Components are the content that is contained in LO modules. Surveys, PageBuilder pages and Social Sharing buttons are examples of Components. To embed a Component, complete the following steps: 1. Place your cursor in the WYSIWYG Editor where you d like to place a Component. Then, click the Components icon. Available Components Some Components are only available from the WYSIWYG Editor in email; others are only available when using WYSIWYG in a webpage. Certain Components have several additional configuration options that are not shown in this manual. 2015 InterChange University 18
2. The Insert Component box will then appear. From this box, you must first choose the category of Component (from the Component Type column) to display the Components within. Then you can click on the Component you want from the Component column. 3. If the Component needs further configuration, the Configure Component box will appear. When you ve selected the Component s criteria and are ready to insert it into your content, click Insert. 2015 InterChange University 19
4. You will now see your component appear in the WYSIWYG Editor box. Creating Personalization Personalization is the process of making something a constituent receives from you (like an Email message) personalized. Some examples of personalization include addressing an enewsletter to a constituent using the constituent s first name, acknowledging the amount of a recent donation, or reminding the constituent of an event for which they ve registered. Personalization Back-Ups If you create something that includes a personalization option (such as including a constituent s first name in an Email message) and LO does not have that information in its database, you will be given the option to set a back-up option for the missing field (For example, Friend. ) That way, you can avoid awkward empty spaces in your content if LO doesn t have that particular piece of information in its database. 2015 InterChange University 20
1. To add personalization to your content, put your cursor in the place where you d like personalized information to go. Then click the Personalization icon. 2. The Insert Personalization box will then appear. From the Groups column, you can choose the category of personalization options which will then appear in the Type column. A best practice is to also fill out the field, Text to display when empty to avoid a blank space in your content if LO doesn t have that particular piece of information. Click the type of personalization you need, then click Insert. 2015 InterChange University 21
3. You will now see your content with the personalization you ve created. If you have a lot of personalizations within your content, the details of the personalization boxes can be distracting. To view these personalizations in their simple format, click the Toggle button. 4. The personalizations will now appear in their most basic form. To see them in detailed form, just click the Toggle button again. Personalization uses info in Constituent360 Whatever information is in Constituent360 is what will be displayed when you personalize content. So, for example, if a constituent used only lowercase letters when creating their constituent record and that s the data in Constituent360, a name with all lowercase letters will appear in their content if you use name personalization. 2015 InterChange University 22
Setting up Conditionals Conditionalization is the process of varying the content that a constituent sees. Conditionalization is created from conditionals. Conditionals are created based on constituents Interests on their profiles and the groups to which they belong in Luminate Online. An example of conditionalization is displaying one message to constituents who ve donated a small amount to The Salvation Army and displaying a different message to constituents who ve donated a larger amount. Basic Conditionals 1. To set up a basic conditional, click on the Conditionals icon. 2015 InterChange University 23
2. A box will appear entitled, Insert Conditional. You will choose your specific, pre-defined conditionals from their respective groups. For example, when you click on the Group Donations you will see two options: donor and not a donor. Choosing this conditional will allow you to vary content that donors and non-donors see. Click on the conditional you need for your content. 3. You will then see a conditional box appear in your content. (We ll continue to use the example of donor vs. not a donor.) Notice that once you establish a conditional, you will see the other conditional buttons on the WYSIWYG Editor light up. Also notice that your conditional box has several tabs. 2015 InterChange University 24
4. In the conditional box, you can create and vary the content you d like your constituents to see by creating different content under the corresponding tabs. Use the Edit conditionals/toggle through conditionals buttons to set up content for each tab. Notice in the pictures above, we ve established three different conditionals: We ve thanked our Donors for their gifts, asked non-donors for gifts and, if the donation status of a constituent is unknown, asked them if they ve heard about the work our organization has done this past year. 5. To preview the varying content your recipients will see, click the Preview button. (More information can be found about this process in the Previewing section of this manual.) 2015 InterChange University 25
Group Conditionals WYSIWYG Editor LO 1. To set up a group conditional (meaning you will vary the content that constituents in different groups see), click on the Conditionals icon. 2. When the Insert Conditional box appears, choose Groups from the Group column and then click In group or Not in group. 3. You will now see that you have the option to configure the conditional. Find the group you re looking for and click Select (Do not click on the group name.) 2015 InterChange University 26
4. Once you see your group s name populated in the Selected Group field, click Insert. 5. Now, you will see a Group conditionals box in your WYSIWYG Editor box. You can vary the content by toggling through the different tabs and creating different content under each tab. Use the Edit conditionals/toggle through conditionals buttons to set up content for each tab. 6. To preview the varying content your recipients will see, click the Preview button. 2015 InterChange University 27
7. 8. Reminder Box Remember to always preview your work before you send it out to your constituents! Previewing Conditionals Once you ve set up conditionals, you will be able to preview the varying content that different constituents will see. 1. When you click on the Preview button, you will then be able to choose from which perspective to view your content. As you can see from the picture above, you can view your content from the perspective of individual constituents or from defined groups. 2015 InterChange University 28
Personalization vs. Conditionalization 2. Personalization is the process by which you personalize content to a constituent, such as adding his/her name to an Email message. Conditionalization is the process by which you vary the content a constituent sees, based on his/her defined Interests and group membership. Personalization is actually a type of conditionalization. HTML and Plain Text Some people like to create/edit content by coding it in HTML or plain text rather than using the WYSIWYG Editor. To do this, complete the following steps: 1. To view content in HTML code, just click the HTML button on the WYSIWYG Editor. 2. You can code, paste in and edit HTML in the HTML Source Editor box. Click Update to save your changes. 2015 InterChange University 29
1. To use the Plain Text Editor, just click the Use Plain Text Editor hyperlink in the top right-hand corner of the WYSIWYG Editor. 2. You can modify and edit content in the Plain Text Editor just like you can in the WYSIWYG Editor. You can also Preview your content here before you publish it. 2015 InterChange University 30
Job Aids How to Create a Table WYSIWYG Editor LO 1. Click the Insert Table Icon. 2. The Insert/Modify Table box will appear. Notice that there are two tabs here: General and Advanced. Toggle between these two tabs to set up different aspects of your table. 3. Once you ve set up all of your specifications, click Insert. How to Edit a Table 1. Once you create a table, you ll notice the table editing functions light up on the WYSIWYG toolbar 2. To edit Table Row Properties or Table Cell Properties, click on the respective icon. 3. These tables have both General and Advanced tabs. Toggle between the tabs to edit different aspects of your table. 4. Click Update when you re finished. How to Merge Table Cells 1. Click on the Merge Table Cells icon. 2. A box will then appear asking you which columns and rows you d like to merge. 3. When you ve entered in the required information, click Update. How to Insert an Image 1. To insert an image, first click on the Image Icon. The Insert/Edit Image box will appear. From this box, you can: a. Type in an Image URL (if you have one) b. Browse the Image Library and choose an image from the library (see Image Library for more information) c. Set up the Image s alignment d. Set the size of your Image e. Place some extra space around your image (i.e.: padding) 2. Click Insert when you re ready to place the image into your content. 2015 InterChange University 31
How to Edit an Image 1. To edit an image, first click on the image you d like to edit. Then click the Image Icon button. 2. The Configure Image box will appear and you can make changes as needed. 3. Clicking the Update button will save your changes. How to Create an LO Hyperlink 1. First, highlight the text that you d like to change into a hyperlink. Then click on the Insert Hyperlink icon. 2. The Insert Link box will then appear. Click Browse Links to find the part of LO which you need this text to link to. 3. The Choose Link box will then appear. From here, you can pick which Luminate Online part you d like to connect your hyperlink to. Notice that there are four columns in this box: Link Type (which are categories that house relevant information), Name (which show you the names of each piece of information in that particular category), ID number, and Description. Click on the Name of the LO part you d like to connect. 4. Now you ll see additional options appear. From this box, you can: a. Choose which page to connect the hyperlink to (if applicable) b. Connect this hyperlink to an Interest 5. Click Select (at the bottom of the screen) once you ve set up these link options. 6. Now you ll see that your text has become a real hyperlink! Because you ve created a hyperlink, you will now see the Break Hyperlink icon light up. Clicking this will undo your hyperlink. How to create a hyperlink to an external URL 1. First, highlight the text that you d like to change into a hyperlink. Then click on the Insert Hyperlink icon. 2. The Insert Link box will appear. Type the external URL address into the Link URL field. Then click Insert. 3. Now you ll see that your text has become a real hyperlink! Because you ve created a hyperlink, you will now see the Break Hyperlink icon light up. Clicking this will undo your hyperlink. 2015 InterChange University 32
How to edit a Hyperlink 1. To edit a previously-established hyperlink, highlight the hyperlinked text. Click the Insert Hyperlink icon. 2. The Insert Link box will open up. From this box, you can enter another URL link. How to embed Components 1. Place your cursor in the WYSIWYG Editor where you d like to place a component. Then, click the Components Icon. 2. The Insert Component box will then appear. From this box, you must first choose the category of Component (From the Component Type column) to display the Components within. Then you can click on the Component you want from the Component column. 3. If the Component needs further configuration, the Configure Component box will appear. When you ve selected the Component s criteria and are ready to insert it into your content, click Insert. 4. You will now see your Component appear in the WYSIWYG Editor box. How to add Personalization 1. To add personalization to your content, put your cursor in the place where you d like personalized information to go. Then click the Personalization icon. 2. The Insert Personalization box will then appear. From the Groups column, you can choose the category of personalization options which will then appear in the Type column. A best practice is to also fill out the field, Text to display when empty to avoid a blank space in your content if LO doesn t have that particular piece of information. Click the type of personalization you need, then click Insert. 3. You will now see your content with the personalization you ve created. If you have a lot of personalizations within your content, the details of the personalization boxes can be distracting. To view these personalizations in their simple format, click the Toggle button. The personalizations will now appear in their most basic form. To see them in detailed form, just click the Toggle button again. 2015 InterChange University 33
How to set up Basic Conditionals 1. To set up a Basic Conditional, click on the Conditionals icon. 2. A box will appear entitled, Insert Conditional. You will choose your specific, predefined conditionals from their respective groups. Click on the conditional you d like for your content. 3. You will then see a conditional box appear in your content. Notice that once you establish a conditional, the other conditional buttons on the WYSIWYG Editor light up. Also notice that your conditional box has several tabs. 4. In the conditional box, you can create and vary the content you d like your constituents to see by creating different content under the corresponding tabs. Use the Edit conditionals button to set up content for each tab. To preview the varying content your recipients will see, click the Preview button. How to set up Group Conditionals 1. To set up a group conditional (meaning you will vary the content that constituents in different groups see), click on the Conditionals icon. 2. When the Insert conditional box appears, choose Groups from the Group column and then click In group or Not in group. 3. You will now see that you have the option to configure the conditional. Find the group you re looking for and click Select (Do not click on the group name). 4. Once you see your group s name populated in the Selected Group field, click Insert. 5. Now you will see a Group conditionals box in your WYSIWYG Editor box. You can vary the content by clicking on the appropriate tabs within the Group conditionals box and creating different content under each tab. Use the Edit conditionals button to set up content for each tab. 6. To preview the varying content your recipients will see, click the Preview button. How to Preview Conditionals 1. Once you click on the preview button, you will be able to choose which constituent view to preview. 2. Close the Preview window to return to the WYSIWYG Editor if you need to edit content. 2015 InterChange University 34
View HTML/Plain Text 1. To view content in HTML code, just click the HTML button on the WYSIWYG Editor. 2. You can code and edit HTML in the HTML Source Editor box. Click Update to save your changes. 3. To use the Plain Text Editor, just click the Use Plain Text Editor in the top right-hand corner of the WYSIWYG Editor. 4. You can modify and edit content in the Plain Text Editor just like you can in the WYSIWYG Editor. You can also Preview your content here before you publish it. 2015 InterChange University 35