The My mails web part shows each visitor the latest emails in their own inbox. Visitors spot their unread emails at a glance and open the one they want in Outlook with one click.

This article describes the web part's use cases, how to get started, its settings, what your visitors see and the best practices to follow.

📋 Contents

1. About the web part
2. Add the web part to your page
3. Configure the web part
4. What your visitors see
5. Enter and format the title on the page
6. Best practices
7. What changes from the previous version

1. About the web part

Each visitor sees their own emails, never someone else's. The web part has two parts:

• a header: the web part's title and two buttons, New mail to write an email and Open Outlook to go to the whole inbox;
• a card per email: the sender's photo, their name, the date and time received, the subject, a preview of the text and a paperclip if the email has an attachment.

⚠ Prerequisite: the web part reads emails with the Microsoft 365 permission Mail.Read, which an administrator must have approved. Until it is, the web part can't show any email.

📌 For more details, see the article Permission approval.

Use cases

• Make the intranet home page a single entry point, without opening Outlook.
• Build a personal dashboard, next to the calendar and tasks.
• Point out unread emails to employees who rarely open Outlook.

2. Add the web part to your page

1. Open the SharePoint page in edit mode by clicking Edit at the top right.
2. Where you want the web part, click the "+" button to open the web part catalog.
3. Search or scroll the catalog to select Jint - My mails, in the "Text, media, and content" category.
4. The web part is added where you want it, with its default values.

A newly inserted web part shows the title "My emails", both buttons and every card element.

3. Configure the web part

The configuration panel has three tabs: Design, Content and Visibility. Each setting applies immediately on the page.

3.1 Design tab

Web part height

Setting	Values	Default
Web part height	Small (150 px), Medium (250 px), Custom	Medium
Height (px)	from 150 to 800 px, in steps of 10	250 px

Height (px) appears when you choose Custom.

💡 The height sets how many cards are visible at once: the web part shows as many whole cards as the height holds, and puts the next ones on other pages.

Background

Setting	Values	Default
Background	Color, Image	Color
Background color	a palette color or a custom code	White
Choose an image	a SharePoint image	a default image
Mark as decorative	on or off	On
Alternative text	a text	empty
Focal point	a point of the image	the center

• Color: the web part's background takes the chosen color. The title and texts without a color of their own placed on this background automatically switch to black or white, whichever contrasts best.
• Image: the web part's background shows the chosen image, cropped around its Focal point. Alternative text appears when the image isn't marked as decorative.

The cards keep their own background, set in the Appearance section.

Appearance

The Appearance section sets the border, shadow and corner radius of the web part and its cards, as well as the cards' colors.

By default, the web part follows your site's Jint theme: the section shows "Appearance values come from the theme. The theme is set in Jint Portal." and its settings are disabled. Click Customize to change them. To go back to the theme, click Reset from theme.

First choose what you are setting: Web part for the web part's frame, Cards for the email cards. Each has its own border, shadow and corner radius.

Setting	Values	Default
Border	on or off, then Subtle, Medium, Marked or a custom width from 1 to 10 px, and a Border color	Off
Shadow	on or off, then Light, Medium or Strong	On, Medium
Corner radius	on or off, then Soft, Medium, Marked or a Custom radius from 0 to 50 px	On, Medium
Background (cards)	a palette color or a custom code	White
Text color (cards)	a palette color or a custom code	Black

3.2 Content tab

Title

Setting	Values	Default
Show title	on or off	On

The title is entered and formatted directly on the page (see part 5).

Accessibility

The Accessibility section measures the contrast between the cards' text and the cards' background. You have nothing to select: it measures as soon as the panel opens, and measures again after each change.

It shows the name of the measured text, Card, its contrast Ratio and its Overall readability:

• Excellent: the contrast reaches the AAA level.
• Good: the contrast reaches the AA level.
• Insufficient: the contrast doesn't reach the AA level.

When the section shows Insufficient, click Fix: each text color below the AA level is replaced by the closest palette color that reaches it.

As long as no card is shown, the section shows "No card to check for now."

Emails

Setting	Values	Default
Unread only	on or off	Off

Turn on Unread only to show only emails that haven't been opened yet. An email the visitor reads disappears from the web part at the next reload.

Displayed elements

Each switch shows or hides an optional element of the cards or the header.

Setting	What it shows	Default
Sender photo	the sender's Microsoft 365 profile photo, left of their name	On
Date and time received	the date and time received, at the top right of the card	On
Email preview	one line of the email's text, below the subject	On
Attachment indicator	a paperclip when the email has an attachment	On
"New mail" button	the button to write an email, in the header	On
"Open Outlook" button	the button to open the inbox, in the header	On

