External Resource Applet

The External Resource Applet is a standalone applet that displays external web content (e.g. clinical guidelines, tools, or reference sites) inside a card with an iframe. Configure a title and a valid URL; the content is loaded in an iframe and the applet shows an "External Resource" badge in the header.

Configuration Overview

The External Resource Applet is configured via the Config API using the ExternalResourceAppletConfig interface. It requires a title and an optional url (must be a valid URI with http or https protocol when provided).

Properties Overview

Property	Type	Required	Description
title	string	Yes	Display title shown in the card header
url	string	No	Valid URI (e.g. https://example.com) to load in the iframe. Omitted or invalid shows empty state

Property Details

title

Type: string (required)

The label shown in the applet card header. Used as the iframe’s title for accessibility.

url

Type: string (optional)

The address of the external resource to display. Must be a valid URI with a protocol (e.g. https://example.com). If missing, empty, or invalid, the applet shows the empty state: "No URL configured for this applet."

export interface ExternalResourceAppletConfig {
  title: string;
  url?: string;
}

Applet States

State	When it appears	UI behavior
Empty	No url or invalid URI (e.g. http/asd)	Centered message: "No URL configured for this applet."
Loading	Valid url set; iframe not yet loaded	Full-area overlay with loading spinner and "Loading…"
Content	Valid url and iframe has loaded	Iframe fills the card content area; loading overlay hides on load

A loading timeout (e.g. 20 seconds) ensures the loading state is cleared even if the iframe never fires load.

Usage Example

config: {
    title: 'Clinical Guidelines',
    url: 'https://example.com/guidelines',
}

For Storybook examples (With URL, Empty state, Loading state), see Mona OS → Applets → External Resource.