Microphone Quality Test Widget: setup guide

The Microphone Quality Test Widget lets users verify that their microphone is working correctly before starting a consultation recording. Embed it alongside your recording workflow to catch audio issues early and reduce failed or low-quality recordings.

Basic usage

Add the container element

Add a div in your HTML where the widget will render.

<div id="squire-mic-test" 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. 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 'microphone-quality-test'. Pass an optional configuration object as the third argument to customize behavior and appearance.

const widget = squire.mountWidget('#squire-mic-test', 'microphone-quality-test');

Listen for events

Subscribe to the loaded event to know when the widget is ready.

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

Configuration options

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

const widget = squire.mountWidget('#squire-mic-test', 'microphone-quality-test', {
  locale: 'en',
  microphoneLabel: 'MacBook Pro Microphone (Built-in)',
  theme: {
    colorPrimary: '#539DD6',
    colorDark: '#0C2639',
    colorLight: '#7CC1F6',
    colorLightest: '#E1F1FD',
    borderRadius: '0.5rem',
    font: 'system-ui, sans-serif',
  },
});

string

default:"outputLanguage from SDK initialization"

Language code for the widget interface. Supported values: 'en' (English), 'nl' (Dutch), 'fr' (French), 'de' (German).When omitted, the widget uses the outputLanguage set during SDK initialization.

string

Label of the microphone device to preselect. When provided, the widget skips its built-in microphone selection UI and uses the specified device directly.

Use microphoneLabel when your application already shows a microphone selector elsewhere in the UI. Preselecting the device avoids showing a duplicate picker inside the widget.

ThemeConfig

Theme configuration object for customizing the widget’s visual appearance.

Property	Type	Default	Description
`colorPrimary`	`string`	`'#539DD6'`	Primary color for buttons and accents.
`colorDark`	`string`	`'#0C2639'`	Dark color for text and borders.
`colorLight`	`string`	`'#7CC1F6'`	Light accent color for hover states.
`colorLightest`	`string`	`'#E1F1FD'`	Lightest color for backgrounds.
`borderRadius`	`string`	`'0.5rem'`	Border radius for UI elements.
`font`	`string`	`'system-ui, sans-serif'`	Font family. All Google Fonts are supported and loaded automatically.

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.

Complete example

The following example shows a full HTML page embedding the Microphone Quality Test Widget.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Microphone Quality Test</title>
</head>
<body>
  <!-- Widget container -->
  <div id="squire-mic-test" 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 microphone quality test widget
    const widget = squire.mountWidget('#squire-mic-test', 'microphone-quality-test', {
      locale: 'en',
      theme: {
        colorPrimary: '#539DD6',
        colorDark: '#0C2639',
        colorLight: '#7CC1F6',
        colorLightest: '#E1F1FD',
        borderRadius: '0.5rem',
        font: 'system-ui, sans-serif',
      },
    });

    // Listen for the loaded event
    widget.on('loaded', () => {
      console.log('Mic quality test widget loaded');
    });
  </script>
</body>
</html>

Get Started

SDK

Widgets

Output & Data

Reference

Microphone Quality Test Widget: setup guide

Basic usage

Configuration options

Events

Complete example

​Basic usage

​Configuration options

​Events

​Complete example

Basic usage

Configuration options

Events

Complete example