Institution Branding

An exciting part of implementing ConexED is making the instance yours by adding your institution’s logo. Your students, faculty, staff, and guests will appreciate the seamless look and feel as they navigate between your website and ConexED. Seeing your branded login page and user interface will reinforce their sense of safety as ConexED is made an integrated extension of your institution’s online space.

Most of the branding for your instance will be completed by your Institution’s Implementation Manager, but knowing where and how the logo files are used and knowing the HTML required for customizing the email header will help you to ensure that the most up-to-date logos are being used and enable you to further enhance the student experience.

Login Page Branding

Each institution’s ConexED login page is branded with the institution’s logo and banner image. On the login page, the institution’s logo appears on the left-side SSO button, and the banner logo appears above the login options as shown in Figure 1.

The login button uses a square logo image that will be resized to 180×180 px., and the banner logo uses a rectangle image that will be resized to 470×180 px.

Also shown in Figure 1 is an example of custom text that may be added below the login buttons.

At this time, the ConexED Implementation Manager completes the login page branding and custom text, but the IT Professional may be asked to provide the correct logos.

Figure 1

Login Button Logo and Banner

ConexED User Interface (UI)

The same banner logo that appears full size (470 x 180 px.) on the login page will be rendered in a smaller size in the header of the user interface as illustrated in Figure 2. This icon is added to the system by the ConexED Implementation Manager.

Figure 2

Banner Logo in Header of User Interface

District Branding

In a district-wide implementation, each institution will share the same login page that displays the district logo. The district logo will also appear in the header of the user interface for each institution. However, each institution does still have its own instance with a Student Support Directory, Admin Control Center, and Group Settings. Users and students access their institution’s instance via the district’s institutions menu as shown in Figure 3. Each institution on this drop-down menu can have its own logo.

Figure 3

District Menu With Institution Icons

The image files for the institution icons are located on the Institutions tab of the Admin User Panel as depicted in Figure 4.

Figure 4

Institutions Tab on Admin User Panel

On the Institutions page, follow these steps as illustrated in Figure 5:

1. Click the pencil icon of the desired institution.
2. Choose file to upload the icon.
3. Click “Save.”

Figure 5

Add Institution Icon to District Menu

District Student Support Directory Header

On the district page, you may want to add instructions in the header of the Student Support Directory that directs users to the drop down menu. As the example shows in Figure 6, these instructions would appear underneath the district name.

The example instructions say “Welcome to Peralta Community College District Landing Page. To view the services offered through ConexED at any of our four colleges, please select the college from the drop down menu at the top left side of this page next to the bell icon.”

The instructions include a screenshot that illustrates the drop down menu.

Figure 6

Instructions on User Interface for Selecting an Institution from the District Menu

To add messaging like this to your district’s landing page in ConexED, follow these steps:

1. Open the Institutions tab on the Admin User Panel, locate the district on the list of institutions, and click the pencil icon.
2. In the field labeled Institution Header (shown on Student Support Directory), use HTML to add the instructions you want students to follow.
3. Click Save.

Figure 7 illustrates these steps. To copy the code to use as a template, click here: Custom Institution Header.

Figure 7

Create a Custom HTML Header for the District Institution

Additional Instructions for Students and Users

Once a user selects their institution, they can set it to be the default institution that opens when they log in to ConexED. This is accomplished by opening the Profile Settings, selecting the Account Settings tab, and following these directions as shown in Figure 9:

1. Click Change Default Institution.
2. Select Institution from Drop Down Menu.
3. Click Change Default Institution button to save.

Figure 9

How to Set a Default Institution

Quick Check

Custom Meeting Reminder Header

The default ConexED Meeting Reminder email template displays the institution’s logo in the email header. Figure 10 illustrates an example of a Meeting Reminder email with an example of an institution’s logo on the left side of the header.

Figure 10

Example Email Reminder in ConexED

Meeting Reminder Email

The Meeting Reminder Email includes the following elements:

1. Header with the institution’s logo, the ConexED logo, and the words “Meeting Reminder.”
2. Body text with user and meeting data displayed using short codes. The Email body is customized in the Group Settings on the Email Templates tab. Each group can customize their own email body.
3. Footer with the user’s Account Information including their User ID/Login Email, a Forgot Password link, and the ConexED logo, copyright, address, and social media icons.

Customizing the Meeting Reminder Header

It is possible to customize the Email Header. ConexED does not support editing the email footer as the footer provides user account information and the ConexED copyright. Only customize the header if it benefits the student experience and you are competent with HTML. The following directions serve as an example. To restore the default header at anytime, delete the custom HTML and update the settings.

Access the form for Customizing the Meeting Reminder Header on the Settings tab of the Admin User Panel as illustrated in Figure 11 and navigate to the form field labeled Custom Email Header HTML as shown in Figure 12.

Figure 11

Settings Tab

Figure 12

Custom Email Header Html Form Field on Admin User Panel

One possibility for customizing your ConexED instance’s email header is to remove the ConexED logo and center your institution’s logo. Adding custom HTML to the form field will override the default header HTML, so adding the words Meeting Reminder to your custom header would also be a best practice.

Figure 13 illustrates a custom header with a centered school logo and the words Meeting Reminder beneath it. The ConexED logo has been removed from the header, and the ConexED University logo, representing an institution’s logo, has been added.

The code for this customization is provided next to the image. The header is created with a table in HTML.To copy this table HTML, click here: Custom Email Header Code.

Figure 13

Sample Custom Header and HTML Code

To use the provided code, replace the <a href/a> snippet that pulls the sample logo with the <a href/a> snippet for your institution’s logo. This will require that your logo has a URL. To create an image URL, upload your logo PNG file to a cloud service such as Google Drive, which is what we are using in our example, and set it to be viewable by anyone with the link.

Next, retrieve the image ID by opening the image in a web browser window. The ID is the string of characters in the address bar highlighted in Figure 14.

Figure 14

Google Drive Image ID

Next, replace the XXX in the code below with the image ID.

Finally, replace the the <a href/a> image snippet in the header HTML code with your Google Image <a href /a> snippet. Now update the settings.

To test your email header, open the user interface, navigate to any group, and send yourself an Email Preview as illustrated in Figure 15.

Figure 15

Send Email Preview: Group Settings > Email Templates

Institution Branding Quiz

You need to be registered and logged in to take this quiz. Log in or Register