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 3mo ago