Skip to main content
CanoeUX home

SharePoint Web Parts Essentials

CNX Champions

Feature your program champions so employees can quickly connect with subject matter experts.

Overview

CNX Champions puts the people behind your programs front and centre. Use it to feature champions, advocates and subject matter experts, so employees know exactly who to ask when they need help or guidance.

It works well on program hubs, onboarding sites and department home pages: anywhere a familiar face makes it easier to take the next step.

CNX Champions web part walkthrough (3:10). Captions are available in the player.

Features

  • Feature the right people. Highlight the champions and subject matter experts for a program, topic or team on any modern page.
  • Make experts easy to reach. Give employees a clear path to the person who can answer their question, instead of a search through the directory.
  • Support adoption programs. Recognize the colleagues who help others adopt new tools and ways of working.

Configuration

Configure CNX Champions in the property pane: with the page in edit mode, select the web part, then select Edit web part (the pencil icon).

CNX Champions settings
SettingWhat it controls
ChampionsThe people to feature on the page.
Program detailsContext that explains what the champions can help with.

Usage

Once the package has been deployed to your tenant, add the CNX Champions web part to a modern SharePoint page.

  1. Step 1: Add the web part

    1. Open the SharePoint page and select Edit.
    2. Hover over the section where you want the web part to appear and select + Add a new web part.
    3. Search for CNX Champions.
    4. Select CNX Champions to add it to the page.
  2. Step 2: Configure the Title section

    Open the property pane and expand Title.

    CNX Champions property pane with the Title section expanded, showing the Show title toggle turned on, the Title text box set to “Meet our Champions”, the Automatic title color toggle and the formatting toolbar.

    Available options

    Show or hide the title

    Turn Show title on or off to suit your page design.

    Title text

    Enter a custom title for the web part.

    Title formatting

    Use the formatting toolbar to customize:

    • Font size
    • Font weight
    • Text colour

    To choose your own text colour, turn off Automatic title color first.

  3. Step 3: Configure the Message section

    Expand Message.

    CNX Champions property pane with the Message section expanded, showing the Introduction templates list and the Edit message button.

    Available options

    Introduction templates

    Choose one of the predefined introductions. Use it as is, or modify it to suit your requirements.

    Edit message

    Select Edit message to modify the selected template or to create a fully customized introduction.

  4. Step 4: Configure the Champions section

    Expand Champions.

    CNX Champions property pane with the Champions section expanded, showing two selected champions, the Small, Medium and Large layouts with Small selected, the Automatic persona text color toggle, the Persona text color picker, and the Margin top and Margin bottom sliders.

    Available options

    Champions

    Select one or more champions whose contact information you want to display.

    Layout

    Choose one of the following layouts for the champion cards:

    • Small
    • Medium
    • Large
    Persona text color

    By default, the colour of the text on the champion cards is selected automatically. To choose your own colour:

    1. Turn off Automatic persona text color.
    2. Select Persona text color.
    3. Choose a custom colour.
    Spacing

    Use Margin top (px) and Margin bottom (px) to add space above and below the champion cards.

  5. Step 5: Configure the Background section

    Expand Background.

    CNX Champions property pane with the Background section expanded, showing the Background color and Border color pickers, the Border width slider, a Border radius of 10 for each corner and the Drop shadow toggle.

    Available options

    Background color

    By default, the background colour is set to None. To configure a custom background:

    1. Select Background color.
    2. Choose a colour.
    3. Select More custom colors.
    4. Set the transparency in the Alpha field, from 0 (fully transparent) to 1 (fully opaque).
    5. Select OK.

    Tip: For a subtle background effect, an Alpha value of 0.3 is recommended.

    A SharePoint page in edit mode with the Custom color dialog open, set to black with an alpha value of 0.4. Behind it, the CNX Champions web part has a semi-transparent dark background over the page's hero image.

    View full-size image (opens in a new tab)

    Border color

    By default, the border colour is set to None. If additional visual separation is required, select Border color and choose a colour, then set the border's thickness with Border width (px).

    Border radius

    Increase the Border radius (px) values to create rounded corners. Each corner has its own value.

    Drop shadow

    Turn on Drop shadow to add depth and visual emphasis. You can customize:

    • Shadow colour
    • Shadow blur
    • Shadow intensity
  6. Step 6: Publish the page

    When you've finished configuring the web part:

    1. Review the web part on the page.
    2. Verify that the selected champions, title, message and styling are displayed correctly.
    3. Select Republish (or Publish) to make the changes available to users.

Examples

  • Microsoft 365 adoption hub

    Feature Teams and SharePoint champions from each department so colleagues know who to ask for help.

  • New employee onboarding

    Introduce onboarding buddies and go-to experts on the site new hires visit first.

Best practices

  • Keep the list short and current, and review it whenever a program's membership changes.
  • Explain what each champion can help with, not just their job title.
  • Place the web part next to related resources so employees can help themselves first.

Release notes

  1. Initial release

    Coming soon

    • First release, included in CanoeUX SharePoint Web Parts Essentials.

Support

Have a question about CNX Champions, or found something that doesn't work as expected? Contact CanoeUX and tell us what you expected to happen and what happened instead. Screenshots help, and for display or access issues, so does the output of CNX User Diagnostics.

Planning a wider intranet? Explore our SharePoint and digital workplace services.

Free of charge

Support CanoeUX

CanoeUX SharePoint Web Parts Essentials is provided free of charge.

If these web parts helped you save time or deliver value to your organization, consider supporting future development.