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 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 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 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 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 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 Function

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

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

onUpload Function

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

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

onSend Function

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

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

onChange Function

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

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

onSave 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 Function

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

Example: onBuilderLoad

@upload Function

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

Example: onBuilderUpload

@send Function

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

Example: onBuilderSend

@change Function

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

Example: onBuilderChange

@save 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 Event emitter

Event emitted on loading the form builder template data.

Example: handleLoad($event)

onUpload Event emitter

Event emitted on uploading a document to the template.

Example: handleUpload($event)

onSend Event emitter

Event emitted on sending documents for signature to recipients.

Example: handleSend($event)

onChange Function

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

Example: handleChange($event)

onSave 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