# Informative Buttons ## **What is** Informative Buttons This web part facilitates the promotion of **corporate initiatives**, showcases **intranet features**, and ensures convenient access to **external websites** through captivating new graphics. You can personalize button icons to offer clues about their content, enticing users to explore further without navigating away from the current page. By hovering the cursor over the graphics, hidden information is unveiled. {% hint style="info" %} Explore the **advantages** of Informative Buttons by [**clicking here**](https://intranet.ai/features/button-with-pop-up-content/) to learn more. {% endhint %} *** ## Add the Informative Buttons 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 **Hover Button** to quickly find and select the Informative Buttons web part, which is named "IAI - Hover button".

* Click the **Edit properties**

button on the left of the web part to open the property pane and set options such as Front button settings, Back button settings, and Colors settings. See below for more information on each of these options. {% hint style="info" %} Please note, the button takes up **the entire size of the SharePoint section**. Therefore, you need to select the section size choosing from the different layouts, and the button size will adapt accordingly, as shown below: {% endhint %}

*** ## Configuration 1. [View settings](#view-settings) 2. [Front button settings](#front-button-settings) 3. [Back button settings](#back-button-settings) 4. [Colors settings](#colors-settings) ### View settings The view settings allows 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. ### Front button settings In this section, you can configure the **icon** and the **title** associated to the button. Buttons are strategically crafted to grab users' attention, enticing them to delve into hidden content. The titles and icons are there to guide them to the information they seek, saving time that would otherwise be spent searching or navigating various pages on the website. {% hint style="info" %} * If you're not in edit mode already, click **Edit** at the top right of the page. * Select the Informative Buttons web part, then click **Edit properties**

button on the left side of the Informative Buttons web part. {% endhint %} This section includes the following fields:

In the first field, copy and paste the **link of the icon** you want to use to illustrate the title. {% hint style="info" %} You need to **upload the icon in advance** to a folder on SharePoint Online, specifically in the Site contents of the intranet, where **all users** have access (see below). {% endhint %} #### How to upload a picture to SharePoint? * Click on the **Settings** icon at the top right of the page, and then on **Site contents**.

* Select the folder where you want to upload your icon (e.g., **Site Assets**) and upload the picture. * Select the image and click on the **Info** icon on the right of the top bar.

* Scroll down the window and **copy the image path** by clicking on the **Path** icon ![](https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FV2aRNLZArcmhfaqmp1m7%2Fimage.png?alt=media\&token=7aec1c93-5a43-485c-b2ec-a6d3a513aa8d).

* Go back to the page with the Informative Buttons web part and insert the path of the icon in the required field.

Below is an example of an icon added to a button:

In the **Title** field, write the title of the button. The title appears to the right of the icon, as shown in the example below:

### Back button settings This section allows you to enrich your button with additional information, enabling users to explore further. {% hint style="info" %} * If you're not in edit mode already, click **Edit** at the top right of the page. * Select the Informative Buttons web part, then click **Edit properties**

button on the left side of the Informative Buttons web part. {% endhint %}

Here you can input the **title** of the back button and a **text** with additional information. Users will be able to read this text by hovering their cursor over the button. See an example below:

For further customization, a **hyperlink** can be added to the back button paragraph. This will encourage users to click the link and explore content. To insert a hyperlink, take the following steps: * First of all, write your text in the **Paragraph** field. * Choose where you want to insert the link (at the beginning, in the middle or at the end of the text) and copy and paste the following code: \" target="\_blank" style="color:red; text-decoration:none">Clicca qui\ {% hint style="info" %} Highlighted in yellow are the sections to be modified according to your preferences. * [https://www.google.it/](https://www.google.it/) = the link you wish to insert in your text. * Red = the color you want to appear in your text. You can change the color by writing the appropriate color in English. * Clicca qui = Call To Action inviting the user to access the link. You can modify the CTA text as you wish. {% endhint %} * Below is an example of custom text with a link using the following code: \Clicca qui\

Alternatively, you can copy and paste an internal or external link into the **Button url** field. Users will simply need to click the button to access the link and explore content. Thanks to the **Open on a new tab** field, you can choose whether to open the link on the same tab or a new tab.

{% hint style="info" %} It is not possible to customize the color of the back button title. {% endhint %} ### Colors settings This section allows you to customize the different button colors. If you want more possibilities with respect to your graphic theme, you can modify the colors of the text and the background both in the front button and in the back button.

* **Do you want to customize colors?** This option allows you to choose and customize the colors of the front button. You can select the background and the text color by using the color picker or by entering a specific hex code.

See an example below with red background and black text:

* **Customize hover colors?** This option allows you to customize hover colors, that is to say the colors of the back button. You can select the background and the text color by using the color picker or by entering a specific hex code.

See an example below with pink background and black text:

When you are done, don't forget to publish your edits by clicking on **Republish** at the top right of the page. {% embed url="" %}