Skip to content
  • There are no suggestions because the search field is empty.

How to Use the People Picker Web Part

Easily search and display colleagues on your intranet page

The People Picker web part helps you highlight specific colleagues on any intranet page. Whether you want to showcase team members, display contacts for a project, or spotlight a department, this tool makes it easy to personalize your page with dynamic user profiles.

▶️ Follow the interactive tutorial below to configure your People Picker component.

What You’ll Learn

  • How to add and configure the People Picker

  • How to search and select users

  • How to personalize each user’s display

  • How to enable social/contact features

  • How to apply custom styling via CSS

Overview

The People Picker connects directly to your Microsoft 365 directory, allowing you to search and display profiles of individuals within your organization. It’s fully integrated with Involv’s intranet experience—providing rich, clickable profile data.

Key Features

  • 🔍 Search and select multiple users from your organization

  • ✏️ Add custom text (e.g., role or notes) per user

  • 🔄 Drag and drop to reorder users

  • 🟢 Show presence status (available/busy)

  • 🔗 Add direct links to Involv profile pages

  • 💬 Enable social buttons for quick contact (email, Teams)

  • 🎨 Apply custom CSS for branding and layout

How to create the web part

  • Add the web part
    Click the “+” icon on your chosen page and select People Picker. 

How to add a Web Part


Now follow this interactive tutorial to setup your PeoplePicker web part

  • Configure the web part

    • Click Edit properties to open settings

    • Click the user search field to add users to your list

    • Search for and select as many users as you want

    • Optionally add custom text for each user (e.g., role or notes)

    • Rearrange users by dragging and dropping them


  • Enhance your display

    • Enable presence status to show user availability

    • Enable social buttons to display contact options

    • Enable the Involv profile link to make each user’s name clickable, redirecting to their full profile

  • Style your People Picker

    • Assign CSS classes in the Class Name field for custom styling

    • Use the Involv Script Editor web part to add custom CSS (e.g., background colors, fonts)

  • Save and publish
    Once configured, save your changes and publish the page to make the People Picker visible to all users.

 

Step by step screen shots.

1. Start tutorial

1

2. Start by clicking "Edit properties"

2

3. To add users to the People Picker list click the text field

3

4. Video Step

(Play Now)

4

5. Search and select as many users as you want.

5

6. Video Step

(Play Now)

6

7. You can add extra custom text for every user

7

8. Video Step

(Play Now)

8

9. Video Step

(Play Now)

9

10. Chang position of your list by dragging and dropping

10

11. Video Step

(Play Now)

11

12. Enable social buttons

12

13. Enable Involv profile can also be enabled

13

14. It automatically adds a link to the profile page of this user.

14

15. All contact details are available here.

15

16. Enjoyed the guided demo?

16

 

 

 

 

 

 

People Picker properties

Title

Class Name

Give a class to the People Picker item. So you can style your People picker.

I add 1 class per people picker. 

With the Involv Script editor web part I add 2 classes and give these a background color. This can be any css styling.

as a result we have this on our page.

 

Enable presence

enables the visualisation of the user being available or not.

 

Enable Social buttons

Enables the different contact options.

Enable Involv profile link

Enables the link to the profile page. This makes the button clickable and redirects to this page: