### Node.js Fetch API Example

Source: https://www.docuseal.com/docs/api

Example demonstrating how to use the fetch API in Node.js. Ensure you have the 'node-fetch' package installed.

```javascript
const fetch = require("node-fetch");

```

--------------------------------

### Change Callback Example

Source: https://www.docuseal.com/docs/embedded/signature/vue

Example of a function to be called when the signature changes.

```javascript
onSignatureChange
```

--------------------------------

### Install Codex Plugin

Source: https://www.docuseal.com/docs/embedded/builder

Install the DocuSeal plugin for Codex by downloading from the marketplace and activating within Codex.

```bash
Copy  Copied 
```

```bash
Copy  Copied 
```

```bash
Copy  Copied 
```

--------------------------------

### Submission Webhook Example

Source: https://www.docuseal.com/docs/api

Example payload for a submission webhook event.

```APIDOC
## Submission Webhook

### Request Example

```json
{
  "created_at": "2024-05-26T17:32:33.447Z",
  "updated_at": "2024-05-26T17:32:33.447Z",
  "source": "invite",
  "submitters_order": "random",
  "audit_log_url": null,
  "combined_document_url": null,
  "submitters": [
    {
      "id": 1,
      "submission_id": 1,
      "uuid": "6b92a2d0-b511-4678-bccf-1e8a131f5030",
      "email": "mike@example.com",
      "slug": "S6fWFYRZus6suW",
      "sent_at": null,
      "opened_at": null,
      "completed_at": null,
      "declined_at": null,
      "created_at": "2024-05-26T17:32:33.466Z",
      "updated_at": "2024-05-26T17:32:33.466Z",
      "name": null,
      "phone": null,
      "external_id": null,
      "metadata": {},
      "status": "awaiting",
      "values": [],
      "documents": [],
      "preferences": {},
      "role": "First Party"
    }
  ],
  "template": {
    "id": 1,
    "name": "Sample Document",
    "created_at": "2024-05-26T16:57:28.092Z",
    "updated_at": "2024-05-26T16:58:07.314Z",
    "external_id": null,
    "folder_name": "Default"
  },
  "variables": {
    "custom_variable": "value"
  },
  "created_by_user": {
    "id": 1,
    "first_name": "John",
    "last_name": "Doe",
    "email": "john.doe@example.com"
  },
  "submission_events": [],
  "documents": [],
  "status": "pending",
  "completed_at": null
}
```
```

--------------------------------

### Example PostgreSQL Connection String

Source: https://www.docuseal.com/docs/deploying-docuseal-on-google-cloud-run

An example of a fully formed PostgreSQL connection string. This demonstrates how the placeholders from the format are replaced with actual values, including username, password, IP address, port, and database name.

```sql
postgresql://postgres:123456789@35.193.16.230:5432/docuseal_production
```

--------------------------------

### Install Angular Form Builder Plugin

Source: https://www.docuseal.com/docs/embedded/builder/angular

Install the plugin in your project using npm.

```bash
npm install @docuseal/angular-form-builder
```

--------------------------------

### Example Template Response

Source: https://www.docuseal.com/docs/api

This is an example of the JSON response received after successfully creating or retrieving a PDF template.

```json
{
  "id": 5,
  "slug": "s3ff992CoPjvaX",
  "name": "Demo PDF",
  "schema": [
    {
      "name": "Demo PDF",
      "attachment_uuid": "48d2998f-266b-47e4-beb2-250ab7ccebdf"
    }
  ],
  "fields": [
    {
      "name": "Name",
      "type": "text",
      "required": true,
      "uuid": "d0bf3c0c-1928-40c8-80f9-d9f3c6ad4eff",
      "submitter_uuid": "0b0bff58-bc9a-475d-b4a9-2f3e5323faf7",
      "areas": [
        {
          "page": 1,
          "attachment_uuid": "48d2998f-266b-47e4-beb2-250ab7ccebdf",
          "x": 0.403158189124654,
          "y": 0.04211750189825361,
          "w": 0.100684625476058,
          "h": 0.01423690205011389
        }
      ]
    }
  ],
  "submitters": [
    {
      "name": "Submitter",
      "uuid": "0b0bff58-bc9a-475d-b4a9-2f3e5323faf7"
    }
  ],
  "author_id": 1,
  "archived_at": null,
  "created_at": "2023-12-14T15:50:21.799Z",
  "updated_at": "2023-12-14T15:50:21.799Z",
  "source": "api",
  "folder_id": 1,
  "folder_name": "Default",
  "external_id": "c248ffba-ef81-48b7-8e17-e3cecda1c1c5",
  "shared_link": true,
  "author": {
    "id": 1,
    "first_name": "John",
    "last_name": "Doe",
    "email": "john.doe@example.com"
  },
  "documents": [
    {
      "id": 7,
      "uuid": "48d2998f-266b-47e4-beb2-250ab7ccebdf",
      "url": "https://docuseal.com/file/hash/Demo%20PDF.pdf"
    }
  ]
}
```

--------------------------------

### Save Callback Example

Source: https://www.docuseal.com/docs/embedded/signature/vue

Example of a function to be called when the signature is saved. Requires the data-with-submit attribute to be enabled.

```javascript
onSignatureSave
```

--------------------------------

### Install Plugin for Claude Code

Source: https://www.docuseal.com/docs/embedded/builder/js

Use this command to install the plugin in your project for Claude Code integration.

```bash
npm install @docuseal/docuseal-builder
```

--------------------------------

### Install Universal Code Skills

Source: https://www.docuseal.com/docs/embedded/builder/js

Command to install universal code skills that work with various code agents like Cursor, GitHub Copilot, and Gemini CLI.

```bash
docuseal install
```

--------------------------------

### Install Claude Code Plugin

Source: https://www.docuseal.com/docs/embedded/form

Command to install the Claude Code plugin in your project.

```bash
Copy  Copied 
```

--------------------------------

### Example Submission Response

Source: https://www.docuseal.com/docs/api

An example JSON response structure for a successful submission retrieval request.

```json
{
  "data": [
    {
      "id": 1,
      "name": null,
      "source": "link",
      "submitters_order": "random",
      "slug": "VyL4szTwYoSvXq",
      "status": "completed",
      "audit_log_url": "https://docuseal.com/file/hash/example.pdf",
      "combined_document_url": null,
      "expire_at": null,
      "completed_at": "2023-12-10T15:49:21.895Z",
      "created_at": "2023-12-10T15:48:17.166Z",
      "updated_at": "2023-12-10T15:49:21.895Z",
      "archived_at": null,
      "submitters": [
        {
          "id": 1,
          "submission_id": 1,
          "uuid": "0954d146-db8c-4772-aafe-2effc7c0e0c0",
          "email": "submitter@example.com",
          "slug": "dsEeWrhRD8yDXT",
          "sent_at": "2023-12-14T15:45:49.011Z",
          "opened_at": "2023-12-14T15:48:23.011Z",
          "completed_at": "2023-12-14T15:49:21.701Z",
          "declined_at": null,
          "created_at": "2023-12-10T15:48:17.173Z",
          "updated_at": "2023-12-14T15:50:21.799Z",
          "name": "John Doe",
          "phone": "+1234567890",
          "status": "completed",
          "role": "First Party",
          "metadata": {},
          "preferences": {}
        }
      ],
      "template": {
        "id": 1,
        "name": "Example Template",
        "external_id": "Temp123",
        "folder_name": "Default",
        "created_at": "2023-12-14T15:50:21.799Z",
        "updated_at": "2023-12-14T15:50:21.799Z"
      },
      "created_by_user": {
        "id": 1,
        "first_name": "Bob",
        "last_name": "Smith",
        "email": "bob.smith@example.com"
      }
    }
  ],
  "pagination": {
    "count": 1,
    "next": 1,
    "prev": 1
  }
}
```

--------------------------------

### Form Initialization Callback

Source: https://www.docuseal.com/docs/embedded/form/react

A function to be called when the form component is initialized. Use this for setup tasks.

```javascript
onInit: () => { console.log("Loaded") }
```

--------------------------------

### Type Buttons Container Class Example

Source: https://www.docuseal.com/docs/embedded/signature/vue

Example of a custom CSS class for the type buttons container.

```html
flex gap-2 mb-4 justify-center
```

--------------------------------

### Basic Vue.js Document Builder Setup

Source: https://www.docuseal.com/docs/embedded/builder/vue

Demonstrates a basic integration of the Vue.js Document Builder component. This snippet shows how to include the component and set essential configuration props.

```vue
<template>
  <DocuSignBuilder
    :fields="fields"
    :required-fields="requiredFields"
    @load="onBuilderLoad"
    @save="onBuilderSave"
  />
</template>

<script>
import DocuSignBuilder from 'docuseal-vue';

export default {
  components: {
    DocuSignBuilder
  },
  data() {
    return {
      fields: [
        // Define your fields here
      ],
      requiredFields: [
        // Define your required fields here
      ]
    };
  },
  methods: {
    onBuilderLoad(data) {
      console.log('Builder loaded with data:', data);
    },
    onBuilderSave(data) {
      console.log('Builder saved with data:', data);
    }
  }
};
</script>
```

--------------------------------

### Example API Response for a Submission

Source: https://www.docuseal.com/docs/api

This is an example JSON response representing a completed submission, including details about submitters, documents, and template information.

```json
{
  "id": 1,
  "name": null,
  "source": "link",
  "submitters_order": "random",
  "slug": "VyL4szTwYoSvXq",
  "audit_log_url": "https://docuseal.com/blobs/proxy/hash/example.pdf",
  "combined_document_url": null,
  "completed_at": "2023-12-14T15:49:21.701Z",
  "expire_at": null,
  "created_at": "2023-12-10T15:48:17.166Z",
  "updated_at": "2023-12-10T15:49:21.895Z",
  "archived_at": null,
  "submitters": [
    {
      "id": 1,
      "submission_id": 1,
      "uuid": "0954d146-db8c-4772-aafe-2effc7c0e0c0",
      "email": "submitter@example.com",
      "slug": "dsEeWrhRD8yDXT",
      "sent_at": "2023-12-14T15:45:49.011Z",
      "opened_at": "2023-12-14T15:48:23.011Z",
      "completed_at": "2023-12-14T15:49:21.701Z",
      "declined_at": null,
      "created_at": "2023-12-14T15:48:17.173Z",
      "updated_at": "2023-12-14T15:50:21.799Z",
      "name": "John Doe",
      "phone": "+1234567890",
      "external_id": null,
      "status": "completed",
      "metadata": {},
      "values": [
        {
          "field": "Full Name",
          "value": "John Doe"
        }
      ],
      "documents": [
        {
          "name": "example",
          "url": "https://docuseal.com/blobs/proxy/hash/example.pdf"
        }
      ],
      "role": "First Party"
    }
  ],
  "template": {
    "id": 1,
    "name": "Example Template",
    "external_id": "Temp123",
    "folder_name": "Default",
    "created_at": "2023-12-14T15:50:21.799Z",
    "updated_at": "2023-12-14T15:50:21.799Z"
  },
  "created_by_user": {
    "id": 1,
    "first_name": "Bob",
    "last_name": "Smith",
    "email": "bob.smith@example.com"
  },
  "submission_events": [
    {
      "id": 1,
      "submitter_id": 2,
      "event_type": "view_form",
      "event_timestamp": "2023-12-14T15:47:24.566Z",
      "data": {}
    }
  ],
  "documents": [
    {
      "name": "example",
      "url": "https://docuseal.com/file/hash/example.pdf"
    }
  ],
  "status": "completed"
}
```

--------------------------------

### Canvas Style Example

Source: https://www.docuseal.com/docs/embedded/signature/vue

Example of custom CSS styles for the canvas element.

```html
bg-white border border-base-300 rounded-2xl w-full
```

--------------------------------

### Example API Response for Submission

Source: https://www.docuseal.com/docs/api

This is an example of the JSON response received after creating a submission via the API. It includes details about the submission, submitters, and fields.

