---
title: "White-labeled editor"
url: "https://docs.signnow.com/docs/white-labeled-editor"
type: "page"
section: "Documentation"
slug: "white-labeled-editor"
---

# White-labeled editor

# White-labeled editor

This guide focuses on the document creator. It covers branding and embedding the document editor, allowing users to prepare documents directly within your application.

## Step 1. Upload a document

Upload a document to SignNow. We will upload the DOCX Purchase agreement with text tags. When a signer opens the document for signature, the text tags will convert to fillable fields.

Learn more about [text tags](/docs/text-tags).

Use the [`POST /document/fieldextract`](/docs/document/operations/upload-document-with-text-tags) request.

**Request example**

```bash
curl --request POST \
--url https://api.signnow.com/document/fieldextract \
--header 'Authorization: Bearer {{access_token}}' \
--header 'Content-Type: multipart/form-data' \
--form 'file=@"/Users/user/Downloads/Purchase agreement.docx"'
```

The successful response retrieves the document ID.

Learn about other options to [upload a document](/docs/entities#step-1-upload-document).

## Step 2. Customize the application branding

To provide a consistent editing environment, create a brand and assign specific resources to your application:

- **General resource**: Defines the color scheme for the embedded editor.

- **Editor resource**: Controls the visibility of toolbars, buttons, and specific form fields.

### 2.1 Create a brand

Use the [`POST /v2/brands`](/docs/general-branding/operations/post-brands) request to create a brand container.

**Request example**

```bash
curl --request POST \
--url https://api.signnow.com/v2/brands \
--header 'Authorization: Bearer {{access_token}}' \
--header 'Content-Type: application/json' \
--data '{
    "title": "brand_for_application"
}'
```

The successful response retrieves the brand ID.

### 2.2 Add branding to the editor

Use the `general` and `editor` resources to hide standard SignNow elements and customize the editor appearance.

### **General resource**

Use the General resource to define the color palette.

Use the [`PUT /v2/brands/{{brand_id}}/resources/general`](/docs/general-branding/operations/put-v2-brands-brand_id-general) request to customize:

- Background colors (header and main background)
- Appearance of primary, secondary, default buttons, and dropdown menus
- Text and icons colors
- Hyperlink styling

**Request example**

```bash
curl --request PUT \
--url https://api.signnow.com/v2/brands/{{brand_id}}/resources/general \
--header 'Authorization: Bearer {{access_token}}' \
--header 'Content-Type: application/json' \
--data '{
  "main-background": "#f8fafc",
  "header": {
    "background": "#ffffff"
  },
  "buttons": {
    "primary": {
      "color": "#ffffff",
      "background": "#0e7490",
      "border": "#0e7490",
      "hover-background": "#155e75",
      "hover-color": "#ffffff",
      "hover-border": "#155e75",
      "active-background": "#164e63",
      "active-color": "#ffffff",
      "active-border": "#164e63"
    },
    "secondary": {
      "color": "#0e7490",
      "background": "#ecfeff",
      "border": "#a5f3fc",
      "hover-background": "#a5f3fc",
      "hover-color": "#155e75",
      "hover-border": "#67e8f9",
      "active-background": "#67e8f9",
      "active-color": "#155e75",
      "active-border": "#22d3ee"
    },
    "default": {
      "color": "#3f3f46",
      "background": "#ffffff",
      "border": "#e4e4e7",
      "hover-background": "#f4f4f5",
      "hover-color": "#27272a",
      "hover-border": "#d4d4d8",
      "active-background": "#e4e4e7",
      "active-color": "#18181b",
      "active-border": "#a1a1aa"
    },
    "dropdown": {
      "color": "#3f3f46",
      "background": "#ffffff",
      "border": "#e4e4e7",
      "hover-background": "#fafafa",
      "hover-color": "#27272a",
      "hover-border": "#d4d4d8",
      "active-background": "#f4f4f5",
      "active-color": "#18181b",
      "active-border": "#a1a1aa"
    }
  },
  "texts": {
    "color": "#27272a"
  },
  "icons": {
    "color": "#52525b",
    "background": "#ffffff",
    "border": "#e4e4e7",
    "hover-background": "#f4f4f5",
    "hover-color": "#3f3f46",
    "hover-border": "#d4d4d8"
  },
  "hyperlink": {
    "color": "#0e7490",
    "hover-color": "#155e75",
    "active-color": "#164e63"
  }
}'
```

Learn more about the [general resource](/docs/branding-general-resource).

### **Editor resource**

Use the Editor resource to configure the functional elements of the editor interface.

Use the [`PUT /v2/brands/{{brand_id}}/resources/editor`](/docs/general-branding/operations/put-v2-brands-brand_id-editor) to customize these parameters:

- Sidebar settings
- Page dimension
- Custom text for the **Save and Close** button
- Visibility of the **Download** button
- Visibility of the document name in the header
- Top toolbar settings
- Background color of the editing tools panel on the left
- Visibility of the **Manage Recipients** link on the editing tools panel
- Visibility of the **Preview** button
- Visibility of the **Thumbnails** button
- Visibility of the **Payment Request** option in the settings (**…**) dropdown
- Visibility of the step progress bar in the header
- Visibility of fillable fields

**Request example**

```bash
curl --request PUT \
--url https://api.signnow.com/v2/brands/{{brand_id}}/resources/editor \
--header 'Authorization: Bearer {{access_token}}' \
--header 'Content-Type: application/json' \
--data '{
  "sidebar": {
    "background": "#ffffff",
    "visibility": true
  },
  "page-dimension": {
    "percent": 150
  },
  "close-button": {
    "visibility": true,
    "title": {
      "editor": {
        "en": "Save and Close"
      }
    }
  },
  "download-button": {
    "visibility": true
  },
  "document-name": {
    "visibility": true
  },
  "toolbar": {
    "visibility": true,
    "background": "#ffffff"
  },
  "editing-tools": {
    "background": "#ffffff"
  },
  "manage-recipients": {
    "visibility": false
  },
  "preview-button": {
    "visibility": true
  },
  "thumbnails-button": {
    "visibility": true
  },
  "request-payment": {
    "visibility": false
  },
  "step-progress-bar": {
    "visibility": false
  },
  "fields": {
    "signature": {
      "visibility": true
    },
    "text": {
      "visibility": true
    },
    "date": {
      "visibility": true
    },
    "initials": {
      "visibility": true
    },
    "fullname": {
      "visibility": true
    },
    "email": {
      "visibility": true
    },
    "checkbox": {
      "visibility": true
    },
    "radiobutton": {
      "visibility": true
    },
    "attachment": {
      "visibility": true
    },
    "dropdown": {
      "visibility": true
    },
    "stamp": {
      "visibility": true
    },
    "formula": {
      "visibility": true
    },
    "hyperlink": {
      "visibility": true
    }
  }
}'
```

Learn more about the [editor resource](/docs/branding-editor-resource).

### 2.3 Assign brand to the application

Once your brand resources are ready, assign them to your application using the [`PUT /v2/applications/{{application_id}}/brand`](/docs/general-branding/operations/put-v2-applications-application_id-brand) request.

> Once assigned, these branding resources will apply to all signature invites sent via this application.<br> Retrieve the `application_id` from the application page in the [API dashboard](https://app.signnow.com/webapp/api-dashboard/keys/).

In the request body, use the `brand_id` from **Step 2.1**.

**Request example**

```bash
curl --request PUT \
--url https://api.signnow.com/v2/applications/{{application_id}}/brand \
--header 'Authorization: Bearer {{access_token}}' \
--header 'Content-Type: application/json' \
--data '{
    "brand_id": "XXXXa1d985ea4df081ff1223f1e3620e4611YYYY"
}'
```

> You can assign branding to a specific document or document group.

## Step 3. Create an embedded editor link

Use the [`POST /v2/documents/{{document_id}}/embedded-editor`](/docs/embedded-editor/operations/post-v2-documents-documentUniqueId-embedded-editor) request to generate a link that will open the document in the embedded editor.

**Request example**

```bash
curl --request POST \
--url https://api.signnow.com/v2/documents/{{document_id}}/embedded-editor \
--header 'Authorization: Bearer {{access_token}}' \
--header 'Content-Type: application/json' \
--data '{
    "redirect_uri": "https://example.com",
    "link_expiration": 45,
    "redirect_target": "blank"
}'
```

## Step 4. Embed the editor link

Embed the editor link into your application using an iframe.

**HTML example**

```
<!DOCTYPE html>
<html>
<body>

<h2>Edit the agreement</h2>

<iframe src="{{generated editor link}}" height="1200" width="900" title="Edit the agreement"></iframe>

</body>
</html>
```

---

## Next steps:

- Create a [white-labeled signing experience](/docs/white-labeled-signing).
- Create a [white-labeled sending experience](/docs/white-labeled-sending).


---
*Full page: https://docs.signnow.com/docs/white-labeled-editor*