Skip to content

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

Next Steps