How do I customize the design of the Impact Support Center?

Admins can manage the Support Center design using the default theme, a custom theme, or their Canvas theme.

Note: When creating a customized button, there are two separate contexts, one for the default support button and one for the customized button you created. The customized button you created has a different template/context. If you expect a message to show up that is attached to the context of the default button, it will not show up because a new context is now available that isn't connected to that message.

Connect to Canvas Instance

Connect to Canvas Instance

Connect to your Canvas Instance through the Impact dashboard, click the Instance Configuration button [1]. Then click the Switch Instance link [2].

Then search and/or select the instance name.

Open Support

Open Support

In Global Navigation, click the Support link.

Open Design

Open Design

In the Support page, click the Customization dropdown menu [1]. Then click the Design, Routing & Availability button [2].

Select a Support Center to Edit

Select a Support Center to Edit

In the Support Center drop-down menu, select the Support Center you need to edit if you have more than one active support center.

Open Themes

Open Themes

To manage your theme, click the Expand icon [1].

To view the Support Center in the default theme, click the Default option [2].

To use your Canvas theme for the Support Center, click the Canvas Theme option [3].

To create a custom theme, click the Custom Theme option [4].

Note: If Canvas Theme and Custom Theme are not present, please submit a ticket to support-impact@instructure.com to request customization.

Manage Custom Theme

Manage Custom Theme

In your theme design, you can use the following custom fields:

  • Header Background [1]: A background color for the header.
  • Header font color [2]: A color for the header text.
  • Top button [3]: A color of the buttons in the header.
  • Main area background [4]: A background color for the main area.
  • Main area font color [5]: A color for the main area text.
  • Links [6]: A color for links.
  • Content area background [7]: A background color for the content area.
  • Contact area font color [8]: A color for the contact area text.
  • Contact buttons [9]: A color for the contact buttons.
  • Footer background [10]: A background color for the footer.
  • Footer font color [11]: A color for the footer text.

Then click the Save changes button [12].

Note: To see a style guide of what the button will look like with different designs, visit the Impact Support Center Button Style Guide.

Manage Custom Button

Custom Design Default

Custom Design Toggle

By default, the Custom design toggle is disabled to not interfere with existing custom set ups. If you choose to turn on custom design, it will override the existing custom set up and you will be able to create a new one.

Note: If you turn on custom design, you will always be able to go back to the previous design by switching the Custom design toggle.

Custom Button Design

Custom Button Design

In your button design, you can use the following custom fields:

  • Size [1]: Display size small or big.
  • Display type [2]: Display floating or sidebar button.
  • Alignment [3]: Display alignment left side, center, or right side.
  • Position [4]: Display position top, center, or bottom.
  • Button corners [5]: Change button corners appearance.
  • Colors [6]: A primary color and background color for the button
  • Button text [7]: Text when hovering over the button.
  • Icon [8]: Display button with or without icon.
  • Icon Positioning [9]: Position the icon on the left or right side of the text when hovering.
  • Behaviour [10]: Create a static or draggable button.
  • Drag controls positioning [11]: Draggable button controls display on the left or right side.
  • Expandability [12]: Expandability displays for the button.

Then click the Save changes button [13].

Preview Support Center Button

Preview Support Center Button

As you design your Support Center Button, you can preview the button settings, icon, and behavior you have selected to display.

Notes:

  • The preview of the default button style shown above may not be accurate if you have previously worked with the Impact team to customize your support button style. Switching to 'Custom Design' will override any previous support button styling that may have been implemented.
  • If you are using Blackboard Ultra or Ultra Courses then these button styles will not apply.

Refresh Canvas Instance

Go into your Canvas Instance and refresh to see the new changes in effect.

Note: Customizations might take more time than usual to load in your environment.