Embedded Form Builder | DocuSeal Docs

Menu

Home
Embedded Form Builder

Signing Form Form Builder

This component allows you to seamlessly integrate an entire document creation and signing form anywhere on your website or application. It supports JS+HTML, Vue, Angular and React.

JavaScript
React
Vue
Angular

Copy

<script src="https://cdn.docuseal.com/js/builder.js"></script>

<docuseal-builder
  data-token="<%= JWT.encode({
    user_email: 'admin_user@example.com',
    integration_email: 'signer@example.com',
    name: 'Integration W-9 Test Form',
    document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],
  }, 'API_KEY') %>">
</docuseal-builder>

Related Guides

Complete document creation and signing process in your SaaS with JavaScript

Callbacks

load optional Event type

Custom event to be triggered on loading the form builder template data.

Example: document.querySelector('docuseal-builder').addEventListener('load', (e) => e.detail)

upload optional Event type

Custom event to be triggered on uploading a document to the template.

Example: document.querySelector('docuseal-builder').addEventListener('upload', (e) => e.detail)

send optional Event type

Custom event to be triggered on sending documents for signature to recipients.

Example: document.querySelector('docuseal-builder').addEventListener('send', (e) => e.detail)

change optional Event type

Custom event to be triggered every time a change to the template is made.

Example: document.querySelector('docuseal-builder').addEventListener('change', (e) => e.detail)

save optional Event type

Custom event to be triggered on saving changes of the template form.

Example: document.querySelector('docuseal-builder').addEventListener('save', (e) => e.detail)

Frontend Backend

Copy

import React, { useState, useEffect } from 'react';
import { DocusealBuilder } from '@docuseal/react'

const App = () => {
  const [token, setToken] = useState();

  useEffect(() => {
    fetch('/api/docuseal/builder_token', {
      method: 'POST',
    })
      .then((response) => response.json())
      .then((data) => {
        setToken(data.token);
      });
  }, []);

  return token && <DocusealBuilder token={token} />;
};

const jwt = require('jsonwebtoken');

const token = jwt.sign({
  user_email: 'admin_user@example.com',
  integration_email: 'signer@example.com',
  external_id: 'TestForm123',
  name: 'Integration W-9 Test Form',
  document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],
}, 'API_KEY');

Related Guides

Complete document creation and signing process in your React SaaS

Callbacks

onLoad optional Function

Function to be called on loading the form builder template data.

Example: (data) => { console.log(data) }

onUpload optional Function

Function to be called on uploading a document to the template.

Example: (data) => { console.log(data) }

onSend optional Function

Function to be called on sending documents for signature to recipients.

Example: (data) => { console.log(data) }

onChange optional Function

Function to be called when changes are made to the template form.

Example: (data) => { console.log(data) }

onSave optional Function

Function to be called on saving changes of the template form.

Example: (data) => { console.log(data) }

Frontend Backend

Copy

<template>
  <DocusealBuilder
    v-if="token"
    :token="token"
  />
</template>

<script>
import { DocusealBuilder } from '@docuseal/vue'

export default {
  name: 'App',
  components: { DocusealBuilder },
  data () {
    return { token: '' }
  },
  mounted () {
    fetch('/api/docuseal/builder_token', {
      method: 'POST'
    }).then(async (resp) => {
      const data = await resp.json()

      this.token = data.token
    })
  }
}
</script>

const jwt = require('jsonwebtoken');

const token = jwt.sign({
  user_email: 'admin_user@example.com',
  integration_email: 'signer@example.com',
  external_id: 'TestForm123',
  name: 'Integration W-9 Test Form',
  document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],
}, 'API_KEY');

Related Guides

Complete document creation and signing process in your Vue SaaS

Callbacks

@load optional Function

Function to be called on loading the form builder template data.

Example: onBuilderLoad

@upload optional Function

Function to be called on uploading a document to the template.

Example: onBuilderUpload

@send optional Function

Function to be called on sending documents for signature to recipients.

Example: onBuilderSend

@change optional Function

Function to be called when changes are made to the template form.

Example: onBuilderChange

@save optional Function

Function to be called on saving changes of the template form.

Example: onBuilderSave

Frontend Backend

Copy

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DocusealBuilderComponent } from '@docuseal/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DocusealBuilderComponent],
  template: `
    <div class="app">
      <ng-container *ngIf="token">
        <docuseal-builder [token]="token"></docuseal-builder>
      </ng-container>
    </div>
  `
})
export class AppComponent implements OnInit {
  token: string = ''

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.post('/api/docuseal/builder_token', {}).subscribe((data: any) => {
      this.token = data.token;
    });
  }
}

const jwt = require('jsonwebtoken');

const token = jwt.sign({
  user_email: 'admin_user@example.com',
  integration_email: 'signer@example.com',
  external_id: 'TestForm123',
  name: 'Integration W-9 Test Form',
  document_urls: ['https://www.irs.gov/pub/irs-pdf/fw9.pdf'],
}, 'API_KEY');

Related Guides

Complete document creation and signing process in your Angular SaaS

Callbacks

onLoad optional Event emitter

Event emitted on loading the form builder template data.

Example: handleLoad($event)

onUpload optional Event emitter

Event emitted on uploading a document to the template.

Example: handleUpload($event)

onSend optional Event emitter

Event emitted on sending documents for signature to recipients.

Example: handleSend($event)

onChange optional Function

Function to be called when changes are made to the template form.

Example: handleChange($event)

onSave optional Event emitter

Event emitted on saving changes of the template form.

Example: handleSave($event)

Live Example

Custom Fields

Required Fields

Only Defined Fields

Preview

Autosave

Sign Yourself Button

Custom CSS

Language