UX & Branding

All the properties that define the layout are located in the file uq-styles.plist and uq-styles-dark.plist. Below we describe all the elements of the layout that can be customized and related properties.

Element 1:

• None

Element 2:

• uq_layout_background_image: name of the image in your application’s asset. If defined, it takes precedence on the other properties

• uq_layout_background_color: background colour

Element 3:

• uq_navigation_back_arrow_image

• uq_navigation_item_tint_color

Element 4:

• uq_layout_logo_image

• uq_logo_image_hidden: YES if you want to hide the logo

Instructions for Scanning

Element 5:

• uq_animation_scan_id: for any ID

• uq_animation_scan_passport: for passport

Element 6:

• uq_title_font_name

• uq_title_font_weight

• uq_title_font_size

• uq_title_color

• uq_title_text_uppercase

• uq_description_font_name

• uq_description_font_weight

• uq_description_font_size

• uq_description_color

• uq_text_view_position: set to top if you want to have the text above the animation

• uq_text_view_padding

• uq_text_view_padding_top

Element 7:

• uq_button_title_font_name

• uq_button_title_font_weight

• uq_button_title_font_size

• uq_button_title_color

• uq_button_border_color

• uq_button_background_color

• uq_button_border_width

• uq_button_corner_radius

• uq_button_height

• uq_button_width

• uq_button_background_image

• uq_button_indicator_image

• uq_button_indicator_image_hidden

• uq_button_padding

Instructions for Reading

Element 1:

• uq_button_skip_font_size

• uq_button_skip_color

Element 2: Animation in GIF format (static PNG and JPEG is supported as well):

• uq_animation_read_passport_nfc: for passport

• uq_animation_read_id_nfc: for any ID

Element 3:

• uq_press_for_help_button_title_font_name

• uq_press_for_help_button_title_font_weight

• uq_press_for_help_button_title_font_size

• uq_press_for_help_button_title_color

• uq_press_for_help_button_border_color

• uq_press_for_help_button_background_color

• uq_press_for_help_button_border_width

• uq_press_for_help_button_corner_radius

• uq_press_for_help_button_width

• uq_press_for_help_button_title_underline

Help for Reading of Passport

Element 1: animation in GIF format. There are three animations from page 2 to 4. First page has a fixed image (static PNG and JPEG is supported as well):

• uq_animation_read_passport_nfc_help_1

• uq_animation_read_passport_nfc_help_2

• uq_animation_read_passport_nfc_help_3

Element 2:

• uq_page_number_color

Element 3:

• uq_page_indicator_unselected_color

• uq_page_indicator_selected_color

Progress Screen

Element 1 and 2:

• uq_progress_bar_type - circular (default) flat (standard progress bar)

• uq_progress_bar_text_position - bottom (default) top [applies to circular and flat]

• uq_progress_bar_text_padding - the space between the progress bar and the text [applies to circular and flat]

• uq_progress_bar_text_color - [applies to circular and flat]

• uq_progress_bar_color - [applies to flat only]

• uq_progress_bar_height - [applies to flat only]

• uq_progress_bar_corner_radius - [applies to flat only]

• uq_progress_bar_animation_duration - controls the speed of the animation in seconds, the higher the number the slower is the speed [applies to circular and flat]

• uq_progress_bar_stripes_color - [applies to flat only]

• uq_progress_bar_stripes_opacity - [applies to flat only]

• uq_progress_bar_stripes_orientation - left | right | vertical [applies to flat only]

• uq_progress_bar_circular_radius - [applies to circular only]

• uq_progress_bar_circular_width - [applies to circular only]

• uq_progress_bar_circular_start_color_opacity - [applies to circular only]

• uq_progress_bar_circular_start_color - [applies to circular only]

• uq_progress_bar_circular_end_color - [applies to circular only]

• uq_progress_bar_circular_start_angle - [applies to circular only]

• uq_progress_bar_circular_end_angle - [applies to circular only]

• uq_progress_bar_circular_corner_round - [applies to circular only]

Consent for Background Check

Element 1:

• uq_background_check_decline_button_title_font_name

• uq_background_check_decline_button_title_font_weight

• uq_background_check_decline_button_title_font_size

• uq_background_check_decline_button_title_color

• uq_background_check_decline_button_border_color

• uq_background_check_decline_button_background_color

• uq_background_check_decline_button_border_width

• uq_background_check_decline_button_corner_radius

• uq_background_check_decline_button_height

• uq_background_check_decline_button_width

• uq_background_check_decline_button_background_image

• uq_background_check_decline_button_indicator_image

• uq_background_check_decline_button_indicator_image_hidden

Element 2:

• uq_background_check_confirm_button_title_font_name

• uq_background_check_confirm_button_title_font_weight

• uq_background_check_confirm_button_title_font_size

• uq_background_check_confirm_button_title_color

• uq_background_check_confirm_button_border_color

• uq_background_check_confirm_button_background_color

• uq_background_check_confirm_button_border_width

• uq_background_check_confirm_button_corner_radius

• uq_background_check_confirm_button_height

• uq_background_check_confirm_button_width

• uq_background_check_confirm_button_background_image

• uq_background_check_confirm_button_indicator_image

• uq_background_check_confirm_button_indicator_image_hidden

Face Match Error

Element 1, 2, 3, 4 and 5: Define your own image in your application asset catalog (requires @1x @2x @3x version). JPEG and PNG are supported but we recommend PNG

• uq_face_perfect

• uq_face_far_away

• uq_face_too_close

• uq_face_too_light

• uq_face_too_dark