# New DocumentViewer Signature Tutorial Sample

> We just published a new tutorial sample in our demo hub that shows how to prepare documents with signature boxes to request signatures using the DocumentViewer.

- **Author:** Bjoern Meyer
- **Published:** 2020-08-18
- **Modified:** 2026-07-17
- **Description:** We just published a new tutorial sample in our demo hub that shows how to prepare documents with signature boxes to request signatures using the DocumentViewer.
- **2 min read** (274 words)
- **Tags:**
  - ASP.NET
  - Document Signing
  - Samples
  - Signature
  - Tutorial
- **Web URL:** https://www.textcontrol.com/blog/2020/08/18/new-documentviewer-signature-tutorial-sample/
- **LLMs URL:** https://www.textcontrol.com/blog/2020/08/18/new-documentviewer-signature-tutorial-sample/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2020/08/18/new-documentviewer-signature-tutorial-sample/llms-full.txt

---

The online demos show features and cover most typical usage scenarios of TX Text Control components. The section [Tutorials](https://demos.textcontrol.com/chapter/topic/Tutorials) contains interactive tutorials that demonstrate how to combine modules and components and how to include TX Text Control into typical workflows.

### Signature Boxes

We just published a [new tutorial](https://demos.textcontrol.com/chapter/topic/Tutorials/CreatingSignatures) that shows how to insert signature boxes by inserting TextFrames into a document in the document editor. These boxes can be inserted using the ribbon bar by inserting *TextFrames* or programmatically using JavaScript:

```
function InsertTextFrame(name) {
    TXTextControl.textFrames.addAnchored(
        { width: 3000, height: 2000 },
        TXTextControl.HorizontalAlignment.Center,
        0, // TextPosition
        TXTextControl.TextFrameInsertionMode.AboveTheText,

        (addedTextFrame) => {
            addedTextFrame.selection.setText("Signature Box");
            addedTextFrame.setBackColor("LightGrey");
            addedTextFrame.setName("txsign");
        }
    );
}
```

![Signing documents with TX Text Control](https://s1-www.textcontrol.com/assets/dist/blog/2020/08/18/a/assets/sign1.webp "Signing documents with TX Text Control")

In the next step, the document is saved and loaded into the DocumentViewer by passing a *SignatureSettings* object to the loadDocument method:

```
function LoadViewer() {

  var bDocument;

  var signatureSettings = {
      signerName: "Tim Typer",
      signerInitials: "TT",
      uniqueId: "12345-ABCDE",
      redirectUrlAfterSignature: "CreatingSignatures?signed=true",
      ownerName: "Document Requestor",
      signatureBoxName: "txsign",
      showSignatureBar: true
  }

  // save document
  TXTextControl.saveDocument(TXTextControl.StreamType.InternalUnicodeFormat, function (e) {
      bDocument = e.data;

      TXDocumentViewer.loadDocument(
          bDocument,
          "pleasesignme.tx",
          signatureSettings);
  });
}
```

After the document is loaded, the signature boxes are rendered and the signature bar is shown automatically:

![Signing documents with TX Text Control](https://s1-www.textcontrol.com/assets/dist/blog/2020/08/18/a/assets/sign2.webp "Signing documents with TX Text Control")

You can test this live sample tutorial directly in our demo hub:

[Launch Demo ](https://demos.textcontrol.com/chapter/topic/Tutorials/CreatingSignatures)

---

## About Bjoern Meyer

As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano.

- [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/)
- [X](https://x.com/txbjoern)
- [GitHub](https://github.com/bjoerntx)

---

## Related Posts

- [DocumentViewer Feature: Uploading Signature Images](https://www.textcontrol.com/blog/2020/08/17/new-documentviewer-features-uploading-signature-images/llms.txt)