BlinkCard UI: examples

Minimal example

UI component with default behaviour where it's required to set valid license key, engine location and recognizer.

Recognizer: BlinkCardRecognizer

Note: since this page has multiple components, only this one has enabled drag and drop feature.

<blinkcard-in-browser
  engine-location="http://localhost/resources/"
  license-key="LICENSE-KEY-GOES-HERE"
  recognizers="BlinkCardRecognizer"
></blinkcard-in-browser>

BlinkCard scan with scanning line

UI component with default behaviour where it's required to set valid license key and recognizer.

Recognizer: BlinkCardRecognizer

<blinkcard-in-browser
engine-location="http://localhost/resources/"
license-key="LICENSE-KEY-GOES-HERE"
recognizers="BlinkCardRecognizer"
show-scanning-line="true"
></blinkcard-in-browser>

Custom messages

It's possible to change default text messages which are displayed to the user.

Use attribute/property translations to change default messages.

Recognizer: BlinkCardRecognizer

<blinkcard-in-browser
  engine-location="http://localhost/resources/"
  license-key="LICENSE-KEY-GOES-HERE"
  recognizers="BlinkCardRecognizer"
></blinkcard-in-browser>
<script>
  const el = document.querySelector('blinkcard-in-browser');

  // See src/utils/translations.ts for possible translation keys
  el.translations = {
    'action-message': 'Alternative CTA'
  };
</script>

RTL support

Set HTML attribute dir="rtl".

Recognizer: BlinkCardRecognizer

<blinkcard-in-browser
  engine-location="http://localhost/resources/"
  license-key="LICENSE-KEY-GOES-HERE"
  recognizers="BlinkCardRecognizer"
  dir="rtl"
></blinkcard-in-browser>
<script>
  const el = document.querySelector('blinkcard-in-browser');

  // See src/utils/translations.ts for possible translation keys
  el.translations = {
    'action-message': 'Alternative CTA'
  };
</script>

UI customization

It's possible to ize UI of BlinkCardRecognizer component by using preset CSS variables.

Recognizer: BlinkCardRecognizer

Customizator

CSS variables

/* Global font family */
--mb-font-family:                             inherit;

/* Component (UI with buttons) */
--mb-component-background:                    #FFF;

--mb-component-font-color:                    #000;
--mb-component-font-size:                     14px;
--mb-component-font-style:                    normal;
--mb-component-font-weight:                   400;
--mb-component-letter-spacing:                normal;
--mb-component-line-height:                   20px;
--mb-component-text-transform:                none;

--mb-component-border-color:                  rgba(120, 120, 128, 0.2);
--mb-component-border-radius:                 5px;
--mb-component-border-style:                  solid;
--mb-component-border-width:                  1px;

--mb-component-box-shadow:                    none;

--mb-component-button-background:             #FFF;
--mb-component-button-border-color:           rgba(120, 120, 128, 0.2);
--mb-component-button-border-color-disabled:  rgba(116, 116, 128, 0.08);
--mb-component-button-border-radius:          20px;
--mb-component-button-border-style:           solid;
--mb-component-button-border-width:           1px;

--mb-component-button-box-shadow:             0px 1px 4px rgba(0, 0, 0, 0.1);
--mb-component-button-box-shadow-disabled:    none;

/* User feedback (messages below buttons) */
--mb-feedback-font-color-error:               #FF2D55;
--mb-feedback-font-color-info:                rgba(60, 60, 67, 0.7);
--mb-feedback-font-size:                      12px;
--mb-feedback-font-style:                     normal;
--mb-feedback-font-weight:                    400;
--mb-feedback-letter-spacing:                 normal;
--mb-feedback-line-height:                    16px;
--mb-feedback-text-transform:                 none;

/* Overlays */
--mb-overlay-draganddrop-background:          rgba(72, 178, 232, 0.25);
--mb-overlay-draganddrop-background-error:    rgba(255, 45, 85, 0.25);
--mb-overlay-draganddrop-border-color-error:  #FF2D55;
--mb-overlay-draganddrop-border-style-error:  dashed;