The Intron Widget provides a quick and easy way to add real-time speech-to-text capabilities to your web application. The widget handles all the complexity of audio capture, streaming, and transcription.

NPM Package

View the official NPM package

​
Quick Demo

Quick demo of the widget in action - see how easy it is to integrate real-time transcription into your application.

​
Features

  • Real-time streaming transcription
  • Built-in microphone handling
  • Automatic voice activity detection
  • Customizable appearance
  • Mobile-responsive design
  • Support for multiple languages and African accents
  • Auto-insert summaries into your application
  • JSON schema output support

​
Installation

Install the widget package from NPM: 
npm install @intron_health/intron_transcriber_streaming

​
Complete Example (for plain HTML):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Intron Transcription Widget</title>
    <script src="path/to/intron_transcriber_widget.umd.js"></script>
  </head>
  <body>
    <h3>Click Record to start transcription:</h3>
    
    <div id="transcription-widget"></div>
    
    <textarea 
      id="transcription-target" 
      rows="10" 
      cols="80"
      placeholder="Transcription will appear here..."
    ></textarea>

    <script>
      const { loadIntronTranscribeWidget } = IntronTranscriberWidget;
      
      window.onload = function () {
        const parentElement = document.getElementById("transcription-widget");
        const apiKey = "your-api-key-here";
        
        const options = {
          writeStreamOnlyInSpecifiedTextbox: "transcription-target",
          showPostProcessingCategory: "health"
        };
        
        loadIntronTranscribeWidget(parentElement, apiKey, options);
      };
    </script>
  </body>
</html>

​
Usage steps

1

Initialize,authenticate and connect

Once the widget is set up, launch it in your application interface. Click the “Speak” button to initialize the widget and grant microphone access when prompted. After initialization, you can begin recording your speech.
Widget Initialize
Widget Initialize
2

Summaries menu

The widget also allows you to choose the type of summary you want for your transcription—simply select your preferred summary option before recording to customize the output.
Widget Summary menu button
Widget Summary Selection
3

Transcription

Press the record button to start capturing your speech. As you speak, the widget transcribes your words in real time. When you’re done, click the stop button. The widget will process your audio and generate a transcript, which is returned in a structured JSON format. This output includes the full transcribed text as well as any summaries or post-processing options you selected, making it easy to integrate the results into your application.
Widget transcription inprogress
Widget transcription stopped
Widget transcription complete
Widget transcription results

NPM Package

View the official NPM package for more detailed integration and advanced usage

​
Browser Support

BrowserMinimum Version
Chrome60+
Firefox55+
Safari11+
Edge79+
The widget requires HTTPS for microphone access. It will not work on HTTP connections (except localhost for development).

​
Troubleshooting

Ensure your page is served over HTTPS and that the user has granted microphone permissions.
Check the browser console for errors. Verify your API key is correct and has the necessary permissions.
Ensure the container element exists in the DOM before calling IntronWidget.init().