Configuration

Last updated:

The technical semantics of the common Formcentric keys are described in the main Client (General).

This page therefore focuses on the SDK syntax, the behaviour of mount() and the SDK-specific options.

Target element

The first parameter for mount() is the target element.

The following are supported:

  1. A CSS selector string, for example '#my-form'
  2. A genuine HTMLElement

The target element must be present in the browser DOM, if mount() is called.

Identification and form source

The common semantics for these fields are described in Client (General).

In the SDK, the corresponding keys are as follows:

SDK-Key
embedId
formDefinition
srcUrl
dataUrl
designUrl

The npm SDK uses the runtime included in @formcentric/client and does not accept formappUrl; untyped values passed to it are ignored with a warning. Runtime URLs for formcentric.js are described in Runtime & Delivery.

Theme and asset configuration

The common semantics for these fields are described in Formcentric Client General.

In the SDK, the corresponding keys are as follows:

SDK-Key
themeUrl
themeVariableUrl
themeVariables
templateUrl
themeDir
theme
skipThemeLoad
skipTemplatesLoad
skipFormLoad

Default values, request context and metadata

The common semantics for these fields are described in Client (General).

In the SDK, the corresponding keys are as follows:

SDK-Key
vars
params
refs
token
requestHeaders
formName
instanceId
env
configuration

Language, local and translations

The common semantics of language, locale and translations are described in Client (General).

In the SDK, the corresponding keys are language, locale and localesPath.

Example:


Bundled SDK integrations can alternatively pass a locales object directly. This is the recommended approach if you want to provide date-fns and upload locale objects, including their functions.

The following snippet illustrates the structure; add the required Formcentric translations under resources. The rules for existing and new languages can be found in Client (General) under Configuration → Including your own translations.


Layout and debugging

The common semantics of maxWidth, height and debug are described in Client (General).

Example:


Parent URL/double opt-in

The technical semantics of parentUrl are described in Client (General). In the SDK, the same common key is used directly as parentUrl.

Example:


If parentUrl is not set explicitly, the current page URL is used as a user return context.

Full MountConfig reference

The SDK supports the following mount configuration fields:


Important behavioural rules and defaults

  1. At least one of embedId or formDefinition must be set.
  2. SDK integrations are config-authoritative. data-fc-* attributes on the target element are not used as a live configuration source.
  3. Most fields are initialisation-only props. Changes afterwards are not automatically applied to a running instance.
  4. The default value for conflictBehavior with direct SDK mounts is 'throw'.
  5. If a handover for the same embedId is required, then conflictBehavior: 'stop-existing' should be set.
  6. Note that skipThemeLoad and skipTemplatesLoad take effect only if they are set explicitly.
  7. Object-based configurations such as vars, params, themeVariables, and configuration should be passed as serializable objects. locales is the exception: it contains date-fns and upload locale objects, including their functions, and is passed by reference.
  8. data-fc-watch is Static-only and is ignored for SDK mounts.

Feedback