# 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. {% 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: * 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".
* Once the web part is added, it defaults to the following view, with two default icons displayed on the buttons below the image.
* Click the **Edit** properties 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. [Settings](#settings) 4. [Left icon settings](#left-icon-settings) 5. [Right icon settings](#right-icon-settings) ### **View settings** The layout settings allow you to customize the appearance of your application by adjusting various layout settings.
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.

Default view

Mobile view

* **Do you want to hide the webpart on mobile devices?** If you activate this option, Welcome Box won't be displayed on mobile devices. ### **Profile settings** In this section, you can link the user's personal profile to the Welcome Box web part.
* **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
In this section, you can customize the text of the **welcome message**. Three placeholders are supported: * **{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}!
{% 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** In this section, you can customize the left button by choosing a link and an icon.
* Insert the **link** to associate with the **left button**. > For example: * 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** In this section, you can customize the right button by choosing a link and an icon.
* Insert the **link** to associate with the **right button**. > For example: * 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. {% hint style="info" %} **Please note**: the button links can be changed at any time and are visible to all users. {% endhint %} {% embed url="" %}