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

1

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

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

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

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',
  },
});
​
locale
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.
​
microphoneLabel
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.
​
theme
ThemeConfig
Theme configuration object for customizing the widget’s visual appearance.
PropertyTypeDefaultDescription
colorPrimarystring'#539DD6'Primary color for buttons and accents.
colorDarkstring'#0C2639'Dark color for text and borders.
colorLightstring'#7CC1F6'Light accent color for hover states.
colorLighteststring'#E1F1FD'Lightest color for backgrounds.
borderRadiusstring'0.5rem'Border radius for UI elements.
fontstring'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.
​
loaded
() => 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>