```json
{
  "id": 5,
  "name": "Test Submission",
  "submitters": [
    {
      "id": 1,
      "uuid": "884d545b-3396-49f1-8c07-05b8b2a78755",
      "email": "john.doe@example.com",
      "slug": "pAMimKcyrLjqVt",
      "sent_at": "2025-06-02T15:55:51.310Z",
      "opened_at": null,
      "completed_at": null,
      "declined_at": null,
      "created_at": "2025-06-02T15:55:50.320Z",
      "updated_at": "2025-06-02T15:55:50.320Z",
      "name": "string",
      "phone": "+1234567890",
      "external_id": "2321",
      "metadata": {
        "customData": "custom value"
      },
      "status": "sent",
      "values": [
        {
          "field": "Full Name",
          "value": "John Doe"
        }
      ],
      "preferences": {
        "send_email": true,
        "send_sms": false,
        "reply_to": "reply@example.com",
        "completed_redirect_url": "https://example.com/"
      },
      "role": "First Party",
      "embed_src": "https://docuseal.com/s/pAMimKcyrLjqVt"
    }
  ],
  "source": "api",
  "submitters_order": "preserved",
  "status": "pending",
  "schema": [
    {
      "name": "Demo PDF",
      "attachment_uuid": "48d2998f-266b-47e4-beb2-250ab7ccebdf"
    }
  ],
  "fields": [
    {
      "name": "Name",
      "type": "text",
      "required": true,
      "uuid": "d0bf3c0c-1928-40c8-80f9-d9f3c6ad4eff",
      "submitter_uuid": "0b0bff58-bc9a-475d-b4a9-2f3e5323faf7",
      "areas": [
        {
          "page": 1,
          "attachment_uuid": "48d2998f-266b-47e4-beb2-250ab7ccebdf",
          "x": 0.403158189124654,
          "y": 0.04211750189825361,
          "w": 0.100684625476058,
          "h": 0.01423690205011389
        }
      ]
    }
  ],
  "expire_at": null,
  "created_at": "2025-06-02T15:55:50.270Z"
}
```

--------------------------------

### Get Submission Documents (Node.js)

Source: https://www.docuseal.com/docs/api

This Node.js snippet demonstrates how to fetch submission documents using the DocuSeal API. Ensure you have the 'node-fetch' package installed. Replace 'API_KEY' with your actual API key.

```javascript
const fetch = require("node-fetch");

const resp = await fetch("https://api.docuseal.com/submissions/1001/documents", {
  method: "GET",
  headers: {
    "X-Auth-Token": "API_KEY"
  }
});

const submission = await resp.json();
```

--------------------------------

### Run New DocuSeal Docker Container

Source: https://www.docuseal.com/docs/update-docuseal-to-the-latest-version

Start a new DocuSeal container using the latest image. This command maps port 3000 and mounts the current directory to /data.

```bash
docker run --name docuseal -p 3000:3000 -v.:/data docuseal/docuseal

```

--------------------------------

### Example API Response

Source: https://www.docuseal.com/docs/api

A sample JSON response from the DocuSeal API, illustrating the structure of submission data.

```json
{
  "id": 1,
  "submission_id": 12,
  "uuid": "0954d146-db8c-4772-aafe-2effc7c0e0c0",
  "email": "submitter@example.com",
  "slug": "dsEeWrhRD8yDXT",
  "sent_at": "2023-12-14T15:45:49.011Z",
  "opened_at": "2023-12-14T15:48:23.011Z",
  "completed_at": "2023-12-10T15:49:21.701Z",
  "declined_at": null,
  "created_at": "2023-12-14T15:48:17.173Z",
  "updated_at": "2023-12-14T15:50:21.799Z",
  "name": "John Doe",
  "phone": "+1234567890",
  "status": "completed",
  "external_id": null,
  "metadata": {},
  "preferences": {},
  "values": [
    {
      "field": "Full Name",
      "value": "John Doe"
    }
  ],
  "documents": [],
  "role": "First Party",
  "embed_src": "https://docuseal.com/s/pAMimKcyrLjqVt"
}
```

--------------------------------

### List All Submissions (Node.js)

Source: https://www.docuseal.com/docs/api

This Node.js example demonstrates how to fetch a list of all submissions using the DocuSeal API. It includes setting the authentication header and parsing the JSON response.

```javascript
const fetch = require("node-fetch");

const resp = await fetch("https://api.docuseal.com/submissions", {
  method: "GET",
  headers: {
    "X-Auth-Token": "API_KEY"
  }
});

const { data, pagination } = await resp.json();
```

--------------------------------

### Draw Type Button Class Example

Source: https://www.docuseal.com/docs/embedded/signature/vue

Example of a custom CSS class for the draw type button.

```html
flex items-center justify-center py-3 w-40 uppercase border-neutral-focus space-x-2 border rounded-3xl cursor-pointer hover:bg-neutral hover:text-white hover:font-semibold
```

--------------------------------

### Form Initialization Callback

Source: https://www.docuseal.com/docs/embedded/form/vue

Register a function to be called when the form component is initialized. Use this for setup logic.

```html
<form @init="onFormLoad"></form>
```

--------------------------------

### Log in to Heroku CLI

Source: https://www.docuseal.com/docs/update-docuseal-on-heroku

