Appearance
Noa Notes Widget
A lightweight library for embedding the Noa Notes widget in web applications. This library provides a simple way to integrate Noa Notes functionality into any web application.
Overview
The widget-launcher library handles the initialization and mounting of the Noa Notes widget within web applications. It provides a clean API for widget integration and handles all the necessary setup and error cases.
Installation
The library is available exclusively via CDN:
- UMD Version
- ES Module Version
CDN urls
The UMD library is available under the following CDNs:
The ES Module is available under the following CDNs:
Usage
Basic Setup
javascript
<script src="https://notes-widget.{country}.noa.ai/v1/index.umd.js"></script>
<script>
window.NoaNotesWidgetLauncher.noaWidgetLauncher({
sessionToken: 'your-session-token',
sessionId: 'your-session-id',
consumerId: 'your-consumer-id',
expiresIn: 3600, // session expiration in seconds
recorderUrl: 'https://your-recorder-url.com',
summaryUrl: 'https://your-session-summary-url.com',
locale: 'es-ES', // or any other supported language
containerSelector: '#widget-container' // optional
onStatusChange: (status) => { // optional
// Handle a new session status here
},
onRestartAfterFailure: () => { // optional
// Create a new session and reinitialize the widget
}
});
</script>TypeScript Integration
To use the widget launcher with TypeScript, you can create a type definition file (e.g., noa-widget.d.ts):
javascript
declare module 'https://notes-widget.{country}.noa.ai/v1/index.mjs' {
type SupportedAppLanguage =
| 'cs-CZ' // Czech
| 'de-DE' // German
| 'en-US' // English
| 'es-AR' // Spanish (Argentina)
| 'es-CL' // Spanish (Chile)
| 'es-CO' // Spanish (Colombia)
| 'es-ES' // Spanish (Spain)
| 'es-MX' // Spanish (Mexico)
| 'es-PE' // Spanish (Peru)
| 'it-IT' // Italian
| 'pl-PL' // Polish
| 'pt-BR' // Portuguese (Brazil)
| 'pt-PT' // Portuguese (Portugal)
| 'tr-TR'; // Turkish
type SessionStatus =
| 'New', // Session created, recording not yet started
| 'Recording', // Noa Notes has been started to make the recording
| 'Recorded', // Recording ended
| 'Transcribing', // Converting audio to text
| 'Transcribed', // Conversion from audio to text completed
| 'Analyzing', // Processing text
| 'Summarized', // Recording summary has been prepared
| 'Verified', // Doctor has reviewed and approved the summary
| 'EmptySummaryVerified', // The transcript does not contain enough medical information to create a summary, auto-verified by the system
| 'Interrupted' // Connection to the recording has been lost
| 'Failed', // An error occurred during summarization
| 'Expired' // Session expired without being used
interface NoaNotesIntegrationsConfig {
sessionToken: string;
sessionId: string;
consumerId: string;
expiresIn: number;
recorderUrl: string | null;
summaryUrl: string;
containerSelector?: string;
locale: SupportedAppLanguage;
disableAnalytics?: boolean;
onStatusChange?: (status: SessionStatus) => void;
onRestartAfterFailure?: () => void;
}
export function noaWidgetLauncher(config: NoaNotesIntegrationsConfig): void;
}Then you can use it in your TypeScript code:
javascript
const loadNoaWidget = async () => {
const { noaWidgetLauncher } = await import(
"https://notes-widget.{country}.noa.ai/v1/index.mjs"
);
// The widget code will only be loaded when noaWidgetLauncher is called
noaWidgetLauncher({
// ... config
});
};
loadNoaWidget();API Reference
Configuration Options
| Option | Type | Required | Description |
|---|---|---|---|
sessionToken | string | Yes | Authentication token for the session |
sessionId | string | Yes | Unique identifier for the session |
consumerId | string | Yes | Identifier for the consumer |
expiresIn | number | Yes | Session expiration time in seconds |
recorderUrl | string or null | Yes | URL of the NOA Notes recorder service. null is only allowed for already active sessions |
summaryUrl | string | Yes | URL of the NOA Notes summary page for the recording |
containerSelector | string | No | CSS selector for the container element |
locale | SupportedAppLanguage | Yes | Language code for the widget |
onStatusChange | function | No | Event handler to track session status changes |
onRestartAfterFailure | function | No | Event handler to start a new session when the current session fails |
disableAnalytics | boolean | No | Disables analytics in the widget |
Supported Locales
| Locale | Language | Region |
|---|---|---|
cs-CZ | Czech | Czech Republic |
de-DE | German | Germany |
en-US | English | United States |
es-AR | Spanish | Argentina |
es-CL | Spanish | Chile |
es-CO | Spanish | Colombia |
es-ES | Spanish | Spain |
es-MX | Spanish | Mexico |
es-PE | Spanish | Peru |
it-IT | Italian | Italy |
pl-PL | Polish | Poland |
pt-BR | Portuguese | Brazil |
pt-PT | Portuguese | Portugal |
tr-TR | Turkish | Turkey |
Error Handling
NoaIntegrationInvalidWidgetContainerError
Thrown when:
- The specified container selector doesn't exist in the DOM
- The container element is not an instance of HTMLElement
javascript
try {
noaWidgetLauncher({
// ... config
});
} catch (error) {
if (error instanceof NOANotes.NoaIntegrationInvalidWidgetContainerError) {
// Handle container-related errors
console.error("Container error:", error.message);
}
}NoaIntegrationInvalidWidgetConfigurationError
Thrown when configuration passed to the widget contains invalid properties.
javascript
try {
noaWidgetLauncher({
// ... config
locale: true <-- wrong value type
});
} catch (error) {
if (error instanceof NOANotes.NoaIntegrationInvalidWidgetContainerError) {
// Handle container-related errors
console.error('Container error:', error.message);
}
}
Container Behavior
- If no
containerSelectoris provided, the library will automatically create adivelement and append it to the document body
- If a
containerSelectoris provided, the library will look for the element in the DOM and use it as the container
- The container must be a valid
HTMLElement
Styling
The widget is built with a base font size of 16px and uses CSS custom properties (variables) for consistent theming. You can customize the widget's appearance by overriding these variables in your application.
Base Font Size
The widget uses a base font size of 16px (--noa-base-rem: 16). All font sizes are calculated relative to this base size using rem units.
Custom Properties
Colors
css
:root {
/* Button colors */
--noa-widget-button-background: #007C68;
--noa-widget-button-background-hover: #006a59;
--noa-widget-button-background-outline: #025b4c;
--noa-widget-button-foreground: #F2FCF8;
/* Text colors */
--noa-widget-description-color: #565f5f;
--noa-widget-title-color: #242727;
/* Border colors */
--noa-color-border-accent: #00a085;
}Typography
css
:root {
/* Font sizes */
--noa-font-size-body: 0.875rem; /* 14px */
--noa-font-size-section-heading: 1rem; /* 16px */
--noa-font-size-display-heading: 1.5rem; /* 24px */
--noa-font-size-sub-section-heading: 0.875rem; /* 14px */
--noa-font-size-caption: 0.75rem; /* 12px */
/* Line heights */
--noa-line-height-body: 1.5;
--noa-line-height-heading: 1.25;
--noa-line-height-condensed: 1.15;
/* Font weights */
--noa-font-weight-body: 450;
--noa-font-weight-heading: 600;
--noa-font-weight-emphasis: 550;
}Spacing and Layout
css
:root {
/* Border radius */
--noa-border-radius-m: 0.5rem; /* 8px */
/* Box shadows */
--noa-box-shadow-emphasis: inset 0px -1px 0px 0px rgba(0, 0, 0, 0.08),
0px 1px 1.5px -1px rgba(0, 0, 0, 0.04),
0px 1px 3px 0px rgba(0, 0, 0, 0.02);
}Customization Example
To customize the widget's appearance, override the CSS variables in your application's CSS.
css
/* Your application's CSS */
.noa-widget-container {
/* Override button colors */
--noa-widget-button-background: #your-color;
--noa-widget-button-background-hover: #your-hover-color;
/* Override typography */
--noa-font-size-body: 1rem;
--noa-font-weight-body: 400;
}Lazy Loading Considerations
The widget launcher implements lazy loading for optimal performance, but this feature is only available when using the ES Module version. The UMD version cannot support lazy loading due to technical limitations:
- UMD Bundle Size: The UMD version includes all dependencies in a single bundle, which must be loaded upfront. This means the entire widget code is loaded immediately, even if the widget isn't used right away.
- Dynamic Imports: The widget uses dynamic imports (`import()` statements) for lazy loading its components. While this is supported in ES Modules, UMD doesn't support dynamic imports in a way that maintains the lazy loading benefits.
- Module Resolution: UMD bundles all code into a single file and uses a global variable (
window.NoaNotesWidgetLauncher), making it impossible to leverage the browser's native module loading system for lazy loading.
To take advantage of lazy loading, use the ES Module version:
javascript
const loadNoaWidget = async () => {
const { noaWidgetLauncher } = await import(
"https://notes-widget.{country}.noa.ai/v1/index.mjs"
);
// The widget code will only be loaded when noaWidgetLauncher is called
noaWidgetLauncher({
// ... config
});
};
loadNoaWidget();This approach provides several benefits:
- Smaller initial bundle size
- Faster initial page load
- Widget code is only loaded when needed
- Better caching and performance optimization
Browser Support
The library supports modern browsers with ES Modules and async/await support.
- Chrome (last 2 versions)
- Firefox (last 2 versions)
- Safari (last 2 versions)
- Edge (last 2 versions)
Browsers not supporting modules are meant to use the UMD version, but support for promises is required.