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

# Microphone Quality Test Widget: setup guide

> Embed the Squire Microphone Quality Test Widget so clinicians can verify audio setup before recording. Supports theme, locale, and microphone preselection.

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

<Steps>
  <Step title="Add the container element">
    Add a `div` in your HTML where the widget will render.

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

    ```javascript theme={null}
    const widget = squire.mountWidget('#squire-mic-test', 'microphone-quality-test');
    ```
  </Step>

  <Step title="Listen for events">
    Subscribe to the `loaded` event to know when the widget is ready.

    ```javascript theme={null}
    widget.on('loaded', () => {
      console.log('Mic quality test widget is ready');
    });
    ```
  </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-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',
  },
});
```

<ParamField path="locale" type="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.
</ParamField>

<ParamField path="microphoneLabel" type="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.

  <Tip>
    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.
  </Tip>
</ParamField>

<ParamField path="theme" type="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](https://fonts.google.com) are supported and loaded automatically. |
</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>

## Complete example

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

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