Use this command to log in to your Heroku account via the command line interface. Ensure you have the Heroku CLI installed.

```bash
heroku login
```

--------------------------------

### Example API Response for a Template

Source: https://www.docuseal.com/docs/api

This JSON object represents the structure of a template retrieved via the API.

```json
{
  "id": 3,
  "slug": "ZQpF222rFBv71q",
  "name": "Demo Template",
  "schema": [
    {
      "name": "Demo Template",
      "attachment_uuid": "09a8bc73-a7a9-4fd9-8173-95752bdf0af5"
    }
  ],
  "fields": [
    {
      "name": "Name",
      "required": false,
      "type": "text",
      "uuid": "a06c49f6-4b20-4442-ac7f-c1040d2cf1ac",
      "submitter_uuid": "93ba628c-5913-4456-a1e9-1a81ad7444b3",
      "areas": [
        {
          "page": 0,
          "attachment_uuid": "09a8bc73-a7a9-4fd9-8173-95752bdf0af5",
          "x": 0.403158189124654,
          "y": 0.04211750189825361,
          "w": 0.100684625476058,
          "h": 0.01423690205011389
        }
      ]
    }
  ],
  "submitters": [
    {
      "name": "Submitter",
      "uuid": "93ba628c-5913-4456-a1e9-1a81ad7444b3"
    }
  ],
  "author_id": 1,
  "archived_at": null,
  "created_at": "2023-12-14T15:50:21.799Z",
  "updated_at": "2023-12-14T15:50:21.799Z",
  "source": "api",
  "folder_id": 1,
  "folder_name": "Default",
  "external_id": "f0b4714f-e44b-4993-905b-68b4451eef8c",
  "author": {
    "id": 1,
    "first_name": "John",
    "last_name": "Doe",
    "email": "john.doe@example.com"
  },
  "documents": [
    {
      "id": 3,
      "uuid": "09a8bc73-a7a9-4fd9-8173-95752bdf0af5",
      "url": "https://docuseal.com/file/hash/Test%20Template.pdf"
    }
  ]
}
```

--------------------------------

### Document Builder Callbacks for Event Handling

Source: https://www.docuseal.com/docs/embedded/builder/vue

Provides examples of callback functions that can be triggered by specific events within the Document Builder. These functions allow for dynamic interaction and data handling.

```vue
@load="onBuilderLoad"
@upload="onBuilderUpload"
@send="onBuilderSend"
@change="onBuilderChange"
@save="onBuilderSave"
```

--------------------------------

### Example API Response Structure

Source: https://www.docuseal.com/docs/api

This is an example of the JSON response structure when retrieving template data from the DocuSeal API. It includes details about the template, its schema, fields, and associated documents.

```json
{
  "data": [
    {
      "id": 1,
      "slug": "iRgjDX7WDK6BRo",
      "name": "Example Template",
      "preferences": {},
      "schema": [
        {
          "attachment_uuid": "d94e615f-76e3-46d5-8f98-36bdacb8664a",
          "name": "example-document"
        }
      ],
      "fields": [
        {
          "uuid": "594bdf04-d941-4ca6-aa73-93e61d625c02",
          "submitter_uuid": "0954d146-db8c-4772-aafe-2effc7c0e0c0",
          "name": "Full Name",
          "type": "text",
          "required": true,
          "preferences": {},
          "areas": [
            {
              "x": 0.2638888888888889,
              "y": 0.168958742632613,
              "w": 0.325,
              "h": 0.04616895874263263,
              "attachment_uuid": "d94e615f-76e3-46d5-8f98-36bdacb8664a",
              "page": 0
            }
          ]
        }
      ],
      "submitters": [
        {
          "name": "First Party",
          "uuid": "0954d146-db8c-4772-aafe-2effc7c0e0c0"
        }
      ],
      "author_id": 1,
      "archived_at": null,
      "created_at": "2023-12-14T15:21:57.375Z",
      "updated_at": "2023-12-14T15:22:55.094Z",
      "source": "native",
      "folder_id": 1,
      "folder_name": "Default",
      "external_id": "c248ffba-ef81-48b7-8e17-e3cecda1c1c5",
      "shared_link": true,
      "author": {
        "id": 1,
        "first_name": "John",
        "last_name": "Doe",
        "email": "john.doe@example.com"
      },
      "documents": [
        {
          "id": 5,
          "uuid": "d94e615f-76e3-46d5-8f98-36bdacb8664a",
          "url": "https://docuseal.com/file/hash/sample-document.pdf",
          "preview_image_url": "https://docuseal.com/file/hash/0.jpg",
          "filename": "example-document.pdf"
        }
      ]
    }
  ],
  "pagination": {
    "count": 1,
    "next": 1,
    "prev": 2
  }
}
```

