# Embedded Document Signing

Use DocuSeal embedded components to easily implement document signing in your web or mobile apps

[Try it Now](https://www.docuseal.com/docs/embedded/form.md)

## AI plugins

### Add to Claude Code

1. Add the plugin repository:

```bash
claude plugin marketplace add docusealco/docuseal-agent-skills
```

2. Install the plugin in your project:

```bash
claude plugin install docuseal@docuseal-agent-skills
```

### Add to Codex

1. Add the plugin repository:

```bash
codex plugin marketplace add docusealco/docuseal-agent-skills
```

2. Install the plugin in your project:

```bash
codex plugin add docuseal@docuseal-agent-skills
```

### Add to Hermes Agent

Install the CLI skill:

```bash
hermes skills install docusealco/docuseal-agent-skills/skills/docuseal-cli
```

Hermes prompts for `DOCUSEAL_API_KEY` on first use and passes it through to the terminal sandbox.

### Add Code Skills

Universal skills work in any code agent (Cursor, GitHub Copilot, Gemini CLI and many others).

1. Run the install command:

```bash
npx skills add docusealco/docuseal-agent-skills --skill docuseal-code
```

2. Select "Global" or "Project" installation and proceed through the wizard.

## Built for Developers

Save precious development hours with easy-to-use open-source embedding components for developers.

## For React Apps

Effortlessly incorporate DocuSeal's React components into your application, providing you with the flexibility to tailor them precisely to your requirements, ensuring a cohesive user experience.

[View on GitHub](https://github.com/docusealco/docuseal-react)

 
```
import React from "react"
import { DocusealForm } from '@docuseal/react'

export function App() {
  return (
    <div className="app">
      <DocusealForm
        src="https://docuseal.com/d/LEVGR9rhZYf86M"
        email="signer@example.com"
        onComplete={(data) => console.log(data)}
      />
    </div>
  );
}
```

 
```
<template>
  <DocusealForm
    :src="'https://docuseal.com/d/LEVGR9rhZYf86M'"
    :email="'signer@example.com'"
  />
</template>
<script>
import { DocusealForm } from '@docuseal/vue'

export default {
  name: 'App',
  components: {
    DocusealForm
  },
}
</script>
```

## For Vue Apps

In addition to React, we also offer tailored components for Vue, allowing you to seamlessly integrate and customize them to align with your application's needs.

[View on GitHub](https://github.com/docusealco/docuseal-vue)

## For Angular Apps

Just as with React and Vue, effortlessly incorporate DocuSeal's Angular components into your application for a seamless integration and a tailored user experience.

[View on GitHub](https://github.com/docusealco/docuseal-angular)

 
```
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 {}
```

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

<docuseal-form
  id="docusealForm"
  data-src="https://docuseal.com/d/{{ template_slug }}"
  data-email="{{ signer_email }}">
</docuseal-form>

<script>
  window.docusealForm.addEventListener('completed', (e) => {
    console.log(e.detail)
  })
</script>
```

## For JavaScript

Easily integrate DocuSeal's web components into any framework with our JavaScript components for a seamless, customizable experience.

## React Native Apps Integration

The Signing Form can be seamlessly integrated into React Native applications. Test its practicality and efficiency on Expo Snack and discover a convenient method for adding document signing features.

[Tap to Play](https://snack.expo.dev/@docuseal/docuseal-demo-app?platform=ios)  
[View on GitHub](https://github.com/docusealco/docuseal-react-native)

## Flutter Apps Integration

Discover the ease of integrating the DocuSeal Signing Form into your Flutter applications. This integration not only streamlines the document signing process but also brings a level of efficiency and sophistication to your app.

[View on GitHub](https://github.com/docusealco/docuseal-flutter-example)

## API and Embedding Pricing

Start for free and pay only for what you use. No contracts required.

### Sandbox

 Basic Plan 

$0/ document

Free unlimited API and Embedding for testing

[Get Started](https://docuseal.com/sign_up?redir=https%3A%2F%2Fconsole.docuseal.com%2Fapi)

### Production

 Pro Plan 

$0.20/ document  

Per document signed via API or Embedding, upgrade to Pro plan to start.

[Sign up for Pro plan](https://docuseal.com/sign_up?redir=https%3A%2F%2Fconsole.docuseal.com%2Fplans)

## Frequently Asked Questions

### Is the Pro plan priced per recipient that signs the document?

 No. By user we mean only a Web UI seat for a user who needs access to DocuSeal's app with an email and password to send and manage documents or to access the API key. 

### How does DocuSeal API and Embedding pricing work?

DocuSeal provides API and Embedding features as a part of the Pro Plan. In order to get the license keys for API and Embedding you need to purchase at least one Pro seat which is $20/month.

Below are some examples on how API pricing works. The pricing is based on the number of documents signed.

**Example 1:**

You are a SaaS business looking to implement document signing capabilities for your app as a part of the onboarding process. You expect 200 documents signed by your clients per month.

Your monthly pricing would look like this:

Pro $20/user/month: $20  
200 API documents signed/month: 200 documents \* $0.2 = $40

**Total monthly cost = $20 + $40 = $60/month**
 **Example 2:**

You're developing document signing for 5 of your clients. For each client you want to provide a separate tenant admin account with their own password and full access to the DocuSeal app with API keys and Webhook URL settings. You expect to sign 1000 documents per month from 5 clients in total.

Your monthly pricing would look like this:

Pro 1 Super Admin - $20/month  
Pro 5 Tenant Admin - $20 \* 5 = $100/month  
1000 API documents signed/month = $0.2 \* 1000 = $200/month

**Total monthly cost = $20 + $100 + $200 = $320/month**

### Is the API pricing based on the number of signed documents?

 Yes. API and embedding pricing are based on the number of documents signed. A single document submission might include multiple files signed by multiple parties - this counts as a single $0.20 document completion. 

### How does support for API and Embedding work?

 We can help you with DocuSeal integration and embedding. We are very responsive, so you will usually hear from us within a few hours via [support@docuseal.com](mailto:support@docuseal.com) or [Discord](https://discord.gg/qygYCDGck9). 

### Are API and Embedding available on-premises?

 Yes, all DocuSeal API and Embedding integration features are available in both Pro On-Premises and Pro Cloud. The same API and Embedding fees per document apply to Pro On-Premises as well as Pro Cloud. 

### Do you offer volume discounts?

 Yes, we offer tiered volume discounts based on the number of API or Embedding documents, as well as the number of user seats. Email [sales@docuseal.com](mailto:sales@docuseal.com) for a custom quote, or [schedule a call](https://www.docuseal.com/contact.md) with sales. 

## Get Started with Embedding Today
[Get started for Free](https://docuseal.com/sign_up?redir=https%3A%2F%2Fconsole.docuseal.com%2Fapi)

No CC required