> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.idenfy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# User Interface and SDK

> Configure the verification flow visual appearance and mobile SDK behavior settings in the iDenfy dashboard for web and native apps.

export const DashSelect = ({label, values, value, placeholder, width}) => <span className="iuk iuk-ds-field" style={width ? {
  width,
  maxWidth: "100%"
} : undefined}>
    {label ? <span className="iuk-ds-field-lbl">{label}</span> : null}
    <span className="iuk-ds-field-row">
      {values && values.length ? <span className="iuk-ds-chips">
          {values.map((v, i) => <span key={i} className="iuk-ds-chip">
              <span className="iuk-ds-chip-x">×</span>
              <span className="iuk-ds-chip-lbl">{v}</span>
            </span>)}
        </span> : <span className={value ? "iuk-ds-field-val" : "iuk-ds-field-val iuk-ds-field-ph"}>{value || placeholder}</span>}
      <svg className="iuk-ds-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M6 9.5l6 6 6-6" />
      </svg>
    </span>
  </span>;

export const DashToggle = ({on = false, disabled = false}) => <span className={disabled ? "iuk iuk-ds-toggle iuk-ds-toggle-off" : on ? "iuk iuk-ds-toggle iuk-ds-toggle-on" : "iuk iuk-ds-toggle"}>
    <span className="iuk-ds-thumb" />
  </span>;

export const DashSetting = ({title, desc, badge, stack = false, control, children}) => <div className={stack ? "iuk iuk-ds-row iuk-ds-row-stack" : "iuk iuk-ds-row"}>
    <div className="iuk-ds-row-text">
      <div className="iuk-ds-row-title">
        <div className="iuk-ds-h4">{title}</div>
        {badge ? <span className={badge.tone ? `iuk-ds-badge iuk-ds-badge-${badge.tone}` : "iuk-ds-badge"}>
            {badge.label || badge}
          </span> : null}
      </div>
      {desc ? <p className="iuk-ds-desc">{desc}</p> : null}
    </div>
    <div className="iuk-ds-row-ctl">{control !== undefined ? control : children}</div>
  </div>;