--------------------------------

### Integrate Signature Maker and Handle Change Event

Source: https://www.docuseal.com/docs/embedded/signature/js

Embed the signature maker component using its HTML tag and listen for the 'change' event to capture the signature as a base64 string. This example shows how to send the signature data to a server endpoint.

```html
<signature-maker id="signatureMaker"></signature-maker>

<script>
  window.signatureMaker.addEventListener('change', (e) => {
    if (e.detail.base64) {
      fetch('/background-save-signature', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ file: e.detail.base64 }),
      });
    } else {
      console.log('No signature to save');
    }
  })
</script>
```

--------------------------------

### Example API Response for a Template

Source: https://www.docuseal.com/docs/api

This JSON object represents a typical response when retrieving or creating a template via the API. It includes details about the template's schema, fields, and associated documents.

```json
{
  "id": 3,
  "slug": "ZQpF222rFBv71q",
  "name": "Demo Template",
  "schema": [
    {
      "name": "Demo Template",
      "attachment_uuid": "09a8bc73-a7a9-4fd9-8173-95752bdf0af5"
    }
  ],
  "fields": [
    {
      "name": "Name",
      "required": false,
      "type": "text",
      "uuid": "a06c49f6-4b20-4442-ac7f-c1040d2cf1ac",
      "submitter_uuid": "93ba628c-5913-4456-a1e9-1a81ad7444b3",
      "areas": [
        {
          "page": 0,
          "attachment_uuid": "09a8bc73-a7a9-4fd9-8173-95752bdf0af5",
          "x": 0.403158189124654,
          "y": 0.04211750189825361,
          "w": 0.100684625476058,
          "h": 0.01423690205011389
        }
      ]
    }
  ],
  "submitters": [
    {
      "name": "Submitter",
      "uuid": "93ba628c-5913-4456-a1e9-1a81ad7444b3"
    }
  ],
  "author_id": 1,
  "archived_at": null,
  "created_at": "2023-12-14T15:50:21.799Z",
  "updated_at": "2023-12-14T15:50:21.799Z",
  "source": "api",
  "folder_id": 1,
  "folder_name": "Default",
  "external_id": "f0b4714f-e44b-4993-905b-68b4451eef8c",
  "shared_link": true,
  "author": {
    "id": 1,
    "first_name": "John",
    "last_name": "Doe",
    "email": "john.doe@example.com"
  },
  "documents": [
    {
      "id": 3,
      "uuid": "09a8bc73-a7a9-4fd9-8173-95752bdf0af5",
      "url": "https://docuseal.com/file/hash/Test%20Template.pdf"
    }
  ]
}
```

--------------------------------

### Applying Custom CSS to Form

Source: https://www.docuseal.com/docs/embedded/form

Allows applying custom CSS styles to the form. Example targets the submit button.

```html
<docuseal-form data-custom-css="#submit_form_button { background-color: #d9d9d9; }"></docuseal-form>
```

--------------------------------

### Clone a Template using Node.js

Source: https://www.docuseal.com/docs/api

This snippet demonstrates how to clone an existing template using the DocuSeal API with Node.js. Ensure you have the 'node-fetch' library installed and replace 'API_KEY' with your actual authentication token.

```javascript
const fetch = require("node-fetch");

const resp = await fetch("https://api.docuseal.com/templates/1000001/clone", {
  method: "POST",
  headers: {
    "X-Auth-Token": "API_KEY"
  },
  body: JSON.stringify({
    name: "Cloned Template"
  })
});

const template = await resp.json();
```

--------------------------------

### Form Builder with Custom CSS and Language

Source: https://www.docuseal.com/docs/embedded/builder/react

This example shows how to apply custom CSS to the Form Builder and set a specific UI language. The `customCss` prop allows for styling specific elements, and the `language` prop supports multiple languages.

```javascript
import React from 'react';
import FormBuilder from '@docuseal/react-form-builder';

function App() {
  return (
    <div style={{ height: '100vh' }}>
      <FormBuilder
        language="es"
        customCss="#sign_yourself_button { background-color: #FFA500; }"
      />
    </div>
  );
}
```

