Embed document signing into Angular App

1

Document signing form for specified email

Open your terminal or command prompt and navigate to your project directory. Then, run the following command to install the @docuseal/angular package

Once the installation is complete, you'll need to import the component in the relevant file where you intend to use DocuSeal. With the component imported, you can now use <docuseal-form> within your Angular template wherever you want to integrate the DocuSeal functionality:

  • [src]: This prop specifies the URL of the DocuSeal form that you want to embed. Each template form on DocuSeal has a unique URL with slug key. "Slug" key can be obtained via the /templates API or copied from the template page in the web UI.
  • [email]: This prop is used to initialize the form for a specified email address for the signer.

Signing forms initialized via template URL and email work only if the template contains a single signing party. For signing forms with multiple parties all signers should be initiated via the API.

import { Component } from '@angular/core';
import { DocusealFormComponent } from '@docuseal/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DocusealFormComponent],
  template: `
    <div class="app">
      <docuseal-form
        src="https://docuseal.com/d/LEVGR9rhZYf86M"
        email="signer@example.com">
      </docuseal-form>
    </div>
  `
})
export class AppComponent {}
2

Document signing form initiated via API

Prerequisites:

Sign Up and Obtain API Key: Visit DocuSeal API Console to obtain your API key.

Template ID: Identify the template ID you want to use for the form.

POST request to https://api.docuseal.com/submissions. Include the obtained API key in the headers along with the content type ('application/json'). Specify the template_id and submitter details:

  • send_email: set to false to disable automated emails form the platform.
  • email: pass email address of each individual party in the document signing process.
  • role: specifies the designated role of each participant (e.g., 'Director', 'Contractor'). Pass role names defined in the template form.

Upon a successful request, the API will respond with a an array of submitters with slug keys to be used in the embed form.

When utilizing the ${slug} within the <docuseal-form> component, ensure that you load "slug" from your back-end API with the actual key obtained from the DocuSeal API response. This "slug" key acts as a reference point to link the embedded form in your Angular app to the specific submitter document form created through the DocuSeal platform.

import express from 'express';
import axios from 'axios';

const app = express();
const API_KEY = 'YOUR_API_KEY';

app.post('/your_backend/api/init_form', async (req, res) => {
  const submissionData = {
    template_id: 123,
    send_email: false,
    submitters: [
      {
        email: 'john.doe@example.com',
        role: 'Director'
      },
      {
        email: 'roe.moe@example.com',
        role: 'Contractor'
      }
    ]
  };

  const response = await axios.request({
    method: 'POST',
    url: 'https://api.docuseal.com/submissions',
    headers: {
      'X-Auth-Token': API_KEY,
      'content-type': 'application/json'
    },
    data: submissionData
  });

  const slug = response.data[0].slug; // Extracting the slug from the response
  res.json({ slug }); // Sending the slug in the response
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DocusealFormComponent } from '@docuseal/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DocusealFormComponent],
  template: `
    <div>
      <ng-container *ngIf="slug; else loading">
        <docuseal-form [src]="'https://docuseal.com/s/' + slug"></docuseal-form>
      </ng-container>
      <ng-template #loading>
        <p>Loading...</p>
      </ng-template>
    </div>
  `
})

export class AppComponent implements OnInit {
  slug: string | null = null;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.initForm();
  }

  initForm() {
    this.http.post<{ slug: string }>('/your_backend/api/init_form', {})
      .subscribe({
        next: (data) => {
          this.slug = data.slug;
        }
      });
  }
}
3

Styling form with custom CSS

Styling certain elements of a form is achievable using CSS styles.

Pass the CSS styles as a string to the customCss property of the docuseal-form component.

For customizing the form, use the following id-selectors:

  • #form_container
  • #minimize_form_button
  • #submit_form_button

Learn more:

Embed API Reference

REST API Reference

Angular package on GitHub

Embedded Demo App

import { Component } from '@angular/core';
import { DocusealFormComponent } from '@docuseal/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DocusealFormComponent],
  template: `
    <div class="app">
      <docuseal-form
        src="https://docuseal.com/d/LEVGR9rhZYf86M"
        email="signer@example.com">
        [customCss]="customCss"
      </docuseal-form>
    </div>
  `
})
export class AppComponent {
  customCss = `
    #form_container {
      background-color: #ededed;
    }

    #minimize_form_button {
      color: #FFA500;
    }

    #submit_form_button {
      background-color: #FFA500;
      border-color: #F28C28;
    }
  `
}