The sender and subject always stay visible. If you turn off all six switches, the section reminds you: "Everything is turned off: only the sender and subject remain."

3.3 Visibility tab

Audience

Turn on Custom audience to restrict the web part to people or to members of Microsoft 365 groups. Only the chosen visitors, or members of at least one chosen group, see it. For everyone else, it takes up no space on the page.

Display

Turn on Schedule visibility to limit the display in time, with a Display start, a Display end, or both. Each date appears when you turn its switch on: the start is set to the present moment, the end to 7 days later.

Setting	Values	Default
Custom audience	on or off, then people and groups	Off
Schedule visibility	on or off	Off
Display start	on or off, then a date and a time	Off
Display end	on or off, then a date and a time	Off

⚠ If you turn on Custom audience without choosing anyone, no one sees the web part anymore. The section warns you: "No one can see this web part: choose at least one person or group."

⚠ If the display end comes before the start, the panel shows "The end date must be later than the start date." and the schedule doesn't limit the display until you fix it.

💡 In edit mode, you always see the web part, whatever its audience or schedule. A badge tells you so: "Audience", or the display dates.

4. What your visitors see

The emails

• The web part shows the emails in the visitor's inbox, from newest to oldest, 25 at most.
• The cards stack in a single column. When they don't all fit in the web part's height, arrows and dots let visitors move from one page to the next. On mobile, visitors can also swipe the cards.
• An unread email stands out with a dot in your SharePoint site's main color, and with the sender's name and subject in bold.
• The sender's name, the subject and the preview each fit on one line. When hovering the card, the full subject shows in a tooltip.
• The date and time are written in the short format of the visitor's language.
• A sender without a photo shows with their initials. A sender without a name shows with their email address.
• An email without a subject shows "(No subject)".

Open an email or Outlook

• Clicking a card opens the email in Outlook, in a new tab.
• New mail opens a new email in Outlook, in a new tab.
• Open Outlook opens the inbox in Outlook, in a new tab.

💡 When the visitor comes back to the page's tab, the web part reloads their emails: an email read in Outlook in the meantime no longer shows as unread.

⚠ In edit mode, the cards and buttons don't respond to clicks. This is normal: they work once the page is published.

When there is nothing to show

• An empty inbox shows "No emails in the inbox."
• With Unread only, if there is no unread email: "No unread emails."
• If the web part can't read the emails, the visitor sees "The content can't be shown right now." In edit mode, you also see the cause. If the Mail.Read permission isn't approved yet: "Access to your emails isn't authorized yet. Ask your administrator to approve it."

5. Enter and format the title on the page

The title is entered directly on the page, not in the configuration panel. Click the title: it becomes editable and a toolbar shows above it. Click outside the title and the toolbar to confirm.

Text	Default formatting
Web part title	H4, black, 20 px, bold

The toolbar sets the Text style (H1 to H4 or Body), the Font, the Font size, the Text color, bold, italic, underline and alignment. The Reset formatting button restores the original style.

• As long as the title is empty, it shows "Enter a title" in edit mode, and your visitors don't see it.
• 💡 As long as the web part follows the Jint theme, the title's toolbar shows the theme banner instead. Click Customize to format the title.
• If you hide the title and both buttons, the header disappears: the cards start at the top of the web part.

6. Best practices

Get the permission approved before adding the web part

Check with your administrator that the Mail.Read permission is approved. Otherwise, your visitors will see an error message instead of their emails.

Set the height to the space available

On a busy home page, keep Medium: two cards are enough to point out new emails. On a personal dashboard, choose Custom to show four or five.

Turn on "Unread only" for a home page

The web part becomes a to-do box: it only shows what is waiting to be read, and empties once everything is read.

Lighten the cards in a narrow column

In a one-third column, hide the Email preview or the Date and time received: the sender and subject stay readable.

7. What changes from the previous version

If you used the previous version of the web part (see the article My Emails web part):

• The web part is now called Jint - My mails in the catalog, in the "Text, media, and content" category.
• New: Unread only shows only emails not yet opened.
• New: the Displayed elements section hides the photo, the date, the preview, the paperclip or either of the header's two buttons.
• The height is set with Small, Medium or a custom height. Emails that don't fit move to the next pages.
• New: the Appearance section, linked to the Jint theme, sets the web part's frame and its cards separately.
• New: the Accessibility section checks the contrast of the cards' text and fixes it in one click.
• The panel has three tabs, Design, Content and Visibility. The Visibility tab lets you restrict the web part to an audience and schedule its display.