--------------------------------

### Get a template

Source: https://www.docuseal.com/docs/api

The API endpoint provides the functionality to retrieve information about a document template.

```APIDOC
## GET /templates/{id}

### Description
Retrieves information about a specific document template.

### Method
GET

### Endpoint
/templates/{id}

### Parameters
#### Path Parameters
- **id** (Integer) - Required - The unique identifier of the document template.

### Request Example
```javascript
const fetch = require("node-fetch");

const resp = await fetch("https://api.docuseal.com/templates/1000001", {
  method: "GET",
  headers: {
    "X-Auth-Token": "API_KEY"
  }
});

const template = await resp.json();
```

### Response
#### Success Response (200)
- **id** (Integer) - The unique identifier of the template.
- **slug** (String) - A unique slug for the template.
- **name** (String) - The name of the template.
- **preferences** (Object) - Template-specific preferences.
- **schema** (Array) - An array of schema objects defining the template structure.
- **fields** (Array) - An array of field objects defining the form fields.
- **submitters** (Array) - An array of submitter objects.
- **author_id** (Integer) - The ID of the template author.
- **archived_at** (null) - Timestamp of archiving, or null if not archived.
- **created_at** (String) - Timestamp of creation.
- **updated_at** (String) - Timestamp of last update.
- **source** (String) - The source of the template.
- **folder_id** (Integer) - The ID of the folder the template belongs to.
- **folder_name** (String) - The name of the folder.
- **external_id** (String) - An external identifier for the template.
- **shared_link** (Boolean) - Indicates if a shared link is enabled.
- **author** (Object) - Information about the template author.
- **documents** (Array) - An array of document objects associated with the template.

#### Response Example
```json
{
  "id": 1,
  "slug": "iRgjDX7WDK6BRo",
  "name": "Example Template",
  "preferences": {},
  "schema": [
    {
      "attachment_uuid": "d94e615f-76e3-46d5-8f98-36bdacb8664a",
      "name": "example-document"
    }
  ],
  "fields": [
    {
      "uuid": "594bdf04-d941-4ca6-aa73-93e61d625c02",
      "submitter_uuid": "0954d146-db8c-4772-aafe-2effc7c0e0c0",
      "name": "Full Name",
      "type": "text",
      "required": true,
      "preferences": {},
      "areas": [
        {
          "x": 0.2638888888888889,
          "y": 0.168958742632613,
          "w": 0.325,
          "h": 0.04616895874263263,
          "attachment_uuid": "d94e615f-76e3-46d5-8f98-36bdacb8664a",
          "page": 0
        }
      ]
    }
  ],
  "submitters": [
    {
      "name": "First Party",
      "uuid": "0954d146-db8c-4772-aafe-2effc7c0e0c0"
    }
  ],
  "author_id": 1,
  "archived_at": null,
  "created_at": "2023-12-14T15:21:57.375Z",
  "updated_at": "2023-12-14T15:22:55.094Z",
  "source": "native",
  "folder_id": 1,
  "folder_name": "Default",
  "external_id": "c248ffba-ef81-48b7-8e17-e3cecda1c1c5",
  "shared_link": true,
  "author": {
    "id": 1,
    "first_name": "John",
    "last_name": "Doe",
    "email": "john.doe@example.com"
  },
  "documents": [
    {
      "id": 5,
      "uuid": "d94e615f-76e3-46d5-8f98-36bdacb8664a",
      "url": "https://docuseal.com/file/hash/sample-document.pdf",
      "preview_image_url": "https://docuseal.com/file/hash/0.jpg",
      "filename": "example-document.pdf"
    }
  ]
}
```
```

--------------------------------

### Example API Response for Archiving a Template

Source: https://www.docuseal.com/docs/api

This JSON object shows the response after successfully archiving a template. It includes the template's ID and the timestamp of archival.

```json
{
  "id": 1,
  "archived_at": "2023-12-14T15:50:21.799Z"
}
```

--------------------------------

### Form Builder with Customization Options

Source: https://www.docuseal.com/docs/embedded/builder/react

Demonstrates how to customize the Form Builder's appearance and behavior using various boolean props. This example enables custom fields, shows only defined fields, and disables autosave.

