Embedding the SDK in a page¶

The SDK can be embedded by loading the Javascript code and stylesheet.

Assuming the SDK is hosted on https://example.com/sdk/, two resources need to be loaded.

Loading static assets¶

The default stylesheet

<link rel="stylesheet" href="https://example.com/sdk/open-forms-sdk.css" />

The Javascript code

<script src="https://example.com/sdk/open-forms-sdk.js"></script>

Calling the SDK¶

Once the Javascript is loaded, the module OpenForms is available. To initialize a form, use the constructor and initialize the form:

const form = new OpenForms.OpenForm(element, options);
form.init();

Where element is a valid DOM node and options an options Object, see Available options.

Available options¶

baseUrl:: Required. The API root of the Open Forms backend server. Note that this server must be configured to allow Cross Origin requests (CORS) from the domain where the SDK is used.
formId:: Required. The UUID or slug of the form to embed. This can be obtained via the Open Forms management interface.
basePath:: Optional, but recommended. The SDK considers this as the base URL and builds all URLs relatively to this URL. If not provided, window.location.pathname is used.

Full example¶

<!-- Load stylesheet and SDK bundle -->
<link rel="stylesheet" href="https://example.com/sdk/open-forms-sdk.css" />
<script src="https://example.com/sdk/open-forms-sdk.js"></script>

<!-- Load a form and render it -->
<div
  id="openforms-root"
  data-base-url="https://openforms.example.com/api/v1/"
  data-form-id="0d2f5453-8987-43dd-952e-aad3dd8f2318"
  data-base-path="/some-cms-page"
></div>
<script>
  var targetNode = document.getElementById('openforms-root');
  var form = new OpenForms.OpenForm(targetNode, targetNode.dataset);
  form.init();
</script>