Settings and Attributes
There are two ways to define the element's settings:
- via the
settings
property of the JavaScript object, - via attributes of the corresponding HTML tag.
See the description and examples below.
- Using
settings
property to configure element:
const element = document.createElement('document-reader');
element.settings = {
locale: 'fr',
captureButton: false,
mirrorButton: true,
};
- Using attributes to configure element:
<document-reader statusBackgroundColor="rgba(26, 42, 33 , 0.8)" statusIcon="false"></document-reader>
We highly recommend using the settings
property of the element to configure its parameters.
This method gives more flexibility in setup, in addition, all new configuration parameters in the future will be available only as the settings of the object (not as HTML attributes).
Settings and Attributes Description
See all component settings and attributes in the following table.
Setting name | Attribute name | Description | Type | Default | Values | Related components |
---|---|---|---|---|---|---|
locale |
locale |
The language of the component interface. If empty, the language is selected from the browser settings, if it is not found, the system language is taken. | string | en |
ru , en , de , pl , it , hu , zh , sk , uk , fr , es , pt , ar , nl , id , vi , ko , ms , ro , el , tr , ja , cs , th , hi , bn , he , fi , sv , da , hr , no |
document-reader , camera-snapshot |
regulaLogo (deprecated) |
copyright |
Show Regula copyright footer. (deprecated, use copyright instead) | boolean | true |
true , false |
document-reader , camera-snapshot |
changeCameraButton |
change-camera |
Show the camera switch button. | boolean | false |
true , false |
document-reader , camera-snapshot |
closeButton |
close-button |
Show the close button. | boolean | true |
true , false |
document-reader , camera-snapshot |
captureButton |
capture-button |
Show the capture button. | boolean | true |
true , false |
document-reader |
copyright |
— | Show Regula copyright footer. | boolean | true |
true , false |
document-reader , camera-snapshot |
skipButton |
— | Show the skip button for the second page. | boolean | true |
true , false |
document-reader |
flipFrontIcon |
— | Sets the front side of the document flip icon. You can set link (https://example.link.com/icon.png ), image in base64 string (data:image/svg+xml;base64,PHN2ZyBjbGF... ) or imported image if you use module bundler. |
string | undefined |
link to image , base64 string , imported image |
document-reader |
flipBackIcon |
— | Sets the back side of the document flip icon. You can set link (https://example.link.com/icon.png ), image in base64 string (data:image/svg+xml;base64,PHN2ZyBjbGF... ) or imported image if you use module bundler. |
string | undefined |
link to image , base64 string , imported image |
document-reader |
cameraFrameBorderWidth |
— | Sets the thickness of the document capture frame. | number | 5 | any number |
document-reader |
backgroundMaskAlpha |
— | Sets the transparency of the background outside the frame. | number | 0.5 | from 0 to 1 |
document-reader |
cameraFrameLandscapeAspectRatio |
— | Sets the aspect ratio of the capture frame for landscape mode. | number | depends on the scenario | any number |
document-reader |
cameraFramePortraitAspectRatio |
— | Sets the aspect ratio of the capture frame for portrait mode. | number | depends on the scenario | any number |
document-reader |
statusIcon |
— | Show status icon. | boolean | true |
true , false |
document-reader |
statusPositionMultiplier |
— | Sets the vertical position of the status message. | number | undefined |
from 0 to 2 |
document-reader |
cameraFrameOffsetWidth |
— | Sets the offset of the capture frame. | number | undefined |
any number |
document-reader |
cameraFrameVerticalPositionMultiplier |
— | Changes the vertical position of the camera frame (only applies to the portrait orientation). | number | undefined |
from 0 to 2 |
document-reader |
cameraFrameHorizontalPositionMultiplier |
— | Changes the horizontal position of the camera (only applies to the landscape orientation). | number | undefined |
from 0 to 2 |
document-reader |
cameraFrameShapeType |
— | Sets the capture frame shape type. | string | line |
line , corners |
document-reader |
cameraFrameLineCap |
— | Sets the style of the end of the capture frame line when cameraFrameShapeType='corners' |
string | butt |
butt , round , square |
document-reader |
cameraFrameLineLength |
— | Sets the length of the capture frame line when cameraFrameShapeType='corners' |
number | 5 | any number |
document-reader |
cameraFrameCornerRadius |
— | Sets the radius of rounding of the capture frame. | number | 15 | any number |
document-reader |
cameraFrameDefaultColor |
— | Sets the color of the capture frame. | string | rgba(255, 255, 255, 0.9) |
any color string |
document-reader |
cameraFrameActiveColor |
— | Sets the capture frame color when a document is detected. | string | rgba(30, 130, 76, 0.9) |
any color string |
document-reader |
statusTextColor |
— | Sets the color of the text message status. | string | white |
any color string |
document-reader , camera-snapshot |
statusBackgroundColor |
— | Sets the background color of the message status. | string | rgba(27, 16, 31, 0.5) |
any color string |
document-reader , camera-snapshot |
cameraFrame |
— | Show the capture frame. | boolean | true |
true , false |
document-reader |
captureButtonDelay |
— | Show the capture button after delay. | number | undefined |
any number |
document-reader |
fromCameraButton |
— | Show the camera button. | boolean | true |
true , false |
document-reader , camera-snapshot |
uploadFileButton |
— | Show the files button. | boolean | true |
true , false |
document-reader , camera-snapshot |
mirrorButton |
— | Show the mirroring button. | boolean | false |
true , false |
document-reader , camera-snapshot |