Quick summary
Learn about the architecture of the Suki Dictation SDK and how your application, the Dictation SDK, sign-in, and Suki-hosted dictation fit together.
Overview
This guide explains the responsibilities for embedding dictation in your application. You maintain control of your user interface and determine when you turn dictation on or off. The Suki Dictation SDK hosts the microphone experience and transcription to ensure a consistent look and behavior across every integrationArchitecture of the Suki Dictation SDK
There are four main components in the Suki Dictation SDK:- Your application
- The Suki Auth Manager
- The Dictation SDK
- The Suki hosted dictation iframe
Your app never has to build the dictation screen itself. The SDK opens that experience in the place you choose and passes results back to your code.
What each layer does
| Layer | What it does |
|---|---|
| Your application | You decide when dictation should appear, where it mounts on the page, and what to do with text when the user is done (and optional live updates if you use them). |
| Dictation SDK | The client you install talks to Suki, shows or hides the hosted dictation experience, and wires your callbacks so you receive transcripts. |
| Sign-in | You configure this once with your partner details. It checks your setup, signs in with Suki, refreshes access when needed, and gives the hosted experience what it needs to run securely. |
| Hosted dictation | The surface users speak into lives on Suki’s side. It stays separate from your page’s styles and layout so the experience stays consistent. The iframe is isolated from host CSS and DOM to ensure consistent rendering across integrations. |
Lifecycle of a dictation session
Configure authentication
Create and configure SukiAuthManager with your partner credentials. Sign-in may run when you initialize, depending on your settings.
Create the dictation client
Create DictationClient, or use the React provider and component, tied to that auth.
Open dictation
When the user should dictate, open dictation (in-field or scratchpad). A session is active while they work.
For full implementation details for these APIs, refer to JavaScript integration for JavaScript, and React integration for React.