---
title: Main Widget
slug: technical-docs/main-widget
icon: 🧩
docTags: 
createdAt: 2025-06-30T06:09:41.580Z
---

# Intro

The **Main Widget** is a central component in the IntelliProve widget system that offers users a high-level, personalized overview of their overall health and progress. It includes a wellbeing circle, key biomarker results, recommendations and trend graphs.

It consists of three different tabs, each of which can also be used individually:

::::LinkArray{contentSource="CUSTOM"}
:::LinkArrayItem
### [Results Module](docId\:JVjeaLrqV_1iqHdXG_16H)

![](https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/WXm7BrzCSdseAYc_YPspH_image.png)
:::

:::LinkArrayItem
### [Profile Module](docId\:jlmh_M8ootf4yaJhVO8_K)

![](https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/8DLiP9PnTAq2OrbQznRX1_image.png)
:::

:::LinkArrayItem
### [Trends Module](docId\:PF7jWP_rEV8apUxvhdiDH)

![](https://api.archbee.com/api/optimize/_0R_DnpmBBLLXmaoWvG2u/zejVd9S3BNVc3HAf7NiJW_image.png)
:::
::::

For more information regarding the functionality and features of the widget , refer to the [Main widget ✨](docId\:M37KSm4A8lehZfoxaPt4n) product documentation.

:::Iframe{iframeHeight="0" code="<iframe &#xA;    srcdoc='&#xA;        <html lang=&#x22;en&#x22; class=&#x22;size-full&#x22;>&#xA;            <head>&#xA;                <meta charset=&#x22;UTF-8&#x22; />&#xA;                <meta name=&#x22;viewport&#x22; content=&#x22;width=device-width, initial-scale=1.0&#x22; />&#xA;                <script src=&#x22;https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4&#x22;></script>&#xA;                <script type=&#x22;module&#x22; src=&#x22;https://cdn-dev.intelliprove.com/packages/intelli-widgets/v3/latest.js&#x22;></script>&#xA;                <style>&#xA;                    @import &#x22;tailwindcss&#x22;;&#xA;                    :root { --tw-border-style: solid; }&#xA;                    @layer base { ip-session, ip-session * { all: revert-layer; } }&#xA;                </style>&#xA;            </head>&#xA;            <body>&#xA;                <ip-session action-token=&#x22;demo&#x22; class=&#x22;max-h-[500px]&#x22;>&#xA;                    <ip-main-widget class=&#x22;border-none&#x22;></ip-main-widget>&#xA;                </ip-session>&#xA;            </body>&#xA;        </html>&#xA;    '&#xA;    style=&#x22;width: 100%; height: 500px; border: 1px solid #EAEDF1; border-radius: 16px;&#x22;&#xA;></iframe>"}

:::

# Web component set-up

The main widget is available under the HTML tag `ip-main-widget`. Ensure to nest it somewhere within your `ip-session` , as described in the [Set-up](docId\:ftRgwNTKfclUm0_V_Effj) documentation.

### Properties

|                | **Requirement**                         | **Description**                                                                                                                                                                      |
| -------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `reminder-url` | <font color="#6b7280">*optional*</font> | The URL where users will be referred to if they download a calendar reminder. By default, if no URL is provided, the calendar reminder will be a regular calendar event without URL. |

### Usage

```html
<ip-session 
	action-token="eyJhbG..."
	language="en-GB" 
>
  <!-- IntelliProve components go here -->
  <ip-main-widget reminder-url="https://www.intelliprove.com"></ip-main-widget>
</ip-session>

```

