---
title: iframe
slug: dev-playground
docTags: 
createdAt: 2026-04-01T11:47:09.615Z
---

# Health Dashboard

:::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;                    body { margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; }&#xA;                </style>&#xA;            </head>&#xA;            <body>&#xA;                <ip-session action-token=&#x22;demo&#x22; class=&#x22;max-h-[800px]&#x22;>&#xA;                    <ip-dashboard></ip-dashboard>&#xA;                </ip-session>&#xA;            </body>&#xA;        </html>&#xA;    '&#xA;    style=&#x22;width: 100%; height: 800px; border: 1px solid #D2D6DA; border-radius: 12px;&#x22;&#xA;></iframe>"}

:::

# Widgets

## Main Widget

:::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>"}

:::

### Modules

:::::Tabs
::::Tab{title="Results Module"}
:::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;                    body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }&#xA;                </style>&#xA;            </head>&#xA;            <body>&#xA;                <ip-session action-token=&#x22;demo&#x22;>&#xA;                    <ip-results-module class=&#x22;max-h-[500px]&#x22;></ip-results-module>&#xA;                </ip-session>&#xA;            </body>&#xA;        </html>&#xA;    '&#xA;    style=&#x22;width: 100%; height: 500px;&#x22;&#xA;></iframe>"}

:::
::::

::::Tab{title="Profile Module"}
:::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;                    body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }&#xA;                </style>&#xA;            </head>&#xA;            <body>&#xA;                <ip-session action-token=&#x22;demo&#x22;>&#xA;                    <ip-profile-module class=&#x22;max-h-[500px]&#x22;></ip-profile-module>&#xA;                </ip-session>&#xA;            </body>&#xA;        </html>&#xA;    '&#xA;    style=&#x22;width: 100%; height: 500px;&#x22;&#xA;></iframe>"}

:::
::::

::::Tab{title="Trends Module"}
:::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;                    body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }&#xA;                </style>&#xA;            </head>&#xA;            <body>&#xA;                <ip-session action-token=&#x22;demo&#x22;>&#xA;                    <ip-trends-module></ip-trends-module>&#xA;                </ip-session>&#xA;            </body>&#xA;        </html>&#xA;    '&#xA;    style=&#x22;width: 100%; height: 580px;&#x22;&#xA;></iframe>"}

:::
::::
:::::



## Metric Widget

:::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;                    body { margin: 0; display: flex; justify-content: center; align-items: center; }&#xA;                </style>&#xA;            </head>&#xA;            <body>&#xA;                <ip-session action-token=&#x22;demo&#x22;>&#xA;                    <ip-metric-widget class=&#x22;max-w-[320px] mx-auto&#x22;></ip-metric-widget>&#xA;                </ip-session>&#xA;            </body>&#xA;        </html>&#xA;    '&#xA;    style=&#x22;width: 100%; height: 350px;&#x22;&#xA;></iframe>"}

:::

### Modules

:::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-metrics-module class=&#x22;p-5&#x22;></ip-metrics-module>&#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>"}

:::

## Recommendations Widget

:::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;                    body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }&#xA;                </style>&#xA;            </head>&#xA;            <body>&#xA;                <ip-session action-token=&#x22;demo&#x22;>&#xA;                    <ip-recommendations-widget></ip-recommendations-widget>&#xA;                </ip-session>&#xA;            </body>&#xA;        </html>&#xA;    '&#xA;    style=&#x22;width: 100%; height: 600px;&#x22;&#xA;></iframe>"}

:::



## To-dos Widget

:::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;                    body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }&#xA;                </style>&#xA;            </head>&#xA;            <body>&#xA;                <ip-session action-token=&#x22;demo&#x22;>&#xA;                    <ip-todos-widget></ip-todos-widget>&#xA;                </ip-session>&#xA;            </body>&#xA;        </html>&#xA;    '&#xA;    style=&#x22;width: 100%; height: 400px;&#x22;&#xA;></iframe>"}

:::



# Other

## Biomarker

:::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;                    body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }&#xA;                </style>&#xA;            </head>&#xA;            <body>&#xA;                <ip-session class=&#x22;flex&#x22; action-token=&#x22;demo&#x22;>&#xA;                    <ip-biomarker></ip-biomarker>&#xA;                </ip-session>&#xA;            </body>&#xA;        </html>&#xA;    '&#xA;    style=&#x22;width: 100%; height: 120px;&#x22;&#xA;></iframe>"}

:::



## Trends Chart

:::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;                    body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }&#xA;                </style>&#xA;            </head>&#xA;            <body>&#xA;                <ip-session action-token=&#x22;demo&#x22;>&#xA;                    <ip-trends-chart></ip-trends-chart>&#xA;                </ip-session>&#xA;            </body>&#xA;        </html>&#xA;    '&#xA;    style=&#x22;width: 100%; height: 480px;&#x22;&#xA;></iframe>"}

:::



## Health Profiles Chart

:::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;                    body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }&#xA;                </style>&#xA;            </head>&#xA;            <body>&#xA;                <ip-session action-token=&#x22;demo&#x22;>&#xA;                    <ip-health-profiles-chart class=&#x22;max-w-[400px] mx-auto&#x22;></ip-health-profiles-chart>&#xA;                </ip-session>&#xA;            </body>&#xA;        </html>&#xA;    '&#xA;    style=&#x22;width: 100%; height: 400px;&#x22;&#xA;></iframe>"}

:::



## Card

### Example 1

:::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;                    body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }&#xA;                </style>&#xA;            </head>&#xA;            <body>&#xA;                <ip-session action-token=&#x22;demo&#x22;>&#xA;                    <ip-card class=&#x22;h-[750px] overflow-scroll&#x22;>&#xA;                      <img class=&#x22;h-40 w-full object-cover&#x22; src=&#x22;https://test.health-dev.intelliprove.com/_next/static/media/background-call-to-action.0t~kwen6g9_i~.jpg&#x22; alt=&#x22;&#x22; />&#xA;                    &#xA;                      <div class=&#x22;px-8 py-2&#x22;>&#xA;                        <h1>Your sleep</h1>&#xA;                        <ip-trends-chart type=&#x22;sleep-quality&#x22;></ip-trends-chart>&#xA;                      </div>         &#xA;                      </ip-card>&#xA;                </ip-session>&#xA;            </body>&#xA;        </html>&#xA;    '&#xA;    style=&#x22;width: 100%; height: 750px;&#x22;&#xA;></iframe>"}

:::

### Example 2

:::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;                    body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }&#xA;                </style>&#xA;            </head>&#xA;            <body>&#xA;                <ip-session action-token=&#x22;demo&#x22;>&#xA;                    <ip-card class=&#x22;px-8 py-2&#x22;>&#xA;                      <h1 class=&#x22;text-center&#x22;>Your results</h1>&#xA;                       <ip-wellbeing-circle class=&#x22;max-w-[400px] mx-auto&#x22;></ip-wellbeing-circle>&#xA;                    </ip-card>&#xA;                </ip-session>&#xA;            </body>&#xA;        </html>&#xA;    '&#xA;    style=&#x22;width: 100%; height: 500px;&#x22;&#xA;></iframe>"}

:::