```javascript
import React from 'react';
import FormBuilder from '@docuseal/react-form-builder';

function App() {
  return (
    <div style={{ height: '100vh' }}>
      <FormBuilder
        withCustomFieldsTab={true}
        onlyDefinedFields={true}
        autosave={false}
        withSignYourselfButton={true}
        withFieldsDetection={true}
        withFieldsList={true}
        withDynamicDocuments={false}
        withDocumentsList={true}
        withUploadButton={true}
        withAddPageButton={false}
        withSendButton={true}
        withTitle={true}
        withRevisions={false}
        preview={false}
        inputMode={false}
        language="en"
      />
    </div>
  );
}
```

--------------------------------

### Example API Response for Submission Documents

Source: https://www.docuseal.com/docs/api

This JSON structure represents the response when retrieving documents for a submission, showing the names and URLs of the associated files.

```json
{
  "id": 1,
  "documents": [
    {
      "name": "example",
      "url": "https://docuseal.com/file/hash/example.pdf"
    }
  ]
}
```

--------------------------------

### Merge Templates using Node.js

Source: https://www.docuseal.com/docs/api

This Node.js snippet demonstrates how to merge multiple templates into a new one using the DocuSeal API. Ensure you have the 'node-fetch' package installed and replace 'API_KEY' with your actual authentication token.

```javascript
const fetch = require("node-fetch");

const resp = await fetch("https://api.docuseal.com/templates/merge", {
  method: "POST",
  headers: {
    "X-Auth-Token": "API_KEY"
  },
  body: JSON.stringify({
    template_ids: [
      321,
      432
    ],
    name: "Merged Template"
  })
});

const template = await resp.json();
```

--------------------------------

### Generate JWT Token on Backend

Source: https://www.docuseal.com/docs/embedded/builder/react

Example of generating a JWT token on the backend using Node.js and the 'jsonwebtoken' library. This token is required for initializing the DocuSealBuilder. The payload includes user and integration details, along with document URLs.

```javascript
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');

```

--------------------------------

### Example API Response for a Template

Source: https://www.docuseal.com/docs/api

This JSON object represents a typical response when retrieving details about a specific template from the DocuSeal API. It includes information about the template's schema, fields, submitters, and associated documents.

```json
{
  "id": 6,
  "slug": "Xc7opTqwwV9P7x",
  "name": "Cloned Template",
  "schema": [
    {
      "attachment_uuid": "68aa0716-61f0-4535-9ba4-6c00f835b080",
      "name": "sample-document"
    }
  ],
  "fields": [
    {
      "uuid": "93c7065b-1b19-4551-b67b-9946bf1c11c9",
      "submitter_uuid": "ad128012-756d-4d17-b728-6f6b1d482bb5",
      "name": "Name",
      "type": "text",
      "required": true,
      "areas": [
        {
          "page": 0,
          "attachment_uuid": "09a8bc73-a7a9-4fd9-8173-95752bdf0af5",
          "x": 0.403158189124654,
          "y": 0.04211750189825361,
          "w": 0.100684625476058,
          "h": 0.01423690205011389
        }
      ]
    }
  ],
  "submitters": [
    {
      "name": "First Party",
      "uuid": "ad128012-756d-4d17-b728-6f6b1d482bb5"
    }
  ],
  "author_id": 1,
  "archived_at": null,
  "created_at": "2023-12-14T15:50:21.799Z",
  "updated_at": "2023-12-14T15:50:21.799Z",
  "source": "api",
  "folder_id": 2,
  "folder_name": "Default",
  "external_id": null,
  "shared_link": true,
  "author": {
    "id": 1,
    "first_name": "John",
    "last_name": "Doe",
    "email": "john.doe@example.com"
  },
  "documents": [
    {
      "id": 9,
      "uuid": "ded62277-9705-4fac-b5dc-58325d4102eb",
      "url": "https://docuseal.com/file/hash/sample-document.pdf",
      "filename": "sample-document.pdf"
    }
  ]
}
```

--------------------------------

### Navigate to Repository Folder

Source: https://www.docuseal.com/docs/update-docuseal-on-heroku

Change your current directory to the cloned repository folder to access project files and run git commands.

```bash
cd docuseal-heroku
```

--------------------------------

### Draw Type Button Active Class Example

Source: https://www.docuseal.com/docs/embedded/signature/vue

Example of a custom CSS class for the active draw type button.

```html
bg-neutral text-white font-semibold
```