Ask or search…
K
Links
Comment on page

Customization

Using CSS classes, it is possible to customize the capture step of Web SDKs.
On this page, you will find documentation regarding the nomenclature of these classes, as well as some customization examples.
This part of the documentation is a work in progress. If you have any questions or suggestions, please contact us.

Classes and components

1. Capture Title

Class name: caf-sdk-video-title

2. Camera Switch Button

Class name: caf-sdk-video-switch-camera-button

3. Capture Mask

Class name: caf-sdk-video-mask

4. Capture button (manual capture only)

Class name: caf-sdk-button-take-picture

5. Progress Spinner

Class name: caf-sdk-spinner-container
Child classes: caf-sdk-spinner-icon, caf-sdk-spinner-circle

6. Message

Class name: caf-sdk-video-message-container
Child class: caf-sdk-video-message-text
Related classes: caf-sdk-message-success, caf-sdk-message-info, caf-sdk-message-warning, caf-sdk-message-error

7. Action

Class name: caf-sdk-video-action-container
Child classes: caf-sdk-video-action-text
Related classes: caf-sdk-message-success, caf-sdk-message-info, caf-sdk-message-warning, caf-sdk-message-error

Examples

Layout original

Example 1

.caf-sdk-video-action-container {
border-radius: 5px;
background-color: white;
border: 1px solid gray;
padding: 10px;
width: 95%;
min-height: 75px;
justify-content: center;
align-items: center;
display: none;
}
.caf-sdk-video-action-text {
color: black !important;
font-weight: 500 !important;
position: relative;
}
.caf-sdk-video-action-text.caf-sdk-message-warning::before {
position: absolute;
display: block;
content: '';
background: url('https://cdn3.iconfinder.com/data/icons/interface-fat-line-vol-2/16/face-recognistion-focus-center-512.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
left: -30px;
top: 5px;
height: 30px;
width: 30px;
z-index: 100;
}
Last modified 1yr ago