Dictation SDK JavaScript Integration

Overview

Use the imperative API when you integrate with vanilla JavaScript, Vue, Angular, or other non-React stacks, or when you need multiple dynamic editors or a custom overlay system. This guide follows JavaScript Integration, Switching Between Fields, and related notes in Suki Dictation SDK.md.

Prerequisites

Installation of @suki-sdk/dictation and @suki-sdk/core
Authentication configured with SukiAuthManager

Create the client

JavaScript

import { SukiAuthManager } from "@suki-sdk/core";
import { DictationClient } from "@suki-sdk/dictation";

const authManager = new SukiAuthManager({
  partnerId: "YOUR_PARTNER_ID",
  partnerToken: "YOUR_PARTNER_TOKEN",
  environment: "staging",
  loginOnInitialize: true,
});

const dictationClient = new DictationClient({ authManager });

Call show()

JavaScript

await dictationClient.show({
  mode: "in-field",
  fieldId: "assessment",
  rootElement,
  initialText,
  onSubmit,
  onCancel,
});

The iframe automatically resizes to match the container element (rootElement). See Configuration reference for every ShowOptions field.

Switching between fields

Calling show() again replaces the active session. You do not need to call hide() manually between fields:

JavaScript

show(fieldA);
show(fieldB);

This is equivalent to calling hide on the previous context and then show for the next; manual cleanup is not required.

Single client per scope

Use one DictationClient instance per page scope so you do not get multiple overlays. See Error handling.

Next steps

Modes and callbacks for in-field vs scratchpad and callback payloads
React integration if you move to React
Quickstart for a full minimal example

​Overview

​Prerequisites

​Create the client

​Call show()

​Switching between fields

​Single client per scope

​Next steps

Overview

Prerequisites

Create the client

Call show()

Switching between fields

Single client per scope

Next steps