Form Filling SDK Configuration Examples

The following examples in this guide show how to configure SukiAuthManager and FormFillingClient in JavaScript and React. Before you begin, obtain your form_template_ids from your Suki support team. These are the template_id UUIDs enabled for your account. For the list of supported template types, refer to Form filling templates.

What each step does

Authenticate

Create SukiAuthManager with your partnerId, partnerToken, and environment. The SDK signs in before the Form filling interface can open.

Create the Client

Pass the auth manager to new FormFillingClient({ authManager }). Create this once per page and reuse it for every session. Optionally add onError to log configuration or runtime errors.

Open a Session

Call client.start() or render <FormFilling> with form_template_ids and onSubmit. Pass your encounter ID as correlation_id so results map to the right patient record. In JavaScript, also pass rootElement and give that container explicit height.

JavaScript
React

HTML

<div id="suki-form-container" style="width:100%;height:600px;"></div>
<button type="button" id="fill-forms-btn">Fill Forms with Suki</button>

JavaScript

import { SukiAuthManager } from "@suki-sdk/core";
import { FormFillingClient } from "@suki-sdk/form-filling";

const authManager = new SukiAuthManager({
  partnerId: "YOUR_PARTNER_ID", // Required
  partnerToken: "YOUR_PARTNER_TOKEN", // Required
  environment: "staging", // Optional
  loginOnInitialize: true,
  autoRegister: false, // optional (default true); when true, provider fields below are often required
  providerId: "YOUR_PROVIDER_ID", // Optional
  providerName: "Dr. Jane Smith", // Optional
});

const client = new FormFillingClient({
  authManager,
  onError: (err) => console.error(err.code, err.reason, err.message),
});

document.getElementById("fill-forms-btn").addEventListener("click", async () => {
  await client.start({
    rootElement: document.getElementById("suki-form-container"),
    form_template_ids: ["YOUR_TEMPLATE_ID"],
    correlation_id: "c3d4e5f6-a7b8-9012-cdef-123456789012",
    onReady: () => console.log("Form UI ready"),
    onSubmit: (result) => console.log(result.structured_data.generated_values),
    onCancel: () => console.log("Cancelled"),
  });
});

React

import { useMemo, useState } from "react";
import { SukiAuthManager } from "@suki-sdk/core";
import { FormFillingClient, FormFillingProvider, FormFilling } from "@suki-sdk/form-filling-react";

export function FormFillingExample() {
  const client = useMemo(() => {
    const authManager = new SukiAuthManager({
      partnerId: "YOUR_PARTNER_ID", // Required
      partnerToken: "YOUR_PARTNER_TOKEN", // Required
      environment: "staging", // Optional
      loginOnInitialize: true,
      autoRegister: false, // optional (default true); when true, providerName and providerOrgId are often required
    });
    return new FormFillingClient({ authManager });
  }, []);

  const [open, setOpen] = useState(false);

  return (
    <FormFillingProvider client={client}>
      <button type="button" onClick={() => setOpen(true)} disabled={open}>
        Fill Forms with Suki
      </button>
      {open && (
        <FormFilling
          form_template_ids={["YOUR_TEMPLATE_ID"]}
          correlation_id="c3d4e5f6-a7b8-9012-cdef-123456789012"
          onSubmit={() => setOpen(false)}
          onCancel={() => setOpen(false)}
        />
      )}
    </FormFillingProvider>
  );
}

In React, create FormFillingClient inside useMemo so you do not build a new client on every render. Mount <FormFilling> only while Form filling should be visible.
Always implement onSubmit. It runs when structured JSON is ready after processing, not when the clinician taps submit.

Next steps

Configuration for the full start() and <FormFilling> field reference Quickstart for a full walkthrough Basic usage example for session status UI with useFormFilling()

Get Started

Integration Guides

Concepts & Feature Guides

API Reference

Resources

Form Filling SDK Configuration Examples

What each step does

Next steps

​What each step does

​Next steps

What each step does

Next steps