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.

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;
}