UI Customisation for Incode

The styling of the Incode component is very customisable.

You can use your own CSS with Incode's custom classes.

For example, here is a simple CSS used to customise the Incode interface.

/** Change Fonts **/

@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

body {
    font-family: 'Raleway' !important;
}

/** Only Style Incode Prefixed CSS Selectors **/

.IncodeRootContainer {
    background-color: #f1f1f1 !important;
}

.IncodeContainer {
    background-color: #f1f1f1 !important;
    color: #050505 !important;
}

.IncodeParagraph {
    color: #050505 !important;
}

.IncodeDocumentSelectorContainer {
    background-color: #f1f1f1 !important;
}

/** Only Style Incode Prefixed CSS Selectors, but breaking our own rules  **/

.IncodeDocumentSelectorContainer h1 {
    color: #050505 !important;
}

.IncodeDocumentSelectorContainer button p {
    color: #050505 !important;
}

.IncodeIdCardButton {
    border: 1px solid #7E4BF7 !important;
    padding: 12px 20px !important;
    background: #9369F7 !important;
}

.IncodeBookletButton {
    border: 1px solid #7E4BF7 !important;
    padding: 12px 20px !important;
    background: #9369F7 !important;
}

The following example provides a more detailed CSS with an extensive use of the Incode custom classes.

@font-face {
  font-family: "DM Sans Bold";
  font-weight: 700;
  src: url("../fonts/DMSans-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "DM Sans Regular";
  font-weight: 500;
  src: url("../fonts/DMSans-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "DM Sans Medium";
  font-weight: 600;
  src: url("../fonts/DMSans-Medium.ttf") format("truetype");
}

@font-face {
  font-family: "Nexa Heavy";
  font-weight: 850;
  src: url("../fonts/Nexa-Heavy.ttf") format("truetype");
}

@font-face {
  font-family: "Nexa Regular";
  font-weight: 500;
  src: url("../fonts/Nexa-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Nexa XBold";
  font-weight: 800;
  src: url("../fonts/Nexa-XBold.ttf") format("truetype");
}

:root {
  --text-color: #112138;
  --text-secondary-color: #3d4d64;
  --light-bg-color: #e9f7f9;
  --tertiary-color: #45b1c9;
  --error-bg-color: #fef2f0;
  --error-color: #f3705a;
  --primary-color-3: #8898ae;
  --success-color: #a7c576;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  font-family: "DM Sans Regular" !important;
  color: var(--text-color) !important;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: white !important;
}

#overlay-container {
  width: 100%;
  position: absolute;
  top: 45%;
  left: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: white;
  z-index: 1000;
  padding: 0 16px;
  transform: translate(-50%, -50%);

  .icon-container {
    width: 72px;
    height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-bottom: 20px;
  }

  .content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    .title {
      font-size: 26px;
      font-family: "Nexa Heavy" !important;
      text-align: center;
    }
    .content {
      font-size: 16px;
      font-weight: 400;
      font-family: "DM Sans Regular" !important;
      text-align: center;
    }
  }
}

/* default icon style */
.default-icon {
  background-color: var(--light-bg-color) !important;
  color: var(--tertiary-color) !important;
}

/* error icon style */
.error-icon {
  background-color: var(--error-bg-color);
  color: var(--error-color) !important;
}

/* default title style */
.default-title {
  color: var(--text-color) !important;
}

/* default content style */
.default-content {
  color: var(--text-secondary-color) !important;
}

/* error title and content style */
.error-title,
.error-content {
  color: var(--error-color) !important;
}

#main-container {
  background-color: white !important;
}

/* Incode Related Styles */

#canvasId {
  display: none !important;
}

.IncodeMaskContainer {
  position: absolute !important;
  top: 10% !important;
}
.IncodeMaskContainer.blue-mask {
  box-shadow: rgba(0, 0, 0, 0.55) 0px 0px 0px 99999px,
    var(--tertiary-color) 0px 0px 0px 5px inset !important;
}

.IncodeMaskContainer.error-mask {
  box-shadow: rgba(0, 0, 0, 0.55) 0px 0px 0px 99999px,
    var(--error-color) 0px 0px 0px 5px inset !important;
}

