Engagement Element (EE): Designer

1. Go to the CSRconnect Admin Portal. Select Engagements, then select Manage Engagements.

2. Select Create new.

3. Choose Engagement Element Designer, then Select.

When you use the EE Designer, start by choosing a template. This determines the basic layout of EE, including the number, location, and width of columns, images, buttons, links, headers, and more.

• Program overview -This template has a full width header image. Under that, there is a main content area and a right-hand side bar for secondary content.

• Resource page - This template has space for an introduction at the top, then a 3-column layout for content.

• Detailed list - Create a detailed list with custom icons or images.

• Company spotlight - Use this layout to create reports on annual reviews, volunteer events, and company spotlights.

• Single column - This simple layout is a single column for the entire page.

To preview the layout of each template, select the Preview icon. You can then select Use This Template to continue with that template.

Once you have selected a template, select Next to continue.

Enter Details about your EE.

1. Upload a Title image. This appears on this EE's page and under Featured if this EE displays on the home page.

   • Recommended size 1024px x 780px. JPG, PNG, or GIF.

   • Select Adjust Image to preview your images and set a focal point. The focal point is the prioritized area when the image needs to be cropped. Select Save Focal Point, then Close.

2. Enter a Title. Maximum 30 characters.

3. Enter a Call to Action. Maximum 45 characters.

4. To feature the EE on the home page, select Display on home and navigation menu. This setting syncs to the Show On Home setting for this EE in Manage Engagements.

   • If selected, enter a Menu page title for its appearance in the navigation.

5. A URL will be automatically created for the new engagement element.

6. Enter your EE's Active Date Range and select a Time Zone.

   • Start Date & Time and End Date & Time control when your EE can be visible to employees.

   • Select No end date to prevent it from expiring automatically.

7. Select Next.

   To save your changes without publishing the EE, select Save as draft. You can return later to modify it and publish.

1. If this is your first time using the EE Designer, a brief getting started tutorial appears. Review the info, then select Next and Close.

2. The Page Builder will display your selected template.

   To change the layout, such as to add or remove columns, return to Template and select an alternative.

3. Use the Page Builderto manage your content elements.

   • To add a content element, select Content from the Elements menu (bottom right), choose a content element type, then drag and drop it into the layout.

   • To move a content element, select it in the layout, select the Move icon (4 arrows pointing in cardinal directions), then drag and drop it to the desired location.

   • To edit a content element, select it in the layout, select the Edit icon (pencil), and enter the information. Depending on the content element type, you may be prompted to enter and format text, enter a URL, or upload images. Remember to Save each element.

   • To duplicate a content element, select it in the layout, then select the Copy icon (stack of paper). The copy appears directly below the original.

   • To remove a content element, select it in the layout, then select the Delete icon (trash can).

4. To change the colors used in the layout, select Theme from the Elements modal (bottom right). Choose a primary color, a secondary accent color, and a color to indicate clickable hyperlinks. Then select Update. All elements on the page will be affected.

   • To resume using default colors that match the rest of your community, select Reset to community settings. See Community branding .

5. To zoom in or out, select a percentage (bottom right, under Elements).

Tip: If you made a change you regret, select Undo. Want it back? Select Redo.

You can select Save as draft from the Details page and the Page Builder.

1. When you are ready to publish an EE, return to the Page Builder.

2. Select Preview and confirm the content appears as you expect.

   The preview opens in a new tab in your internet browser. Under Mode (lower left) select whether to preview as if a Desktop (landscape) or Mobile (vertical, narrow) user.

3. Select Save and Publish.

   • Your EE will publish and expire automatically based on its start and end date settings. If you want this EE to appear on the home page and in navigation, enable Show On Home for this EE from Manage Engagements.

Use a single image to highlight an activity, employee, event, etc.

1. Upload an image file.

2. Select Next.

3. To prevent the image from being re-sized, enter the Set image height (in pixels). The image's width will automatically scale in proportion to this height.

   To allow the image to be re-sized based on the relative area available, leave this field blank.

4. Enter Image alternative text. Describe the image contents and purpose. This is used for an accessible web design and assists users who are unable to see the image.

5. Determine whether the image should be static or interactive:

   • No link

   • Link to external page - For example, link to an external resource, social media site, news article, or a charity's website. Enter the URL of the page to link to.

   • Link to internal page - Use these to drive users to take action within the community, such as to record their volunteer hours, review or redeem a new incentive program, or explore specific areas of the site. Use the menu to select which page to link to.

   For interactive hyperlinks, select whether the link should Open in a new tab of the user's internet browser.

6. To adjust the image, select Set Focal Point. Then choose the most interesting part of the image to be the new center of the image.

   Select Save focal point to preview the image and to review how the image is cropped or zoomed to fit the set image height.

   • In general, we recommend:

     • Make the focus of the image fall on the line that divides the top middle and top third of the image.

     • Use large groups of people vs a single person.

     • Solid colors, foliage and nature or cityscapes are options that look good at any size.

7. Select Save.

Use buttons to encourage action and to direct users to related content.

