Web SDK Form Filling Overview

Add Form filling to JavaScript or React apps with the Web SDK Form filling client and components, without a separate SDK install in Web SDK

Form filling lets you fill medical forms with the Suki Web SDK during the patient encounter. You can either use Suki defined medical form templates or your own form schema, or a mix of both. This page shows how to integrate Form filling with the Suki Web SDK in a browser-based JavaScript or React application.

For dynamic and mixed forms, Form filling in the Web SDK requires v3.3.1 or later.

To use Form filling, create a SukiAuthManager and a FormFillingClient. In React, wrap your tree with FormFillingProvider, then render FormFilling when the clinician should fill forms. In JavaScript, call await formFillingClient.start({ ... }) when they are ready.

Static, dynamic, and mixed forms

Pass the forms for the session in the forms array. Each entry is either a Suki defined medical form template or a partner-defined schema:

Mode	How you pass it
Static	{ form_template_id: "YOUR_TEMPLATE_ID" }
Dynamic	{ schema: { ... }, id?, name?, type? }
Mixed	Static and dynamic entries in the same forms array

• For dynamic forms, match results with partner_form_id (the same value as the id you pass on that form). Do not rely on array order.

• form_template_ids is deprecated, but still works when you omit forms. Prefer forms: [{ form_template_id }] for new work. If you pass forms (including an empty array), it is the only source of context and form_template_ids is ignored. The same rule applies to JavaScript start({ forms: [] }) and React FormFilling with forms={[]}.

Refer to Dynamic Form filling for XOR rules and schema shapes.

Prerequisites

Before you start, complete the Web SDK prerequisites. Get your partnerId from Partner onboarding. Pass a partnerToken (JWT from your identity provider) with that Partner ID to sign in.

You also need:

• Forms for the session: Pass forms. Use a Suki form_template_id for template entries (ask Suki support for the IDs, or see templates). Use a schema for your own forms.
• Encounter ID: Pass it as correlation_id so callbacks and webhooks match the right record.

Integration guides

Choose the guide for your stack:

JavaScript

Integrate Form filling in a browser-based JavaScript app with the Web SDK.

React

Integrate Form filling in a browser-based React app with the Web SDK.

For options such as form_template_ids, correlation_id, and callbacks, refer to the Configuration guide in the Form filling SDK section.