> ## Documentation Index
> Fetch the complete documentation index at: https://docs.squire.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# Squire Widgets: drop-in UI components for EHR

> Embed Squire's pre-built UI widgets into your EHR in minutes. Fully themeable, multi-language, and always improving — no custom recording UI required.

Widgets are pre-built UI components you can drop into your EHR application without building a recording interface from scratch. Introduced in SDK v1.8.0, widgets handle microphone access, recording controls, audio visualization, and result delivery out of the box — while giving you full control over appearance and behavior through configuration.

## Benefits

* **Quick integration**: add a fully functional recording interface in minutes
* **Fully themeable**: match your application's color scheme, typography, and border radius
* **Highly customizable**: configure behavior, language, and output templates per use case
* **Multi-language support**: built-in localization for English, Dutch, French, and German
* **Always improving**: widgets receive regular enhancements without changes to your integration

## How widgets work

Every widget follows the same three-step lifecycle:

<Steps>
  <Step title="Initialize the SDK">
    Create a `Squire` instance with your access token and output language. See [Authentication](/integration/authentication) for how to obtain a short-lived token.

    ```javascript theme={null}
    const squire = new Squire({
      token: 'YOUR_ACCESS_TOKEN',
      outputLanguage: 'en',
    });
    ```
  </Step>

  <Step title="Mount the widget">
    Call `mountWidget` with a CSS selector for the container element and the widget name. Pass an optional configuration object to customize appearance and behavior.

    ```javascript theme={null}
    const widget = squire.mountWidget('#your-container', 'widget-name');
    ```
  </Step>

  <Step title="Listen for events">
    Use the `on` method on the returned widget instance to react to lifecycle events and results.

    ```javascript theme={null}
    widget.on('loaded', () => {
      console.log('Widget is ready');
    });
    ```
  </Step>
</Steps>

## Available widgets

<CardGroup cols={2}>
  <Card title="AI Consultation Widget" icon="microphone" href="/integration/widgets/ai-consultation">
    A complete recording interface with mic selection, waveform visualization, and automatic consultation summary generation.
  </Card>

  <Card title="Microphone Quality Test Widget" icon="volume" href="/integration/widgets/microphone-quality-test">
    Let users verify their microphone quality before starting a recording session.
  </Card>
</CardGroup>