export const DashCard = ({title, collapsed = false, children}) => <div className="iuk iuk-ds-card">
    <div className="iuk-ds-cardhead">
      <div className="iuk-ds-cardtitle">{title}</div>
      <svg className={collapsed ? "iuk-ds-chev" : "iuk-ds-chev iuk-ds-chev-up"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M6 9.5l6 6 6-6" />
      </svg>
    </div>
    {collapsed ? null : <div className="iuk-ds-cardbody">{children}</div>}
  </div>;

export const DashTabs = ({items = [], active}) => <div className="iuk iuk-ds-tabs">
    {items.map((raw, i) => {
  const it = typeof raw === "string" ? {
    label: raw
  } : raw;
  const on = it.active !== undefined ? it.active : active === it.label || active === i;
  return <span key={i} className={it.disabled ? "iuk-ds-tab iuk-ds-tab-off" : on ? "iuk-ds-tab iuk-ds-tab-on" : "iuk-ds-tab"}>
          {it.label}
          {it.badge ? <span className={it.badge.tone ? `iuk-ds-badge iuk-ds-badge-${it.badge.tone}` : "iuk-ds-badge"}>
              {it.badge.label || it.badge}
            </span> : null}
        </span>;
})}
  </div>;

export const DashPage = ({title, flush = false, alt, children}) => <div className={flush ? "iuk iuk-ds iuk-ds-flush" : "iuk iuk-ds"} data-mock="ui" data-nosnippet="" role={alt ? "img" : undefined} aria-label={alt || undefined}>
    {title ? <div className="iuk-ds-h1">{title}</div> : null}
    {children}
  </div>;

export const UiKitStyles = () => {
  const css = `
/* ---------- product tokens, inlined as literals (must not flip) ----------
   purple #734bfb  hover #452d97  tint #efebff
   ink #19181d  muted #6f7486  border #d8dee9
   surface #fff  page #f7f8fa  hover-tint #f2f4f8  subtle #e6e9ef
   disabled-bg #eaeaeb  disabled-fg #c0c0c3
   success #00c853/#e8f5e9  error #e91b0c/#ffebee
   warning #ff9800/#fff3e0  info #1e7afd/#e9f2ff
   ------------------------------------------------------------------------ */

.iuk, .iuk * { box-sizing: border-box; }
.iuk {
  font-family: inherit;
  -webkit-font-smoothing: antialiased;
}

/* ========================= DOCS CHROME ================================== */


/* Row of side-by-side scenes, reflows with no media queries */
.iuk-row {
  display: flex;
  gap: 20px;
  align-items: stretch;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}
.iuk-col { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* Caption above a scene: label left, dimension right */
.iuk-cap { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 2px; }
.iuk-cap-label {
  font-weight: 700; font-size: 13px; line-height: 1.3;
  color: rgb(var(--gray-800));
}
.dark .iuk-cap-label { color: rgb(var(--gray-200)); }

/* Do / Don't tag with a status dot */
.iuk-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 13px; line-height: 1.3;
  color: #3f7741;
}
.iuk-tag::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: #60a561; box-shadow: 0 0 0 3px rgb(96 165 97 / 0.22);
}
.iuk-tag-no { color: #b82f4f; }
.iuk-tag-no::before { background: #da4167; box-shadow: 0 0 0 3px rgb(218 65 103 / 0.22); }
.dark .iuk-tag { color: #7bcb7d; }
.dark .iuk-tag-no { color: #f17a99; }

/* Mono dimension / spec label */
.iuk-dim {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600; font-size: 12px; letter-spacing: 0.06em;
  color: rgb(var(--gray-500));
  white-space: nowrap;
}
.dark .iuk-dim { color: rgb(var(--gray-400)); }

/* Uppercase verdict pill under a scene */
.iuk-callout {
  align-self: flex-start;
  font-weight: 700; font-size: 10px; letter-spacing: 0.04em;
  text-transform: uppercase; white-space: nowrap;
  padding: 7px 11px; border-radius: 6px; margin-top: 2px;
  color: #fff;
}
.iuk-callout-ok  { background: #60a561; box-shadow: 0 4px 12px rgb(96 165 97 / 0.25); }
.iuk-callout-no  { background: #da4167; box-shadow: 0 4px 12px rgb(218 65 103 / 0.25); }
.iuk-callout-info{ background: rgb(var(--primary)); box-shadow: 0 4px 12px rgb(var(--primary) / 0.25); }
.iuk-callout-end { align-self: flex-end; }

/* Numbered annotation marker + caption list */
.iuk-marker {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgb(var(--primary)); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgb(var(--primary) / 0.35);
  flex-shrink: 0;
}
.iuk-annotations { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.iuk-annotations li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.5; color: rgb(var(--gray-700)); }
.dark .iuk-annotations li { color: rgb(var(--gray-300)); }
.iuk-annotations .iuk-marker { margin-top: 2px; box-shadow: 0 0 0 2px transparent; }

/* Absolutely-placed marker overlaying a scene */
.iuk-pin { position: absolute; z-index: 6; }

/* Partner-page wrapper: hatched, dashed — deliberately "not iDenfy" */
.iuk-partner {
  position: relative;
  background: repeating-linear-gradient(45deg, rgb(var(--gray-100)) 0, rgb(var(--gray-100)) 7px, transparent 7px, transparent 14px);
  border: 1.5px dashed rgb(var(--gray-300));
  border-radius: 14px;
  padding: 38px 18px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.iuk-partner-lbl {
  position: absolute; top: -11px; left: 14px;
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgb(var(--gray-500));
  background: rgb(var(--background-light, 255 255 255));
  padding: 6px 10px; border-radius: 5px;
  border: 1.5px dashed rgb(var(--gray-300));
  white-space: nowrap;
}
.dark .iuk-partner { background: repeating-linear-gradient(45deg, rgb(255 255 255 / 0.05) 0, rgb(255 255 255 / 0.05) 7px, transparent 7px, transparent 14px); border-color: rgb(255 255 255 / 0.18); }
.dark .iuk-partner-lbl { background: #17171b; color: rgb(var(--gray-400)); border-color: rgb(255 255 255 / 0.18); }

/* Brand tag pinned to the top edge of an embedded frame */
.iuk-embed { position: relative; display: flex; flex-direction: column; align-items: center; }
.iuk-embed-tag {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; z-index: 5;
  font-weight: 700; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: rgb(var(--primary));
  padding: 5px 10px; border-radius: 5px; white-space: nowrap;
  box-shadow: 0 2px 6px rgb(var(--primary) / 0.3);
}

/* ---- Browser frame ---- */
.iuk-browser {
  display: flex; flex-direction: column; overflow: hidden;
  width: 100%; max-width: 100%;
  background: #fff;
  border: 1.5px solid rgb(var(--gray-300));
  border-radius: 10px;
  box-shadow: 0 4px 16px rgb(25 24 29 / 0.10);
}
.iuk-browser-brand { border-color: rgb(var(--primary)); box-shadow: 0 4px 16px rgb(var(--primary) / 0.18); }
.iuk-winbar {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  height: 24px; padding: 0 10px;
  background: #f3f4f6; border-bottom: 1px solid #e6e9ef;
}
.iuk-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.iuk-dot-r { background: #ff6b7e; }
.iuk-dot-y { background: #ffcc4d; }
.iuk-dot-g { background: #7bcb7d; }
.iuk-winbar-url {
  margin-left: 6px; flex: 1; min-width: 0;
  height: 12px; border-radius: 6px; background: #e6e9ef;
  display: flex; align-items: center; padding: 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7px; font-weight: 600; color: #6f7486;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* ---- Phone frame ---- */
.iuk-phone {
  position: relative;
  width: 100%; max-width: 232px;
  background: #19181d;
  border-radius: 22px;
  padding: 8px 6px;
  box-shadow: 0 8px 28px rgb(25 24 29 / 0.20);
}
.iuk-phone-screen {
  position: relative; overflow: hidden;
  background: #f7f8fa;
  border-radius: 16px;
}
.iuk-phone-notch {
  position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 4px; border-radius: 3px;
  background: rgb(255 255 255 / 0.22); z-index: 3;
}

/* ========================= PRODUCT SKIN ================================= */
/* Fixed light. Traced from ui.idenfy.com. Never gets a .dark override. */

.iuk-shell {
  display: flex; flex-direction: column; gap: 12px;
  width: 100%; max-width: 420px; margin: 0 auto;
  padding: 14px 12px;
  background: #f7f8fa;
  color: #6f7486;
  font-size: 10px; line-height: 1.4;
  text-align: center;
}
.iuk-shell-flush { padding: 0; background: transparent; max-width: none; }
/* Standalone screen sitting directly on a docs page: keeps the product's own
   #f7f8fa page background so the ink-coloured logo stays legible. */
.iuk-shell-framed { border-radius: 8px; padding: 10px 9px; gap: 9px; }

/* Logo bar: left slot | centred logo | language chip */
.iuk-topbar { display: flex; align-items: center; gap: 8px; min-height: 24px; }
.iuk-topbar-slot { flex: 1 1 0; display: flex; align-items: center; min-width: 0; }
.iuk-topbar-slot-end { justify-content: flex-end; }
.iuk-logo {
  display: inline-flex; align-items: center;
  font-weight: 800; font-size: 11px; letter-spacing: -0.04em; color: #19181d;
}
.iuk-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 7px;
  background: #fff; border: 1px solid #d8dee9; border-radius: 4px;
  font-size: 9px; font-weight: 600; color: #6f7486;
  white-space: nowrap;
}
.iuk-chip svg { width: 10px; height: 10px; }

/* The card: flat outline, no shadow — matches ivs-layout exactly */
.iuk-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 16px 14px 13px;
  background: #fff;
  border-radius: 8px;
  min-width: 0; max-width: 100%;
  outline: 1px solid #d8dee9; outline-offset: -1px;
  text-align: center;
}
.iuk-card-body { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 300px; margin: 0 auto; align-items: stretch; min-width: 0; }
.iuk-card-fluid .iuk-card-body { max-width: none; }

.iuk-h1 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: #19181d; }
.iuk-sub { margin: 0; font-size: 10px; font-weight: 600; line-height: 1.5; color: #6f7486; }
.iuk-h3 { margin: 0; font-size: 11px; font-weight: 600; line-height: 1.4; color: #19181d; text-align: left; }
.iuk-p  { margin: 0; font-size: 9px; font-weight: 400; line-height: 1.5; color: #6f7486; }
.iuk-fine { margin: 0; font-size: 8px; font-weight: 400; line-height: 1.5; color: #6f7486; }
/* Mintlify's prose styles reach inside snippets — pin these in both themes */
.iuk .iuk-h1, .dark .iuk .iuk-h1,
.iuk .iuk-h3, .dark .iuk .iuk-h3 { color: #19181d; }
.iuk .iuk-sub, .dark .iuk .iuk-sub,
.iuk .iuk-p, .dark .iuk .iuk-p,
.iuk .iuk-fine, .dark .iuk .iuk-fine { color: #6f7486; }
.iuk .iuk-card strong, .dark .iuk .iuk-card strong { color: #19181d; font-weight: 700; }
.iuk .iuk-card a, .dark .iuk .iuk-card a { color: #734bfb; font-weight: 600; text-decoration: none; }

/* Footer strip under the card */
.iuk-footer { font-size: 9px; font-weight: 400; line-height: 1.5; color: #6f7486; padding: 3px 0; }
.iuk .iuk-footer, .dark .iuk .iuk-footer { color: #6f7486; }
.iuk-footer-link { color: #734bfb; font-weight: 600; }

/* Card footer: stacked actions, gap 8px */
.iuk-actions { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 300px; margin: 0 auto; }

/* ---- Buttons ---- */
.iuk-btn {
  display: grid; place-items: center; width: 100%;
  min-height: 32px; padding: 5px 11px;
  border: 1px solid transparent; border-radius: 4px;
  font-size: 11px; font-weight: 600; line-height: 1.3;
  text-align: center; user-select: none;
}
.iuk-btn-filled   { background: #734bfb; border-color: #734bfb; color: #fff; }
.iuk-btn-outlined { background: transparent; border-color: #734bfb; color: #734bfb; }
.iuk-btn-hover    { background: #452d97; border-color: #452d97; color: #fff; }
.iuk-btn-disabled { background: #eaeaeb; border-color: #eaeaeb; color: #c0c0c3; }
.iuk-btn-link {
  display: inline; width: auto; min-height: 0; padding: 0; border: 0;
  background: none; color: #734bfb; font-size: 10px; font-weight: 600;
}
.iuk-btn-link-disabled { color: #c0c0c3; }
.iuk .iuk-btn-filled, .dark .iuk .iuk-btn-filled,
.iuk .iuk-btn-hover, .dark .iuk .iuk-btn-hover { color: #fff; }
.iuk .iuk-btn-outlined, .dark .iuk .iuk-btn-outlined { color: #734bfb; }
.iuk .iuk-btn-disabled, .dark .iuk .iuk-btn-disabled { color: #c0c0c3; }

/* ---- Text field with floating label ---- */
.iuk-field { position: relative; width: 100%; text-align: left; }
.iuk-field-box {
  display: flex; align-items: center; gap: 6px;
  width: 100%; min-height: 30px; padding: 6px 9px;
  background: #fff; border: 1px solid #d8dee9; border-radius: 4px;
  font-size: 10px; font-weight: 600; line-height: 1.4; color: #19181d;
}
.iuk-field-label {
  position: absolute; top: -5px; left: 7px;
  padding: 0 3px; background: #fff;
  font-size: 8px; font-weight: 500; line-height: 1.2; color: #6f7486;
  white-space: nowrap;
}
.iuk-field-ph { color: #c0c0c3; font-weight: 500; }
.iuk-field-focus  .iuk-field-box   { border-color: #734bfb; }
.iuk-field-focus  .iuk-field-label { color: #734bfb; }
.iuk-field-error  .iuk-field-box   { border-color: #e91b0c; }
.iuk-field-error  .iuk-field-label { color: #e91b0c; }
.iuk-field-disabled .iuk-field-box   { border-color: #eaeaeb; color: #c0c0c3; }
.iuk-field-disabled .iuk-field-label { color: #c0c0c3; }
.iuk-field-caret { width: 1px; height: 12px; background: #734bfb; }
.iuk-field-req { color: #e91b0c; }
.iuk-field-msg {
  display: flex; align-items: center; gap: 5px;
  margin-top: 5px; font-size: 8px; font-weight: 400; line-height: 1.3; color: #e91b0c;
}
.iuk-field-msg svg { width: 9px; height: 9px; flex-shrink: 0; }
.iuk .iuk-field-box, .dark .iuk .iuk-field-box { color: #19181d; }
.iuk .iuk-field-label, .dark .iuk .iuk-field-label { color: #6f7486; }
.iuk .iuk-field-focus .iuk-field-label, .dark .iuk .iuk-field-focus .iuk-field-label { color: #734bfb; }
.iuk .iuk-field-msg, .dark .iuk .iuk-field-msg { color: #e91b0c; }
.iuk-caret-down { width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #19181d; flex-shrink: 0; margin-left: auto; }

/* ---- OTP ---- */
.iuk-otp { display: flex; justify-content: center; gap: 6px; width: 100%; }
.iuk-otp-cell {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: #fff; border: 1px solid #d8dee9; border-radius: 4px;
  font-size: 13px; font-weight: 600; color: #19181d;
}
.iuk-otp-cell-active { border-color: #734bfb; }
.iuk-otp-cell-error { border-color: #e91b0c; background: #ffebee; color: #e91b0c; }
.iuk .iuk-otp-cell, .dark .iuk .iuk-otp-cell { color: #19181d; }
.iuk .iuk-otp-cell-error, .dark .iuk .iuk-otp-cell-error { color: #e91b0c; }

/* ---- Checkbox ---- */
.iuk-check { display: flex; align-items: flex-start; gap: 7px; text-align: left; }
.iuk-check-box {
  width: 12px; height: 12px; flex-shrink: 0; margin-top: 1px;
  border: 1px solid #6f7486; border-radius: 3px; background: transparent;
  display: grid; place-items: center;
}
.iuk-check-on { background: #734bfb; border-color: #734bfb; color: #fff; }
.iuk-check-on svg { width: 8px; height: 8px; }
.iuk-check-lbl { font-size: 9px; font-weight: 400; line-height: 1.4; color: #6f7486; }
.iuk .iuk-check-lbl, .dark .iuk .iuk-check-lbl { color: #6f7486; }

/* ---- Selectable document / method card ---- */
.iuk-doccard {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 12px;
  border: 1px solid #d8dee9; border-radius: 4px; background: #fff;
  text-align: left;
  min-width: 0; word-break: break-word;
}
.iuk-doccard > span { min-width: 0; }
.iuk-doccard-title { display: block; font-size: 10px; font-weight: 600; line-height: 1.35; color: #19181d; }
.iuk-doccard-desc  { display: block; font-size: 8px; font-weight: 400; line-height: 1.4; color: #6f7486; margin-top: 1px; }
.iuk-doccard-hover { background: #f2f4f8; }
.iuk-doccard-active { background: #efebff; border-color: #734bfb; }
.iuk-doccard-active .iuk-doccard-title { color: #452d97; }
.iuk-doccard-icon { width: 14px; height: 14px; flex-shrink: 0; color: #734bfb; }
.iuk .iuk-doccard-title, .dark .iuk .iuk-doccard-title { color: #19181d; }
.iuk .iuk-doccard-active .iuk-doccard-title, .dark .iuk .iuk-doccard-active .iuk-doccard-title { color: #452d97; }
.iuk .iuk-doccard-desc, .dark .iuk .iuk-doccard-desc { color: #6f7486; }
.iuk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; width: 100%; }
.iuk-grid2 > * { min-width: 0; }

/* ---- Separator with label ---- */
.iuk-sep { display: flex; align-items: center; gap: 9px; font-size: 9px; color: #6f7486; width: 100%; }
.iuk-sep::before, .iuk-sep::after { content: ""; flex: 1; height: 1px; background: #d8dee9; }
.iuk .iuk-sep, .dark .iuk .iuk-sep { color: #6f7486; }

/* ---- Alert ---- */
.iuk-alert {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 9px 10px; border-radius: 4px; border: 1px solid;
  text-align: left; color: #19181d;
}
.iuk-alert-center { align-items: center; }
.iuk-alert svg { width: 11px; height: 11px; flex-shrink: 0; margin-top: 1px; }
.iuk-alert-center svg { margin-top: 0; }
.iuk-alert-title { font-size: 10px; font-weight: 600; line-height: 1.4; }
.iuk-alert-text  { font-size: 9px; font-weight: 400; line-height: 1.45; }
.iuk-alert-info    { background: #e9f2ff; border-color: #1e7afd; }
.iuk-alert-info svg    { color: #1e7afd; }
.iuk-alert-success { background: #e8f5e9; border-color: #00c853; }
.iuk-alert-success svg { color: #00c853; }
.iuk-alert-warning { background: #fff3e0; border-color: #ff9800; }
.iuk-alert-warning svg { color: #ff9800; }
.iuk-alert-danger  { background: #ffebee; border-color: #e91b0c; }
.iuk-alert-danger svg  { color: #e91b0c; }
.iuk-alert-primary { background: #efebff; border-color: #734bfb; }
.iuk-alert-primary svg { color: #734bfb; }
.iuk .iuk-alert, .dark .iuk .iuk-alert { color: #19181d; }

/* ---- Tip: icon + text, no box ---- */
.iuk-tip { display: flex; align-items: flex-start; gap: 7px; text-align: left; }
.iuk-tip svg { width: 11px; height: 11px; flex-shrink: 0; margin-top: 1px; color: #734bfb; }
.iuk-tip-error svg { color: #e91b0c; }
.iuk-tip-text { font-size: 9px; font-weight: 400; line-height: 1.5; color: #6f7486; }
.iuk .iuk-tip-text, .dark .iuk .iuk-tip-text { color: #6f7486; }

/* ---- Info field: purple confirmation pill ---- */
.iuk-infofield {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px;
  background: #efebff; border: 1px solid #d8dee9; border-radius: 4px;
  text-align: left;
}
.iuk-infofield svg { width: 11px; height: 11px; flex-shrink: 0; color: #734bfb; }
.iuk-infofield-text { font-size: 9px; font-weight: 400; line-height: 1.45; color: #19181d; }
.iuk .iuk-infofield-text, .dark .iuk .iuk-infofield-text { color: #19181d; }

/* ---- Timer ---- */
.iuk-timer {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 600; color: #6f7486;
}
.iuk-timer svg { width: 11px; height: 11px; }
.iuk-timer-val { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em; }
.iuk .iuk-timer, .dark .iuk .iuk-timer { color: #6f7486; }

/* ---- Spinner (static arc — no animation, docs visuals are still) ---- */
.iuk-spinner { display: grid; place-items: center; padding: 14px 0; }
.iuk-spinner svg { width: 44px; height: 44px; color: #734bfb; }

/* ---- Result icon ---- */
.iuk-result { display: grid; place-items: center; gap: 9px; padding: 6px 0; }
.iuk-result svg { width: 56px; height: 56px; }
.iuk-result-success svg { color: #00c853; }
.iuk-result-warning svg { color: #ff9800; }
.iuk-result-danger  svg { color: #e91b0c; }

/* ---- Camera frame ---- */
.iuk-cam {
  position: relative; overflow: hidden; width: 100%;
  background: #19181d;
  border: 1px solid #d8dee9; border-radius: 8px;
}
.iuk-cam-43   { aspect-ratio: 4 / 3; }
.iuk-cam-169  { aspect-ratio: 16 / 9; }

/* document overlay: bright window punched out of a dark surround */
.iuk-cam-window {
  position: absolute; top: 7.5%; left: 10%; right: 10%; bottom: 7.5%;
  border-radius: 4px;
  box-shadow: 0 0 8px 140px rgb(0 0 0 / 0.35);
}
.iuk-cam-corners { position: absolute; inset: 0; border: 3px solid rgb(255 255 255 / 0.15); border-radius: 4px; }
.iuk-cam-corner { position: absolute; width: 9%; height: 14%; }
.iuk-cam-corner-tl { top: 0; left: 0;  border-top: 3px solid #fff; border-left: 3px solid #fff;  border-top-left-radius: 4px; }
.iuk-cam-corner-tr { top: 0; right: 0; border-top: 3px solid #fff; border-right: 3px solid #fff; border-top-right-radius: 4px; }
.iuk-cam-corner-bl { bottom: 0; left: 0;  border-bottom: 3px solid #fff; border-left: 3px solid #fff;  border-bottom-left-radius: 4px; }
.iuk-cam-corner-br { bottom: 0; right: 0; border-bottom: 3px solid #fff; border-right: 3px solid #fff; border-bottom-right-radius: 4px; }

/* face oval: masked surround + a ring that changes colour by state */
.iuk-cam-oval {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 34% 44% at 50% 46%, rgb(0 0 0 / 0) 50%, rgb(38 37 45 / 0.30) 50%);
}
.iuk-cam-ring {
  position: absolute; top: 2%; left: 16%; width: 68%; height: 88%;
  border: 3px solid #fff; border-radius: 50%;
}
.iuk-cam-ok    .iuk-cam-ring { border-color: #00c853; }
.iuk-cam-error .iuk-cam-ring { border-color: #e91b0c; }

/* camera hint pill */
.iuk-cam-hint {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
  padding: 4px 9px; border-radius: 50rem;
  background: rgb(25 24 29 / 0.62);
  font-size: 8px; font-weight: 600; color: #fff; white-space: nowrap;
}
.iuk .iuk-cam-hint, .dark .iuk .iuk-cam-hint { color: #fff; }

/* upload empty state */
.iuk-cam-upload {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: #f7f8fa; color: #6f7486; text-align: center; padding: 10px;
}
.iuk-cam-upload svg { width: 16px; height: 16px; color: #734bfb; }
.iuk-cam-upload-lbl { font-size: 9px; font-weight: 600; color: #734bfb; }
.iuk .iuk-cam-upload-lbl, .dark .iuk .iuk-cam-upload-lbl { color: #734bfb; }

/* review scrim over a captured shot */
.iuk-cam-scrim {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: rgb(44 45 55 / 0.70); color: #fff; text-align: center; padding: 10px;
  font-size: 8px; line-height: 1.4;
}
.iuk .iuk-cam-scrim, .dark .iuk .iuk-cam-scrim { color: #fff; }

/* shutter */
.iuk-cam-shutter {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #fff; display: grid; place-items: center;
}
.iuk-cam-shutter::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #734bfb; }

/* ---- Stylised ID document artwork ---- */
.iuk-idcard {
  position: relative; overflow: hidden;
  width: 82%; aspect-ratio: 1.585;
  border-radius: 4px;
  background: linear-gradient(135deg, #a98bff 0%, #d8b4fe 50%, #fecdd3 100%);
}
.iuk-idcard-photo { position: absolute; left: 8%; top: 14%; width: 26%; height: 56%; border-radius: 2px; background: rgb(255 255 255 / 0.45); }
.iuk-idcard-lines { position: absolute; left: 40%; right: 9%; top: 18%; height: 46%; background: repeating-linear-gradient(180deg, transparent 0, transparent 4px, rgb(255 255 255 / 0.5) 4px, rgb(255 255 255 / 0.5) 6px); }
.iuk-idcard-mrz  { position: absolute; left: 8%; right: 8%; bottom: 9%; height: 13%; background: repeating-linear-gradient(90deg, rgb(255 255 255 / 0.55) 0, rgb(255 255 255 / 0.55) 3px, transparent 3px, transparent 6px); }
.iuk-cam-center { position: absolute; inset: 0; display: grid; place-items: center; }

/* ---- Flow strip ---- */
.iuk-strip { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.iuk-strip-item { flex: 0 1 168px; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.iuk-strip-cap { font-size: 11px; font-weight: 600; line-height: 1.35; color: rgb(var(--gray-700)); text-align: center; }
.dark .iuk-strip-cap { color: rgb(var(--gray-300)); }

/* ---- Bank card artwork (payment card, distinct from IdCard) ---- */
.iuk-bankcard {
  position: relative; overflow: hidden;
  width: 84%; aspect-ratio: 1.585;
  border-radius: 5px;
  background: linear-gradient(135deg, #5b41c8 0%, #7c58f0 46%, #a98bff 100%);
  box-shadow: 0 3px 10px rgb(25 24 29 / 0.28);
}
.iuk-bankcard-chip {
  position: absolute; left: 9%; top: 27%; width: 15%; height: 20%;
  border-radius: 2px;
  background: linear-gradient(160deg, #ffd88a, #e0a82e);
}
.iuk-bankcard-chip::after {
  content: ""; position: absolute; inset: 26% 12%;
  background: repeating-linear-gradient(90deg, rgb(0 0 0 / 0.18) 0, rgb(0 0 0 / 0.18) 1px, transparent 1px, transparent 3px);
}
.iuk-bankcard-num {
  position: absolute; left: 9%; right: 9%; top: 56%;
  display: flex; justify-content: space-between; gap: 4%;
}
.iuk-bankcard-num span {
  flex: 1; height: 5px; border-radius: 2px;
  background: rgb(255 255 255 / 0.62);
}
.iuk-bankcard-num span:last-child { background: rgb(255 255 255 / 0.92); }
.iuk-bankcard-name {
  position: absolute; left: 9%; width: 44%; bottom: 13%;
  height: 4px; border-radius: 2px; background: rgb(255 255 255 / 0.5);
}
.iuk-bankcard-brand {
  position: absolute; right: 9%; bottom: 11%;
  width: 16%; height: 9%; border-radius: 2px;
  background: rgb(255 255 255 / 0.42);
}

/* card-shaped capture window: wider and shallower than the document one */
.iuk-cam-window-card {
  position: absolute; top: 20%; left: 11%; right: 11%; bottom: 20%;
  border-radius: 5px;
  box-shadow: 0 0 8px 140px rgb(0 0 0 / 0.35);
}
.iuk-cam-corners-card { position: absolute; top: 20%; left: 11%; right: 11%; bottom: 20%; border-radius: 5px; }
.iuk-cam-corners-card .iuk-cam-corner { width: 13%; height: 22%; }

/* ---- Upload dropzone (traced from bank-card.idenfy.com .file-select-box) ---- */
.iuk-upload {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; width: 100%; min-height: 74px; padding: 12px 10px;
  text-align: center; color: #19181d;
  background: #f2f4f8; border-radius: 4px;
  outline: 1px dashed #d8dee9; outline-offset: -1px;
}
.iuk-upload-drag { background: #d8dee9; }
.iuk-upload svg { width: 16px; height: 16px; color: #734bfb; flex-shrink: 0; }
.iuk-upload-prompt { font-size: 9px; font-weight: 400; line-height: 1.45; color: #19181d; }
.iuk-upload-trigger { color: #734bfb; font-weight: 600; }
.iuk-upload-hint { font-size: 8px; font-weight: 400; line-height: 1.4; color: #6f7486; }
.iuk .iuk-upload-prompt, .dark .iuk .iuk-upload-prompt { color: #19181d; }
.iuk .iuk-upload-trigger, .dark .iuk .iuk-upload-trigger { color: #734bfb; }
.iuk .iuk-upload-hint, .dark .iuk .iuk-upload-hint { color: #6f7486; }

/* ---- Uploaded-file row (PDFs get no preview) ---- */
.iuk-filerow {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 74px; padding: 12px;
  background: #f7f8fa; border: 1px solid #d8dee9; border-radius: 8px;
}
.iuk-filerow svg { width: 14px; height: 14px; flex-shrink: 0; color: #6f7486; }
.iuk-filerow-name { display: block; font-size: 9px; font-weight: 600; line-height: 1.4; color: #19181d; word-break: break-all; min-width: 0; }
.iuk-filerow-meta { display: block; font-size: 8px; font-weight: 400; line-height: 1.4; color: #6f7486; margin-top: 2px; }
.iuk .iuk-filerow-name, .dark .iuk .iuk-filerow-name { color: #19181d; }
.iuk .iuk-filerow-meta, .dark .iuk .iuk-filerow-meta { color: #6f7486; }

/* ---- Desktop hand-off ---- */
.iuk-handoff { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 100%; }
.iuk-qr {
  width: 76px; height: 76px; padding: 5px; flex-shrink: 0;
  background: #fff; border: 1px solid #d8dee9; border-radius: 4px;
}
.iuk-qr svg { display: block; width: 100%; height: 100%; color: #19181d; }
.iuk-handoff-or { font-size: 8px; font-weight: 600; color: #6f7486; text-transform: uppercase; letter-spacing: 0.06em; }
.iuk .iuk-handoff-or, .dark .iuk .iuk-handoff-or { color: #6f7486; }
.iuk-handoff-escape { font-size: 8px; font-weight: 600; line-height: 1.4; color: #734bfb; text-align: center; }
.iuk .iuk-handoff-escape, .dark .iuk .iuk-handoff-escape { color: #734bfb; }

/* ---- Masked card option ---- */
.iuk-maskedcard {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; min-width: 0;
  background: #fff; border: 1px solid #d8dee9; border-radius: 4px;
}
.iuk-maskedcard-active { background: #efebff; border-color: #734bfb; }
.iuk-maskedcard-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; font-weight: 600; color: #19181d; letter-spacing: 0.04em;
}
.iuk-maskedcard-active .iuk-maskedcard-num { color: #452d97; }
.iuk-maskedcard-exp { font-size: 8px; font-weight: 500; color: #6f7486; white-space: nowrap; }
.iuk .iuk-maskedcard-num, .dark .iuk .iuk-maskedcard-num { color: #19181d; }
.iuk .iuk-maskedcard-active .iuk-maskedcard-num, .dark .iuk .iuk-maskedcard-active .iuk-maskedcard-num { color: #452d97; }
.iuk .iuk-maskedcard-exp, .dark .iuk .iuk-maskedcard-exp { color: #6f7486; }

/* ---- Consent assurance panel ---- */
.iuk-assurances {
  display: flex; flex-direction: column; gap: 7px;
  width: 100%; padding: 11px 12px;
  background: #f2f4f8; border-radius: 4px;
}
.iuk-assurance { display: flex; align-items: center; gap: 8px; text-align: left; }
.iuk-assurance-chip {
  display: grid; place-items: center; flex-shrink: 0;
  width: 19px; height: 19px; border-radius: 4px; background: #fff;
}
.iuk-assurance-chip svg { width: 11px; height: 11px; color: #734bfb; }
.iuk-assurance-text { font-size: 9px; font-weight: 400; line-height: 1.4; color: #19181d; min-width: 0; }
.iuk .iuk-assurance-text, .dark .iuk .iuk-assurance-text { color: #19181d; }

/* ---- Modal / dialog (traced from .custom-dialog + ivs-message-frame) ---- */
.iuk-modalwrap {
  position: relative; overflow: hidden;
  padding: 16px 12px;
  background: #3a3743; border-radius: 8px;
}
.iuk-modal {
  display: flex; flex-direction: column; overflow: hidden;
  width: 100%; max-width: 300px; margin: 0 auto;
  background: #fff; border-radius: 4px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.08), 0 2px 2px rgb(0 0 0 / 0.02);
}
.iuk-modal-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid #d8dee9;
}
.iuk-modal-title { font-size: 11px; font-weight: 700; line-height: 1.35; color: #19181d; min-width: 0; }
.iuk-modal-body { padding: 12px; text-align: center; }
.iuk-modal-panel {
  padding: 12px 10px; border-radius: 2px;
  background: #f7f8fa; border: 1px solid #d8dee9;
}
.iuk-modal-art { display: grid; place-items: center; margin-bottom: 9px; }
.iuk-modal-art svg { width: 40px; height: 40px; color: #ff9800; }
.iuk-modal-msg { font-size: 9px; font-weight: 600; line-height: 1.45; color: #19181d; }
.iuk-modal-foot { padding: 10px 12px 12px; border-top: 1px solid #d8dee9; }
.iuk .iuk-modal-title, .dark .iuk .iuk-modal-title,
.iuk .iuk-modal-msg, .dark .iuk .iuk-modal-msg { color: #19181d; }

/* ---- Shutter row: switch | shutter | upload ---- */
.iuk-shutterbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 4px 0; }
.iuk-shutterbar-side { flex: 1 1 0; display: grid; place-items: center; }
.iuk-shutterbar-side svg { width: 15px; height: 15px; color: #6f7486; }
.iuk-shutter-btn { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #734bfb; display: grid; place-items: center; flex-shrink: 0; }
.iuk-shutter-btn::after { content: ""; width: 17px; height: 17px; border-radius: 50%; background: #734bfb; }
.iuk-shutter-off { border-color: #eaeaeb; }
.iuk-shutter-off::after { background: #eaeaeb; }

/* ==================== DASHBOARD SETTINGS SKIN ==========================
   Second skin, same token layer. Traced from the eight captures in
   temp/html_for_visuals/idv_settings/. Product measurements, then the
   0.65x docs value actually used:
     card       padding 24 -> 16   radius 4    border 1px #d8dee9
     h3         16/600   -> 11     h4  14/600 -> 9     body 12 -> 8 (#6f7486)
     toggle     36x24    -> 24x16  thumb 20 -> 13      travel 12 -> 8
     tab        8px pad, active #734bfb + inset 0 -2px 0 #734bfb
     badge      10/500, pad 2/4, radius 2
     chip       10/500 #6f7486 on #e6e9ef, radius 2
   Fixed light, like the product skin above. Never gets a .dark override.
   ====================================================================== */

/* ---- Page frame: header, tab strip, stacked cards ---- */
.iuk-ds { width: 100%; max-width: 520px; margin: 0 auto; padding: 12px; background: #f7f8fa; border-radius: 6px; box-sizing: border-box; }
.iuk-ds-flush { padding: 0; background: none; border-radius: 0; }
.iuk-ds-h1 { margin: 0 0 10px; font-size: 13px; font-weight: 700; line-height: 1.3; color: #19181d; }

/* ---- Tab strip ---- */
.iuk-ds-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.iuk-ds-tab { padding: 5px 2px; font-size: 9px; font-weight: 600; line-height: 1.35; color: #19181d; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.iuk-ds-tab-on { color: #734bfb; box-shadow: inset 0 -2px 0 #734bfb; }
.iuk-ds-tab-off { color: #c0c0c3; }

/* ---- Card: white panel, one per settings group ---- */
.iuk-ds-card { padding: 16px; margin-bottom: 6px; background: #fff; border: 1px solid #d8dee9; border-radius: 4px; box-sizing: border-box; }
.iuk-ds-card:last-child { margin-bottom: 0; }
.iuk-ds-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.iuk-ds-cardtitle { margin: 0; font-size: 11px; font-weight: 600; line-height: 1.4; color: #19181d; min-width: 0; word-break: break-word; }
.iuk-ds-chev { flex-shrink: 0; width: 12px; height: 12px; color: #19181d; }
.iuk-ds-chev-up { transform: rotate(-180deg); }
.iuk-ds-cardbody { margin-top: 14px; display: flex; flex-direction: column; gap: 14px; }

/* ---- Setting row: label + description left, control right ---- */
.iuk-ds-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.iuk-ds-row-text { min-width: 0; flex: 1 1 auto; }
.iuk-ds-row-title { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.iuk-ds-h4 { margin: 0; font-size: 9px; font-weight: 600; line-height: 1.45; color: #19181d; word-break: break-word; }
.iuk-ds-desc { margin: 2px 0 0; font-size: 8px; font-weight: 400; line-height: 1.5; color: #6f7486; word-break: break-word; }
.iuk-ds-row-ctl { flex: 0 0 auto; display: flex; align-items: center; }
.iuk-ds-row-stack { display: block; }
.iuk-ds-row-stack .iuk-ds-row-ctl { margin-top: 6px; display: block; }

/* ---- Toggle ---- */
.iuk-ds-toggle { width: 24px; height: 16px; padding: 1.5px; border-radius: 50rem; background: #e6e9ef; box-sizing: border-box; display: block; }
.iuk-ds-toggle-on { background: #734bfb; }
.iuk-ds-toggle-off { background: #eaeaeb; }
.iuk-ds-thumb { display: block; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / 0.16); }
.iuk-ds-toggle-on .iuk-ds-thumb { transform: translateX(8px); }

/* ---- Badge ---- */
.iuk-ds-badge { display: inline-block; padding: 1px 3px; font-size: 8px; font-weight: 500; line-height: 1.25; letter-spacing: 0.02em; border-radius: 2px; white-space: nowrap; color: #fff; background: #734bfb; }
.iuk-ds-badge-info { background: #1e7afd; }
.iuk-ds-badge-success { background: #00c853; }
.iuk-ds-badge-secondary { background: #6f7486; }

/* ---- Field: bordered box with a notched floating label ---- */
.iuk-ds-field { display: inline-block; vertical-align: top; position: relative; min-width: 120px; max-width: 100%; padding: 6px 8px; border: 1px solid #d8dee9; border-radius: 4px; background: #fff; box-sizing: border-box; }
.iuk-ds-field-lbl { position: absolute; top: -4px; left: 6px; padding: 0 3px; background: #fff; font-size: 7px; font-weight: 500; line-height: 1; color: #6f7486; white-space: nowrap; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; }
.iuk-ds-field-val { font-size: 8px; font-weight: 600; line-height: 1.5; color: #19181d; word-break: break-word; }
.iuk-ds-field-ph { color: #6f7486; font-weight: 400; }
.iuk-ds-field-row { display: flex; align-items: center; gap: 6px; }
.iuk-ds-field-row > .iuk-ds-field-val { flex: 1 1 auto; min-width: 0; }
.iuk-ds-caret { flex-shrink: 0; width: 10px; height: 10px; color: #6f7486; }

/* ---- Multi-select chips ---- */
.iuk-ds-chips { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; flex: 1 1 auto; }
.iuk-ds-chip { display: inline-flex; align-items: stretch; font-size: 8px; font-weight: 500; line-height: 1.4; color: #6f7486; background: #e6e9ef; border-radius: 2px; overflow: hidden; max-width: 100%; }
.iuk-ds-chip-x { padding: 1px 3px; background: rgb(216 222 233); color: #6f7486; }
.iuk-ds-chip-lbl { padding: 1px 3px; word-break: break-word; }

/* Mintlify's prose styles reach inside snippets -- pin these in both themes */
.iuk .iuk-ds-h1, .dark .iuk .iuk-ds-h1,
.iuk .iuk-ds-cardtitle, .dark .iuk .iuk-ds-cardtitle,
.iuk .iuk-ds-h4, .dark .iuk .iuk-ds-h4,
.iuk .iuk-ds-field-val, .dark .iuk .iuk-ds-field-val { color: #19181d; }
.iuk .iuk-ds-desc, .dark .iuk .iuk-ds-desc,
.iuk .iuk-ds-field-lbl, .dark .iuk .iuk-ds-field-lbl,
.iuk .iuk-ds-chip, .dark .iuk .iuk-ds-chip { color: #6f7486; }
.iuk .iuk-ds-tab-on, .dark .iuk .iuk-ds-tab-on { color: #734bfb; }
.iuk .iuk-ds-badge, .dark .iuk .iuk-ds-badge { color: #fff; }
`;
  return <style>{css}</style>;
};

<UiKitStyles />

**Location:** **Settings** → **Know Your Customer (KYC)** → **User Interface & SDK**

<DashPage title="Identity verifications (KYC)" alt="Mock of the KYC User interface and SDK tab: a User interface card with nine toggles from Photo AI insights through Automatic country and document detection, and an SDK card with a face authentication auto-capture toggle, facial feature detection and auto-capture multi-selects, and toggles for the mobile blur and glare check, SDK full customization and SDK white labeling.">
  <DashTabs active="User interface & SDK" items={["Configuration", "Document & identity verification", "Biometric & liveness", "AML & fraud prevention", "Proof of address", "User interface & SDK", "Branding", "Privacy policy"]} />

  <DashCard title="User interface">
    <DashSetting title="Photo AI insights" desc="Enables AI insights to check for image quality issues (e.g., blur, glare) on photos of the front of the document and utility bills." control={<DashToggle on />} />

    <DashSetting title="Show document selection" desc="Displays the document selection screen to the client. If setting is disabled, system automatically tries to detect the document type from the uploaded photo." control={<DashToggle on />} />

    <DashSetting title="Show session timer" desc="Displays a timer showing the remaining time for the verification session." control={<DashToggle on />} />

    <DashSetting title="Show footer" desc="Displays the footer on the identity verification screen." control={<DashToggle on />} />

    <DashSetting title="Show watermark" desc="Displays the iDenfy watermark during the identity verification process." control={<DashToggle on />} />

    <DashSetting title="Show instructions" desc="Displays instructions to the user during the identity verification process." control={<DashToggle on />} />

    <DashSetting title="Skip document onboarding" desc="Removes additional instructional screens, taking the user directly to the image capture step for their document." control={<DashToggle />} />

    <DashSetting title="Show logo on iFrame" desc="Displays your company logo on the iFrame during the verification process." control={<DashToggle />} />

    <DashSetting title="Automatic country and document detection" control={<DashToggle />} />
  </DashCard>

  <DashCard title="SDK">
    <DashSetting title="Face authentication auto-capture" desc="Automatically captures the user's face during a face authentication session when a face is detected." control={<DashToggle on />} />

    <DashSetting stack title="Facial feature detection" desc="Specifies which facial features, such as eyes or a full face, must be detected in the frame for a mobile image capture to be successful." control={<DashSelect label="Facial feature detection" values={["Full face"]} width="100%" />} />

    <DashSetting stack title="Auto-capture" desc="The mobile SDK automatically captures a photo when a document or face is detected, eliminating the need for the user to press a button." control={<DashSelect label="Auto-capture" values={["Document", "Face"]} width="100%" />} />

    <DashSetting title="Blur and glare check mobile" desc="Checks for blur and glare on the document's front side in real-time within the mobile SDK." control={<DashToggle on />} />

    <DashSetting title="SDK full customization" desc="Allows for full customization of the SDK layout and components with your own branding." control={<DashToggle />} />

    <DashSetting title="SDK white labeling" desc="Removes the iDenfy watermark from the SDK during identity verification." control={<DashToggle />} />
  </DashCard>
</DashPage>

***

## Session Timer

The timer stays hidden until the session is close to expiring, so users are not watching a countdown from the moment they start. When it appears depends on the total session length — whether that comes from this dashboard or from `sessionLength` at [token generation](/kyc/generate-token):

| Session length      | Timer appears with       |
| ------------------- | ------------------------ |
| Under 10 minutes    | 1 minute 15 seconds left |
| 10–20 minutes       | 2 minutes left           |
| 20–30 minutes       | 3 minutes left           |
| 30 minutes and over | 5 minutes left           |

If the threshold would fall in the first half of a very short session, the timer appears at the halfway point instead. In the last 30 seconds it switches to a critical state to make the remaining time unmistakable.

Turning **Show session timer** off still hides it everywhere. The screens it appears on are unchanged: document selection, onboarding, instructions, device selection, and the capture step on desktop and light mobile. It is not shown on email or phone verification, questionnaires, bank verification, the full-screen mobile camera, liveness, eID, photo retake, or the completion screen.

<Note>
  This later-appearing timer is rolling out as an A/B test across the web flow, so only a share of your users see it — the rest keep the timer that counts down from the start of the flow.
</Note>

***

## Document Selection and Back Navigation

While **Show document selection** is on, users can return to that screen with the **Back** button at any point they are allowed to go back — including after a document photo has already been taken, so a wrong document type no longer forces them to finish the wrong verification or abandon the session. Picking a different type overwrites the photos captured earlier in that session.

With the setting off there is no selection screen to return to, and the document type is inferred from the photo instead.

***

## Automatic Country and Document Detection

With this on, the user is not shown a manual country or document selection screen at all. It is the better choice when your users may verify with a document issued somewhere other than where they are — a foreign national onboarding for a job abroad, for instance.

1. **Direct to camera** — the user goes straight to the document capture screen.
2. **Auto-detection** — the user's location is detected via IP, and accepted documents for that country are applied.
3. **Scan and recognize** — the document is identified from the capture.
4. **Manual fallback** — if recognition fails through poor lighting or an unreadable image, the user is asked to select country and document type after all.

***

## Localization

<Info>
  * **Default:** Localization is enabled automatically.
  * **Detection:** The system detects the language from the user's IP address.
  * **Limitation:** Browser language settings are ignored.
  * **Persistence:** If the user changes the language mid-verification, that choice is kept for the rest of the session — including when they continue on another device after scanning the QR code or opening an SMS link. This applies regardless of the `locale` passed when the session was created.

  [All available locales](/resources/supported-languages#identity-verification-kyc-languages)
</Info>


## Related topics

- [White Labeling and Branding Guide](/guides/dashboard/settings/idv-flow-and-branding-guide.md)
- [User Interface (KYB)](/guides/dashboard/settings/user-interface.md)
- [Android SDK Logging and Webhooks](/sdks/android/logging-webhooks.md)
- [iOS SDK Logging and Webhooks](/sdks/ios/logging-webhooks.md)
- [iOS SDK Quickstart](/sdks/ios/quickstart.md)
