AI Consultation Widget: embed and configure

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

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.

<div id="squire-ai-consult" style="width: 600px; height: 600px;"></div>

Initialize the SDK

Load the Squire SDK from the CDN and create a Squire instance with your access token and output language. See Authentication for how to obtain a token.

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

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.

const widget = squire.mountWidget('#squire-ai-consult', 'ai-consultation');

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.

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

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

Configuration options

Pass a configuration object as the third argument to mountWidget to customize the 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',
  },
});

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.

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 for available options.

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.

Events

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

() => void

Emitted when the widget has fully loaded and is ready for user interaction.

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

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

Complete example

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

index.html

<!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>

Get Started

SDK

Widgets

Output & Data

Reference

AI Consultation Widget: embed and configure

Key features

Basic usage

Configuration options

Events

Complete example

​Key features

​Basic usage

​Configuration options

​Events

​Complete example

Key features

Basic usage

Configuration options

Events

Complete example