Embedded Form Builder | Zignature Docs

Signing Form Form Builder

This component enables seamless integration of the template form builder within any section of your application. Users can upload documents, drag-and-drop form fields, and configure signing workflows. Compatible with JS+HTML, React, Vue, and Angular.

HTML + JavaScript

<!-- Include the Zignature builder script -->
<script src="https://cdn.zignature.io/js/builder.js"></script>

<zignature-builder
  id="zignatureBuilder"
  data-token="{{ jwt_token }}"
  data-template-id="{{ template_id }}">
</zignature-builder>

<script>
  window.zignatureBuilder.addEventListener('save', (e) => {
    console.log('Template saved:', e.detail)
  })
</script>

import React from "react"
import { ZignatureBuilder } from '@zignature/react'

export function TemplateEditor() {
  return (
    <ZignatureBuilder
      token="your_jwt_token"
      templateId={1000}
      onSave={(data) => console.log(data)}
    />
  );
}

<template>
  <ZignatureBuilder
    :token="jwtToken"
    :template-id="templateId"
    @save="onSave"
  />
</template>

<script setup>
import { ZignatureBuilder } from '@zignature/vue'
import { ref } from 'vue'

const jwtToken = ref('your_jwt_token')
const templateId = ref(1000)
const onSave = (data) => console.log(data)
</script>

import { Component } from '@angular/core';
import { ZignatureBuilderModule } from '@zignature/angular';

@Component({
  selector: 'app-builder',
  standalone: true,
  imports: [ZignatureBuilderModule],
  template: `
    <zignature-builder
      [token]="jwtToken"
      [templateId]="templateId"
      (save)="onSave($event)">
    </zignature-builder>
  `
})
export class BuilderComponent {
  jwtToken = 'your_jwt_token';
  templateId = 1000;

  onSave(data: any) {
    console.log(data);
  }
}

View LIVE DEMO

Attributes

data-tokenStringrequired

JSON Web Token (JWT HS256) signed using the API key. JWT must be generated on the backend. The token grants access to the builder and authorizes template modifications.

data-template-idNumber

ID of an existing template to edit. If not provided, a new template will be created when a document is uploaded.

data-rolesString

Comma-separated list of signer roles for the template.

Example: First Party,Second Party

data-languageString

UI language: en, es, it, de, fr, nl, pl, uk, cs, pt, he, ar, kr, ja. Defaults to browser language.

data-with-titleBoolean

Set false to hide the template title input.

Default: true

Callbacks

initEvent

Triggered when the builder component initializes.

document.querySelector('zignature-builder').addEventListener('init', () => console.log('ready'))

loadEvent

Triggered when the template data finishes loading.

document.querySelector('zignature-builder').addEventListener('load', (e) => e.detail)

saveEvent

Triggered when the template is saved. The event detail contains the template data including field configurations.

document.querySelector('zignature-builder').addEventListener('save', (e) => e.detail)

uploadEvent

Triggered when a document is uploaded to the builder.

document.querySelector('zignature-builder').addEventListener('upload', (e) => e.detail)

Live Example

Interactive live preview of the Zignature embedded form builder. This is the actual builder component running from app.zignature.io.

Related Guides

Attributes

Callbacks