Skip to main content
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

1

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

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

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');
4

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',
  },
});
​
locale
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.
​
templateId
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.
​
theme
ThemeConfig
Theme configuration object for customizing the widget’s visual appearance.
PropertyTypeDescription
colorPrimarystringPrimary color for buttons and accents.
colorDarkstringDark color for text and borders.
colorLightstringLight accent color for hover states.
colorLighteststringLightest color for backgrounds.
borderRadiusstringBorder radius for UI elements.
fontstringFont family. All Google Fonts are supported.

​
Events

Listen for events using the on method on the widget instance.
​
loaded
() => void
Emitted when the widget has fully loaded and is ready for user interaction.
​
summary-ready
(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>