.IncodeMaskContainer.success-mask {
  box-shadow: rgba(0, 0, 0, 0.55) 0px 0px 0px 99999px,
    var(--success-color) 0px 0px 0px 5px inset !important;
}

.IncodeNotificationContainer {
  position: fixed !important;
  font-family: "DM Sans Medium" !important;
  top: 12% !important;
}

.IncodePreviewContainer {
  font-family: "DM Sans Medium" !important;
  color: var(--text-color) !important;

  .error > .IncodeCapturePreviewImage {
    border: 8px solid var(--error-color) !important;
  }
  .success > .IncodeCapturePreviewImage {
    border: 8px solid var(--success-color) !important;
  }
}

.IncodeCapturePreviewUploadingBarOutside > :first-child {
  background-color: var(--tertiary-color) !important;
}

.IncodeRetakeContainer {
  color: var(--text-color) !important;
  font-family: "DM Sans Regular" !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  text-align: center !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 16px !important;
}

.IncodeRetakeImageContainer {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.IncodeRetakeButtonsContainer {
  display: flex !important;
  flex-direction: column-reverse !important;
}

.IncodeRetakeTitle {
  font-family: "DM Sans Bold" !important;
  font-size: 1.625rem !important;
  text-align: center !important;
  color: var(--text-color) !important;
  line-height: 2.25rem !important;
}

.IncodeRetakeSubtitle {
  font-family: "DM Sans Regular" !important;
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  text-align: center !important;
  color: var(--text-color) !important;
  line-height: 1.5rem !important;
}

.IncodeRetakeContinueContainer {
  background-color: var(--tertiary-color) !important;
  color: white !important;
  font-family: "DM Sans Bold" !important;
  font-size: 18px !important;
  text-align: center !important;
  width: 100% !important;
  box-shadow: none !important;
  text-transform: capitalize !important;
}

.IncodeRetakeButton {
  color: var(--primary-color-3) !important;
  font-family: "DM Sans Medium" !important;
  font-size: 18px !important;
  text-align: center !important;
  width: 100% !important;
  img {
    display: none !important;
  }
}

/* This is the hacky solution to override
loading components but not sure it will work
every time because its dynamically generated class
 */
.sc-lnAgIa {
  background-color: white !important;
}

.sc-iKGpAt {
  border-width: 3px !important;
  border-color: transparent var(--tertiary-color) var(--tertiary-color) !important;
}
.sc-gjTGSA {
  color: var(--text-color) !important;
  font-size: 26px !important;
  font-family: "Nexa Heavy" !important;
}

/*
Help Overlay styles
*/
.ReactModal__Overlay--after-open {
  position: fixed;
  inset: 0px;
  background-color: white !important;
  z-index: 999996;
  gap: 16px;
  padding: 16px;
  height: 100%;
}
.IncodeCommonIssuesModalContainer {
  border: none !important;
  .IncodeCommonIssuesModalInstructionsContainer {
    font-family: "DM Sans Medium" !important;
    font-size: 16px !important;
    text-align: center !important;
    color: var(--text-color) !important;

    h1 {
      text-align: center !important;
      margin: 0 !important;
      margin-bottom: 16px !important;
      font-family: "Nexa Heavy" !important;
    }
  }
}
.IncodeCommonIssuesModalButtonContainer {
  position: fixed;
  bottom: 40px;
  left: 1.5rem;
  right: 1.5rem;
  margin: 0 !important;
  margin-bottom: 16px !important;
}
.IncodeCommonIssuesModalTryAgainContainer {
  box-shadow: none !important;
  max-width: 100% !important;
  min-width: 100% !important;
  text-transform: unset !important;
  background-color: var(--tertiary-color) !important;
}

For a complete list of Incode CSS classes that you can use to customise the component, visit Customization .

Customisation based on integration method

IDV flow

To use your custom CSS with Incode custom classes, provide your CSS to our technical support team for them to apply it in your account's configuration.

OCR and Biometrics separately

When you're using OCR and Biometrics separately, you can apply your own custom CSS directly.