# Welcome Box

## What is Welcome Box

Welcome Box is a **welcome space to greet users in your SharePoint intranet**, where you can say hello and provide quick access to recommended resources and/or the personal profile. Thanks to this feature, you can encourage personal profile completion and **increase site visits** by offering **helpful content and links** for your colleagues' daily tasks. Additionally, there is a **notification icon** that allows you to view all **items** created or modified during a certain period of time.

{% hint style="info" %}
Explore the **advantages** of Intranet.ai **Welcome Box** by [**clicking here**](https://intranet.ai/features/welcome-box/) to learn more.
{% endhint %}

***

## Add the Welcome Box web part to a SharePoint page

* If your page is not already in edit mode, click **Edit** at the top right of the page.
* Hover your mouse above or below an existing web part and you'll see a line with a circled +, like this: <img src="/files/l5ySSL5qOCO7zmUJPhxZ" alt="" data-size="line">&#x20;
* Click on it and, in the web part search box, enter **Welcome Box** to quickly find and select the Welcome Box web part, which is named "IAI - Welcome Box".

<div align="left"><figure><img src="/files/tGUEjjHa8eU6F3GIgGsR" alt=""><figcaption></figcaption></figure></div>

* Once the web part is added, it defaults to the following view, with two default icons displayed on the buttons below the image.

<div align="left"><figure><img src="/files/NdpHIofHrEfjaLkQ3Y6p" alt=""><figcaption></figcaption></figure></div>

* Click the **Edit** properties <img src="/files/2Pd8WL6hFK96IFtkSfq6" alt="" data-size="line"> button on the left of the web part to open the property pane and set options such as View settimgs, Profile settings, Settings, Left icon settings and Right icon settings. See below for more information on each of these sections.

***

## Configuration

1. [View settings](#view-settings)
2. [Profile settings](#profile-settings)
3. [Data sources](#data-sources)
4. [Settings](#settings)
5. [Left icon settings](#left-icon-settings)
6. [Right icon settings](#right-icon-settings)
7. [Notification icon settings](#notification-icon-settings)

### **View settings**

The layout settings allow you to customize the appearance of your application by adjusting various layout settings.

<div align="left"><figure><img src="/files/QMN3kfVFeRx7LYVHGgjw" alt=""><figcaption></figcaption></figure></div>

By opening this first configuration, you will see the following options:

* **Do you want to hide the background?** You can choose to hide or display the webpart background. The default setting is “No”. This means that, by default, the webpart is characterized by a white background. If you enable this option, the white card background will be completely removed, allowing the content appear directly on the page. As a result, the webpart will be transparent, showing either the selected background image or the chosen SharePoint page color.
* **Do you want to hide the background shadow?** You can choose whether to show or hide the background shadow. The default setting is “No”. This means that, by default, the webpart is characterized by a subtle depth effect that can make the webpart stand out more against the rest of the page. If you enable this option, the shadow behind the background will be removed, giving the web part a flatter, cleaner look without any depth.
* **Select the type of background shadow**: if you decide to set the background shadow, a further configuration will appear and you can select the style from **High Contrast, Light, or Dark** options.
  * If you select **High contrast**, this option creates a strong, bold shadow effect that provides a high level of contrast between the background and the content.
  * By choosing the **Light background shadow**, it will create a soft and subtle effect, giving a more delicate and gentle depth to the background.
  * Finally, the **Dark background shadow** style provides a darker, more intense effect, adding depth and emphasizing the background even more.
* **Enter the title of the application:** thanks to this configuration, you can customize the application title. If you keep it blank, SharePoint will show the default title "Welcome box" at the top left angle of the webpart.
* **Do you want to hide the title?** Here you can select whether to show the webpart title or hide it. If set to visible, the web part title will appear on the left side.
* **Mobile view in 3 columns**: activating this option allows you to adopt the mobile view, which is more compact than the default one.&#x20;

<div align="left"><figure><img src="/files/ADEzmCoqfkcBlb4LuVFV" alt=""><figcaption><p>Default view</p></figcaption></figure> <figure><img src="/files/qZCbup14E695Z9KT1PUI" alt=""><figcaption><p>Mobile view</p></figcaption></figure></div>

* **Do you want to hide the webpart on mobile devices?** If you activate this option, Welcome Box won't be displayed on mobile devices.

### Data sources

The data sources section allow you to configure the data sources related to the **notification icon** and **My Profile** are&#x61;**.**

<div align="left"><figure><img src="/files/3FUYl1GYFygwfjQwLVA8" alt=""><figcaption></figcaption></figure></div>

* Enter the **site URL** where the **last access list** is.
* Choose the **last access list** from the drop-down menu.
* To configure data sources for your notification area, click on **Configure data sources** and complete the panel as follows:

<figure><img src="/files/N4QU4RYa4puTywwHMDHw" alt=""><figcaption></figcaption></figure>

* Enter the **absolute URL** of the site where **the list** you are interested in is located.
* **Enter list URL**: enter the list URL respecting the **/sites/site/Lists/list format**. For **documents**, you can enter just the **document library name**.
* Click to **sort items** by **creation** date (**uncheck**) or **last change** date (**check**).
* Select the **list data type** you want to visualize between **News**, **Documents**, **Events**, **Pages**, **Notice Board** and **Engagement Board**.
* Insert the **URL** where the **notice board page** is only if 'Notice Board' data type was chosen.

<div align="left"><figure><img src="/files/bbROpkNZSFV5vOItKwtM" alt=""><figcaption></figcaption></figure></div>

* insert the site **URL** where the **My Profile** **list** is.
* Choose the  **My Profile** **list** from the drop-down menu.

### **Profile settings**

In this section, you can link the user's personal profile to the Welcome Box web part.

<div align="left"><figure><img src="/files/M0QZbssbdIVpH9y1siGa" alt=""><figcaption></figcaption></figure></div>

* **Insert user link:** here you can input the link to the [**My Profile**](https://intranet.ai/features/my-profile/) page (if available). If you fill in this field, you'll be able to access the above-mentioned section by clicking on the profile picture.
* **Select where to open the page:** you can choose to open the link on a new page or the current page.

{% hint style="info" %}
**Please note**: it is not mandatory to fill in these fields.
{% endhint %}

### Settings

<div align="left"><figure><img src="/files/0Kk3Yo3WQAwT7qQ3NivQ" alt=""><figcaption></figcaption></figure></div>

In this section, you can customize the text of the **welcome message**. Three placeholders are supported:&#x20;

* **{givenName}**: the web part replaces this placeholder with the user's name;
* **{surname}**: the web part replaces this placeholder with the user's surname;
* **{welcomeText}**: the web part replaces this placeholder with a localized text which changes according to the current time:\
  \- From 6 AM to 1PM: "Good morning"\
  \- From 1PM to 6PM: "Good afternoon"\
  \- From 6PM to 6AM: "Good evening"

> For example: {welcomeText}, {givenName} {surname}!

<div align="left"><figure><img src="/files/BIP5nlGbYRRtKhE0dVGT" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
The placeholder {welcomeText} starts with an uppercase letter if it is placed at the beginning of the text or after a period; otherwise, it is all lowercase.
{% endhint %}

You can choose whether to include all placeholders or select just one or two. If you leave this field blank, Welcome Box will only show the user's name and surname, which is the default behaviour of the web part.

### **Left icon settings**&#x20;

In this section, you can customize the left button by choosing a link and an icon.

<div align="left"><figure><img src="/files/d5XP1cKOhPwGipAXJgYx" alt=""><figcaption></figcaption></figure></div>

* Insert the **link** to associate with the **left button**.&#x20;

> For example: <https://intranetai.sharepoint.com/sites/iai-demo-saas/SitePages/SystemPages/MyProfile.aspx>

* Type the name of the **icon**. You can find the list of the available icons[ here](https://developer.microsoft.com/en-us/fluentui#/styles/web/icons).

> For example: People

* You can also choose whether to open the link on a new page or the current page.

### **Right icon settings**&#x20;

In this section, you can customize the right button by choosing a link and an icon.

<div align="left"><figure><img src="/files/d3ZReEz4PkSR4jemgTuv" alt=""><figcaption></figcaption></figure></div>

* Insert the **link** to associate with the **right button**.&#x20;

> For example: <https://intranetai.sharepoint.com/sites/iai-demo-saas/SitePages/SystemPages/People-directory.aspx>

* Insert the **icon**. You can find the list of the available icons[ here](https://developer.microsoft.com/en-us/fluentui#/styles/web/icons).

> For example: Phone

* You can also choose whether to open the link on a new page or the current page.

### Notification icon settings

In this section you can define the settings related to the notification area.

<div align="left"><figure><img src="/files/O99i2Ly2fw7rIzQrR4Du" alt=""><figcaption></figcaption></figure></div>

* **Show notification icon**: if you enable this option, the **notification icon** will be **displayed**.
* **Show content X days before last login**: you can choose the number of **days** before **your last login** to the intranet in which the **contents** were published. The content will be displayed in the first tab of the notification area.
* **Show content in the last X days**: you can choose the **number of days** within which the **content is published**. The content will be displayed in the second tab of the notification area.
* **Open link in a new tab**:  if you enable this option, the link to the content will open in a new tab, otherwise it will open on the current page.
* **Hide untranslated news**: on translated pages, by default the web part also shows news that hasn't been translated. This option allows you to display only the news articles that have been translated into the language of the page. If you disable this option, untranslated news will also be visible, appearing in their original language if a translation is not available
* **Filter news by audience**: if you enable this option, news will be filtered by audience.

{% hint style="info" %}
This On/Off command will allow you to have the news filtered by audience: if you put a specific Security AD Group in Audience property of the news, this will be proposed to the users inside that specific group. If you leave this property blank, the news will be visible for everybody. If you want to discover more about SharePoint audience feature, [click here](https://support.microsoft.com/en-au/office/target-content-to-a-specific-audience-on-a-sharepoint-site-68113d1b-be99-4d4c-a61c-73b087f48a81).
{% endhint %}

* **Hide the first tab**: if you enable this option, the first tab won't be displayed.
* You can **enter the title** of the **first tab**.
* You can **enter the title** of the **second tab**.

<div align="left"><figure><img src="/files/uAGEKB4YfR93MLBbekx6" alt=""><figcaption></figcaption></figure></div>

* **Show the author**: by enabling this property, the authors of the contents will be displayed.
* **Show the date**: by enabling this property, content dates will be shown.

{% hint style="info" %}
**Please note**: the button links can be changed at any time and are visible to all users.
{% endhint %}

{% embed url="<https://intranet.ai/>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.intranet.ai/sharepoint-intranet/components/welcome-box.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.