> ## 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.

# AI Consultation Widget: embed and configure

> Embed the Squire AI Consultation Widget for a complete recording interface: mic selection, waveform visualization, and automatic structured summary generation.

The AI Consultation Widget gives you a complete, ready-to-embed recording interface for medical consultations. It handles microphone selection, start/pause/resume/stop controls, real-time audio waveform visualization, and automatic summary generation — so you can focus on integrating the output into your EHR rather than building recording UI.

## Key features

* **Microphone selection**: users can choose from available audio input devices
* **Recording controls**: start, pause, resume, and stop a consultation recording
* **Real-time waveform visualization**: animated audio level display during recording
* **Theme customization**: configure colors, border radius, and font to match your application
* **Multi-language support**: set the interface and speech recognition language independently
* **Template support**: route output through a predefined template for structured summaries
* **Event system**: react to widget lifecycle and summary delivery events

## Basic usage

<Steps>
  <Step title="Add the container element">
    Add a `div` in your HTML where the widget will render. Set explicit dimensions so the widget has space to display.

    ```html theme={null}
    <div id="squire-ai-consult" style="width: 600px; height: 600px;"></div>
    ```
  </Step>

  <Step title="Initialize the SDK">
    Load the Squire SDK from the CDN and create a `Squire` instance with your access token and output language. See [Authentication](/integration/authentication) for how to obtain a token.

    ```html theme={null}
    <script src="https://cdn.squire.eu/sdk/latest/index.umd.js"></script>
    <script>
      const squire = new Squire({
        token: 'YOUR_ACCESS_TOKEN',
        outputLanguage: 'en',
      });
    </script>
    ```
  </Step>

  <Step title="Mount the widget">
    Call `mountWidget` with the container selector and the widget name `'ai-consultation'`. Pass a configuration object as the optional third argument to customize behavior and appearance.

    ```javascript theme={null}
    const widget = squire.mountWidget('#squire-ai-consult', 'ai-consultation');
    ```
  </Step>

  <Step title="Listen for events">
    Subscribe to events on the returned widget instance. The `summary-ready` event fires with intermediate results first and again with the final summary.

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

    widget.on('summary-ready', (summary) => {
      if (summary.report_status === 'final') {
        console.log('Final summary:', summary);
      }
    });
    ```
  </Step>
</Steps>

## Configuration options

Pass a configuration object as the third argument to `mountWidget` to customize the widget.

```javascript theme={null}
const widget = squire.mountWidget('#squire-ai-consult', 'ai-consultation', {
  locale: 'en',
  templateId: 'YOUR_TEMPLATE_ID',
  theme: {
    colorPrimary: '#337ab7',
    colorDark: '#212529',
    colorLight: '#236aa7',
    colorLightest: '#f8f9fa',
    borderRadius: '0.25rem',
    font: 'Roboto',
  },
});
```

<ParamField path="locale" type="string" default="outputLanguage from SDK initialization">
  Language code for the widget interface and speech recognition input. Supported values: `'en'` (English), `'nl'` (Dutch), `'fr'` (French), `'de'` (German).

  When omitted, the widget uses the `outputLanguage` set during SDK initialization.
</ParamField>

<ParamField path="templateId" type="string" default="undefined (uses default template)">
  Template ID for structured output generation. Templates define the sections and format of the consultation summary. See the [templates documentation](/integration/templates) for available options.
</ParamField>

<ParamField path="theme" type="ThemeConfig">
  Theme configuration object for customizing the widget's visual appearance.

  | Property        | Type     | Description                                  |
  | --------------- | -------- | -------------------------------------------- |
  | `colorPrimary`  | `string` | Primary color for buttons and accents.       |
  | `colorDark`     | `string` | Dark color for text and borders.             |
  | `colorLight`    | `string` | Light accent color for hover states.         |
  | `colorLightest` | `string` | Lightest color for backgrounds.              |
  | `borderRadius`  | `string` | Border radius for UI elements.               |
  | `font`          | `string` | Font family. All Google Fonts are supported. |
</ParamField>

## Events

Listen for events using the `on` method on the widget instance.

<ParamField path="loaded" type="() => void">
  Emitted when the widget has fully loaded and is ready for user interaction.
</ParamField>

<ParamField path="summary-ready" type="(summary: ConsultationSummary) => void">
  Emitted when a consultation summary is available. This event fires multiple times:

  * Once with intermediate results, where `summary.report_status` is `'intermediate'`
  * Once with the completed summary, where `summary.report_status` is `'final'`

  Handle both states to show progress to the clinician and write the final result to your EHR.
</ParamField>

<Note>
  The `summary-ready` event fires more than once per consultation. Always check `summary.report_status` before writing data to your EHR system.
</Note>

## Complete example

The following example shows a full HTML page embedding the AI Consultation Widget with theme customization and event handling.

```html index.html theme={null}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AI Consultation Widget</title>
</head>
<body>
  <!-- Widget container -->
  <div id="squire-ai-consult" style="width: 600px; height: 600px;"></div>

  <!-- Load Squire SDK -->
  <script src="https://cdn.squire.eu/sdk/latest/index.umd.js"></script>
  <script>
    // Initialize Squire SDK
    const squire = new Squire({
      token: 'YOUR_ACCESS_TOKEN',
      outputLanguage: 'en',
    });

    // Mount the AI consultation widget
    const widget = squire.mountWidget('#squire-ai-consult', 'ai-consultation', {
      locale: 'en',
      templateId: 'YOUR_TEMPLATE_ID',
      theme: {
        colorPrimary: '#337ab7',
        colorDark: '#212529',
        colorLight: '#236aa7',
        colorLightest: '#f8f9fa',
        borderRadius: '0.25rem',
        font: 'Roboto',
      },
    });

    // Listen for widget events
    widget.on('loaded', () => {
      console.log('AI consultation widget is ready');
    });

    widget.on('summary-ready', (summary) => {
      if (summary.report_status === 'final') {
        console.log('Final summary ready:', summary);
      }
    });
  </script>
</body>
</html>
```