1. Determine whether the button should

   • Link to external page - For example, link to an external resource, social media site, news article, or a charity's website.

     Enter the URL of the page to link to.

   • Link to internal page - Use these to drive users to take action within the community, such as to cast a vote, record their volunteer hours, review or redeem a new incentive program, or explore specific areas of the site.

     Use the menu to select which page to link to from the community.

2. Select whether the link should Open in a new tab of the user's internet browser.

3. Enter concise Button text that calls the user to take action. For example:

   • Donate

   • Sign up

   • Submit

   • Visit

   • Volunteer

   • Vote

4. Select a Button style.

5. Choose how to determine the button's width:

   • Fit to text - Buttons expand and contract based on the length of the button text. Buttons will vary in size.

   • Fit to column - All buttons in a column are consistent sizes. If button text is excessively long, the text may not fit as nicely.

6. Select the button and its text alignment within the column.

   • Left justified

   • Centered (recommended)

   • Right justified

7. Select Save.

Use text to tell a story, provide a description, or explain.

1. Enter one or more paragraphs of text.

2. Use the formatting options to customize its appearance. You can include links to related content.

3. Select Preview (the eye icon) to review how the formatting affects the appearance.

4. Select Save.

Use headings as titles or to label subsections of a large EE.

1. Enter phrase or a short sentence.

   Warning: If you enter line breaks, they'll merge into single line.

2. Use the formatting options to customize its appearance. You can include links to related content.

3. Select Preview (the eye icon) to review how the formatting affects the appearance.

4. Select Save.

Use a line to divide content into subsections for improved readability.

Enable users to select which content to show or hide as they read. Use progressive disclosure to encourage users to scan for the basics and to drill in to learn more.

1. Select the down arrow ( V ) next to Item 1.

2. Enter phrase or a short sentence as the Item title. This is visible at all times.

   Readers will expand the accordion to read more about this item.

3. Enter one or more paragraphs of additional details for the Expanded text.

4. Use the formatting options to customize the appearance of the item title and the expanded text.

   You can even include links to related content.

5. At the top of the item, select the up arrow ( ^ ) next to Item 1 to collapse it.

6. Select Add another accordion item. Enter the title and expanded text. Then format the text and collapse it.

7. Add multiple items to the accordion.

8. To remove an item, collapse it. Then on the row with item title, select Delete (trash can icon).

9. Select Save.

Use multiple images to highlight an activity, employees, events, etc.

1. Select a gallery type.

   • Grid - Shows small "thumbnails" of all images simultaneously.

   • Carousel (slideshow)- Shows a single image at a time. Periodically, the carousel automatically "rotates" to show the next image from the gallery. Users can manually pause, fast forward, and reverse.

2. Select whether to show images in a Lightbox.

   When enabled, users can select an image to view a larger version in a centered overlay. The rest of the page is slighted dimmed while the image is selected.

3. To delete an image, select X.

4. For each image, select Set Focal Point. Choose the most interesting part of the image and then select Save Focal Point.

   • In general, we recommend:

     • Make the focus of the image fall on the line that divides the top middle and top third of the image.

     • Use large groups of people vs a single person.

     • Solid colors, foliage and nature or cityscapes are options that look good at any size.

5. Select Save.

Enter a video link to embed it in your EE. Supported video platforms are YouTube and Vidyard. To embed correctly, video links must use the formatting in the examples below.

To embed a YouTube video:

1. Select the Share button for your desired YouTube video.

2. Select Embed.

3. Copy the video link from the provided iframe code. The link must include the word “embed.”

   • Example:https://www.youtube.com/embed/wtyvf3dQ1Fs?si=jo3AMtgFXzzO2iNP

4. Paste the embed link into the Video URL field in the EE Designer.

5. Select Save. Use the Preview button to ensure your video embedded correctly.

6. Select Save and Publish or Save as Draft to save your changes.

To embed a Vidyard video:

1. Select the Share icon for your desired Vidyard video.

2. Select Thumbnail in the Embed dropdown.

3. Copy the video link.

4. Paste your video link in the Video URL field in the EE Designer, then change the end of the link from ".jpg?" to ".html?".

   • Example: https://play.vidyard.com/yYnbEpqijJgShtdGGix7KM.html?

5. Select Save. Use the Preview button to ensure your video embedded correctly.

6. Select Save and Publish or Save as Draft to save your changes.

1. Set the size of your background, if desired.

2. On the Background tab, select either a background image or color to display.

3. On the Text tab, enter your heading and additional text for the content block, and format as appropriate.

4. Optional: On the Image tab, you can select additional images to display for your content block. Upload the image and set the size.

   Note: You can also select Enable rounded border if you would like to round the image. However, the image must have the same width and height if you want to create a circle with the rounded borders.

5. Select Save.

1. Enter a URL for an iFrame element, such as a HTML document or website.

2. Set the width and height for the element, and select Save.

Users who are familiar with code can further customize content by inserting a block of HTML with incline CSS to control the styling.

The EE Designer interface may not immediately render these additions.

We strongly recommend you Preview a saved draft or publish to a hidden page (not in home pages or navigation menus) to confirm the code acts as expected.

Contact your Blackbaud Customer Success Manager (CSM) for details and assistance. Based on our experience with other organizations, we have examples of HTML code to best support common engagement programs.