---
title: "capture-signature"
description: "Overview"
permalink: /docs/build/ui-components/all-ui-components/capture-signature/
---
# capture-signature
## Overview
The `capture-signature` component was visually updated in version **4.74.0** of the JourneyApps Runtime.
Allows users to capture a signature digitally.
### Using signatures
Signatures are captured as SVG's with a path that describes it. That path can be accessed using toText():
```javascript
// Get the SVG text of the signature as XML
// Assuming the name of the signature is `captured_sig`
var signatureSVG = view.captured_sig.toText();
```
Signatures can also be printed using a Zebra bluetooth printer ([see docs](/docs/build/integration/journeyapps-print-android/)) directly from version 4.34.4 of the JourneyApps Container. The Zebra printer uses a language called ZPL, so we can convert the signature to ZPL by using:
```javascript
// Get the SVG text of the signature as ZPL
// Assuming the name of the signature is `captured_sig`
var signatureSVG = view.captured_sig.toZPL();
```
### Basic Example
```xml
```
## Advanced Attributes
### `dialog-title`
Override the title that is displayed at the top of the dialog when capturing a signature.
**main.view\.xml**
```xml
```
### `fullwidth`
Specify whether the signature preview should span the full width of the available screen space.
### capture-signature
```xml
```
### display-signature
```xml
```
### `orientation`
* `orientation` was introduced in version **4.88.0** of the JourneyApps Runtime and is supported on mobile platforms: Android and iOS.
* Container version **23.5.1** or later is required for this feature on iOS, and is recommended for Android.
Lock the orientation of the draw-pad for capturing a signature.
When `orientation` is set to `landscape` or `portrait`, the draw-pad will always display in the specified orientation, regardless of the orientation of the device. When `orientation` is set to `auto`, or not specified, the orientation of the draw-pad mirrors the orientation of the device.
### `align-content`
### `align-controls`
### `align-label`
### `control-order`
### `disabled`
### `icon-position`
### `id`
### `label-case`
### `label-color`
### `on-change`
### `show-if`
### `hide-if`
## Common Attributes
### `bind`
### `label`
### `required`
## Component Methods
The following component methods are available when an [`id`](/docs/build/ui-components/common-attributes/id/) is assigned to the component and `component.captureSignature({id:'my-id'})` / `component.displaySignature({id:'my-id'})` is called from JS/TS:
### `captureMedia`
Programmatically open the signature dialog that allows the user to sign.
```javascript
try {
component.captureSignature({id: 'my-id'}).captureMedia();
} catch (e) {
// handle exception here
}
```
### `closeMedia`
Programmatically close the signature preview.
### capture-signature
```javascript
try {
component.captureSignature({id: 'my-id'}).closeMedia();
} catch (e) {
// handle exception here
}
```
### display-signature
```javascript
try {
component.displaySignature({id: 'my-id'}).closeMedia();
} catch (e) {
// handle exception here
}
```
### `deleteMedia`
Programmatically clear a captured signature.
```javascript
try {
component.captureSignature({id: 'my-id'}).deleteMedia();
} catch (e) {
// handle exception here
}
```
`deleteMedia` will trigger an [`on-change`](#on-change) if a function is assigned to it.
### `openMedia`
Programmatically open the signature preview.
### capture-signature
```javascript
try {
component.captureSignature({id: 'my-id'}).openMedia();
} catch (e) {
// handle exception here
}
```
### display-signature
```javascript
try {
component.displaySignature({id: 'my-id'}).openMedia();
} catch (e) {
// handle exception here
}
```
### `scrollIntoView`
Programmatically scroll until the `capture-signature` / `display-signature` component is visible in the view.
### capture-signature
```javascript
try {
component.captureSignature({id: 'my-id'}).scrollIntoView();
} catch (e) {
// handle exception here
}
```
### display-signature
```javascript
try {
component.displaySignature({id: 'my-id'}).scrollIntoView();
} catch (e) {
// handle exception here
}
```