All Collections
Onboarding.Online FAQ
Q&A
Onboarding Screens Base Elements Customisation
Onboarding Screens Base Elements Customisation
O
Written by Onboarding.Online Support Team
Updated over a week ago

How can I customize the single screen in the flow?

If you want to customize one screen in the flow, drag it to the main panel, click on it and chose the pencil sign. Please note that in such case changes will be applicable only to this screen in particular.

How can I customize the single screen in the theme template?

Please click on the "Settings" button on the right upper corner of the menu "Template" and choose the required screen by clicking on it to proceed with customization. Please note that in such case, the edited screen will become a part of the renewed template; and if dragged and dropped to the main panel, it will retain the applied parameters.

What can I do with the single screen of the template in the flow?

If you click on the screen of the template in the onboarding flow, on its top icons will appear with the options to edit, clone, delete, or set the screen as the first one. Moreover, each screen contains sideboxes such as Input, Skip, and Next which help you link the current screen to any other screen needed, thus, creating logical visual constructor for your app depending on the customer's button click.

Do all screens contain the same settings for customization?

No, since each screen differs depending on its structure. You may check the number of settings available for this or that screen by clicking the pencil sign on its top in the onboarding flow or choose the needed screen on the "Customize Onboarding Theme" panel.

Can I apply 3 settings such as color, image and video to the background of the single screen at once?

No, it is not allowed per the existing system settings. You may opt for only 1 background setting to install on the chosen screen.

What settings does the "Navigation bar" contain for the single screen customization?

The "Navigation bar" contains the checkboxes with the buttons Back and Skip as well the "Page indicator" progress bar placed in-between these action buttons. By checking or unchecking the boxes you may either hide the button or install the correct parameters for each box depending on your app purposes and/or your visual constructor logic.

Can I remove the title for the "Back" and/or "Skip" buttons in the "Navigation bar" while customizing the single screen?

Yes, indeed, you may either change the titles of the buttons to whatever is required per your app needs, or you may even leave the fields empty without text.

Can I enter any title in the text fields for the "Back" and "Skip" buttons?

Yes, the title field should accept all types of input, including special symbols and numbers. If you encounter an error, please make sure that the system is not broken or experiencing other issues. If the error continues, please contact our Support Team for the required assistance.

What does the "Text background color" parameter do for active buttons "Back," "Skip," and "Next?"

This is a special background area where the text is placed in the button, which means by altering its color, you will see the whole space where the text is located. It might not coincide with the button size, its borders and background.

What is the difference between "Text background color" and "Button background color?" What changes should I see in the screen of the app?

The text is located inside the button, and if there is no button background color, it is left white, or transparent, by default. Once you customize the button background color, you may alter extra parameters such as button borders, radius, and size, while the text background color does not have such options, regardless of the color set.

What text can be written in the fields "Title" and "Subtitle" while customizing the single screen?

You may enter any characters such as letters, special symbols, numbers, lowercase, uppercase, a combination of them, spaces, Cyrillic characters and hieroglyphs. You can also use emojis and names up to 30 characters and even longer. If any error occurs in case of a too long name, you can report it to our Support Team for fixing.

Can I leave the fields "Title" and "Subtitle" empty without entering the text in the single screen?

Yes, you may leave the fields empty per your app needs, and the absence of the text will not affect the overall functionality of the screen.

What is the impact of changing the "Text line height" value in the "Title" and "Subtitle" fields in the single screen?

By changing the value, you can adjust the distance between rows of the title or subtitle. Higher values will increase the distance, making the title or subtitle text appear spaced out, while lower values will decrease the distance, potentially causing rows to overlap.

Can I apply padding left or right, up and down to any text in the screen?

Yes, you should just open the corresponding screen with the text in question, open the settings and find the checkbox with padding function to be set up per the purposes of your customization.

What if I remove the text from the "Button" tab in the single screen, will it affect the active button itself?

Yes, indeed. If the text is removed from the button, the button itself disappears from the screen. The same effect might be achieved if you uncheck the box in the text row as the checkbox is related to the visibility of the button. However, in general, the system workflow will not be affected. To make the button visible again, simply check the checkbox.

What settings can be customized in the "Table" tab in the single screen?

The tab "Table" will help install either multiple or single selection depending on the screen type you currently are working on. The drop-down menu with the available selection row layout type to be displayed in each table item, the button type, the number of the table items in the screen, and each table item parameters may be customized per your app purposes here.

What does the "ImageTitlteSubtitleCheckbox" option contain for the selection row in the "Table" tab?

This option predetermines the layout type of the selection row for the table items, where you will have the possibility to set up an image, either upload your own one or generate a sample picture with the embedded AI button while composing the prompt hint for this particular button; enter a title, compose a subtitle and customize the checkbox type.

What parameters are customizable in the "ImageTitlteSubtitleCheckbox" option in the "Table" tab?

Once you click on the "Settings" mode in the "ImageTitlteSubtitleCheckbox" option row, you will see the following parameters for customization: list background color, list border color, list border width, list border radius; selected background color, selected border color, selected border width, selected border radius; list padding (left, right, top, bottom); list box padding (left, right, top, bottom); image weidth, image height, and its padding; text align, text line height, text font family, text font size, text font weight, text color, text background color, and their padding. Please note that there are 2 separate blocks for customizing the text for the tittle and the text for the subtitle in the selection row of such a layout type, that's why, the text parameters are doubled.

What are such parameters as list background color, list border color, list border width, list border radius for?

These parameters are needed for customizing the selection rows taking into account their background color, the presence or absence of the selection list border, its weidth and color as well as its radius if you wish to make the selection list rows either more squared or rounded.

What are such parameters as selected background color, selected border color, selected border width, selected border radius for?

Once you and/or your customers choose one or several selection rows in the "Table" screen, it should be differentiated somehow visually, which means these parameters fulfill such actions for you. These settings will help you install the background color of the selected row, the presence or absence of the selected row border, its width and color as well as its radius if you wish to make the selected row(s) either more squared or rounded. To see how it works and views, you should click on a selection row in the "Preview" screen located on the main panel of the dashboard.

I changed the list border color in the "Table" tab for the single screen, but nothing happened, what went wrong?

Please make sure that you have checked the checkbox with the parameter "List border width," otherwise, the list border color will not be reflected in the selection rows in the screen.

Can I set up list borders for a special single selection row in the "Table" tab, not for all table items at once?

No, the system is made to retain the same basic design settings for all table items at once. Otherwise, you may set up a different list border for the selected row only. You may also customize the image, tittle or subtitle and the checkbox button for each table item separately.

I changed the selected border color in the "Table" tab for the single screen, but nothing happened, what went wrong?

Please make sure that you have checked the checkbox with the parameter "Selected border width" and clicked on any selection row in the "Preview" screen on the main panel; otherwise, the selected border color will not be reflected in the selection rows in the screen.

Can I choose and set up different images for every selection row in the "Table" tab for screens?

Yes, indeed, it can be done for each table item separately in the appropriate "ITEM #" field. You may install either your own image or generate it with the help of the embedded AI button by specifying a prompt hint for it so that you can receive the sample pictures.

Can I adjust the list padding in the "Table" tab in the screen?

Yes, this parameter is available with the relevant checkboxes: list-padding-left, list-padding-right, list-padding-top, list-padding-bottom. You may use up and down arrows to achieve the needed distance between title+subtitle(+image) of all table items and the top or bottom border of the screen.

What does the "CheckboxTitlteSubtitleImage" option contain for the selection row in the "Table" tab?

This option predetermines the layout type of the selection row for the table items, where you will have the possibility to customize the checkbox type, enter a title, compose a subtitle, and set up an image, either upload your own one or generate a sample picture with the embedded AI button while composing the prompt hint for this particular button.

What parameters are customizable in the "CheckboxTitlteSubtitleImage" option in the "Table" tab?

The parameters for customization in this particular layout type of the selection rows for the table items are totally the same as for "ImageTitlteSubtitleCheckbox" option in the "Table" tab.

What does the "ImageTitlteCheckbox" option contain for the selection row in the "Table" tab?

This option predetermines the layout type of the selection row for the table items, where you will have the possibility to set up an image, either upload your own one or generate a sample picture with the embedded AI button while composing the prompt hint for this particular button; enter a title, and customize the checkbox type.

What does the "CheckboxTitleImage" option contain for the selection row in the "Table" tab?

This option predetermines the layout type of the selection row for the table items, where you will have the possibility to customize the checkbox type, enter a title, and set up an image, either upload your own one or generate a sample picture with the embedded AI button while composing the prompt hint for this particular button.

What does the "TitleCheckbox" option contain for the selection row in the "Table" tab?

This option predetermines the layout type of the selection row for the table items, where you will have the possibility to enter a title and customize the checkbox type.

What does the "CheckboxTitle" option contain for the selection row in the "Table" tab?

This option predetermines the layout type of the selection row for the table items, where you will have the possibility to customize the checkbox type and enter a title.

What does the "ImageCheckbox" option contain for the selection row in the "Table" tab?

This option predetermines the layout type of the selection row for the table items, where you will have the possibility to set up an image, either upload your own one or generate a sample picture with the embedded AI button while composing the prompt hint for this particular button; and customize the checkbox type.

What does the "ImageTitle" option contain for the selection row in the "Table" tab?

This option predetermines the layout type of the selection row for the table items, where you will have the possibility to set up an image, either upload your own one or generate a sample picture with the embedded AI button while composing the prompt hint for this particular button; and enter a title.

What does the "TitleImage" option contain for the selection row in the "Table" tab?

This option predetermines the layout type of the selection row for the table items, where you will have the possibility to enter a title and set up an image, either upload your own one or generate a sample picture with the embedded AI button while composing the prompt hint for this particular button.

What does the "Image" option contain for the selection row in the "Table" tab?

This option predetermines the layout type of the selection row for the table items, where you will have the possibility to set up an image, either upload your own one or generate a sample picture with the embedded AI button while composing the prompt hint for this particular button.

How many selection rows can be added to the table items?

You may add an unlimited number of the table items for the selection in the screen by clicking "+ ADD"; however, please note the block with much data for choice might seem heavy and not convenient for customers to navigate in one screen, it is better to split information into several screens with the same settings for customization.

What types of selection checkbox buttons are available for customization?

In the "Table" settings you may opt for either square or circle buttons for selection.

What parameters can be set up for the checkbox button types in the "Table" tab in the screen?

You may set the checkbox button location with padding tools, checkbox color, thus, specifying the color of all selection rows in the screen, and selected color, which means there will appear a certain color in the row once selected by the customer. Please enter the correct color code in the HEX format starting with the sign "#" in the field line without any extra symbols or signs. Otherwise, you may opt for the exact color tint on the palette board in the square box located next to the field line.

There are several screens with tables, columns, and selections rows, what's the difference between them?

The screens with tables and columns offer either multiple or single selection for customers depending on the screen type you chose in your onboarding.

Can I delete all selection rows in the screens with tables?

Yes, which means there will be no list with the selection rows depicted in the screen. However, you may always add them by clicking the corresponding button "+ADD" in the "Table items" tab.

What type of the progress bar can be set up in the "ProgressBarTitle" screen?

There are 2 options avalaible for choosing on the drop-down menu in the "Progress bar" tab in the screen: circle and line. Both types contain the same number of settings for customization: color, track color, thickness, track thickness, label font family, label font size, label font weight, label color, label background color, label padding (left, right, top, bottom), and progress bar box padding (left, right, top, bottom). Moreover, there is an opportunity to create animation with its duration settings and the text displayed in the screen at the needed percentage of the filled progress bar.

What is the difference between "Color" and "Track color" parameters in the progress bar settings?

The "Color" parameter is responsible for changing the color of the dynamic progress bar depending on the percentage installed in the screen while the "track color" parameter is needed for coloring the static line of the progress bar serving as the background.

What is the difference between "Thickness" and "Track thickness" parameters in the progress bar settings?

The "Thickness" parameter is responsible for making the size of the dynamic progress bar bolder or thinner while the "track thickness" parameter is needed for changing the same size of the static line of the progress bar serving as the background.

I see the distance between the percent label and bottom border of the screen becomes bigger when I set the value to 100 for label-padding-bottom. Is this expected?

Yes, when you set the value to 100, it increases the padding, thus, the distance between the percent label and the bottom border of the screen becomes larger.

Why do we need the tabs "Table items" in the "ProgressBarTitle" screen?

These tabs help to create the animation embedded in this particular screen type. For example, you may set a certain phrase in the "ITEM 1" field specifying the percentage range when this phrase will be depicted (e.g. 0 - 50), and then in the field "ITEM 2" enter another phrase with the different percentage duration (e.g. 50-100). Thus, the text entered in these 2 tabs will be changed in the screen once the progress bar reaches the established percentage.

How many "Table items" can be added to the progress bar for animation?

The number of the table items to be added is unlimited, however, the whole progress bar duration is 100%, which means the text should be legible for reading and percieving by customers, which might be difficult if the message is too overwhelmed. Otherwise, if much text is required per your app needs, it's highly recommended to split this information into several screens of the same type.

What parameters can be installed for the progress bar text?

The settings available for the progress bar screen contain the same parameters as while working with the text in other screens and are as follows: label text font family, label text font size, label text color, label text line height, label text font weight, label text background, label text align, label text padding (left, right, top, bottom), and label text box padding (left, right, top, bottom).

What can I do if the font of the title in my progress bar item has not changed even after choosing a different font?

Please ensure you have checked the box in the 'label-text-font-family' field on the settings panel. There you should choose your desired font from the drop-down menu. Please also note that the changes will apply only to the specific progress bar item you're currently adjusting.

Can I enter any number as the percentage in the "ProgressBarTitle" screen?

No, the default value for the progress bar animation is 100%, which means the start point is always 1% while the end point is 100%. The text entered for animation purposes should be also depicted within the same values, regardless of the number of the "Table items" installed.

What parameters can be customized in the "Text Field" tab in the "ScreenTitleSubtitleField" screen?

In the "Text Field" you may opt for different text field formats available on the drop-down menu: string (for text only), int (for whole numbers only), double (for whole and fractional numbers). Moreover, there is an embedded option to enter your text in the "Placeholder" field with the customizable parameters: field background color, placeholder text line height, placeholder text line weight, placeholder text font family, placeholder text font size, placeholder text color, placeholder text background color, placeholder text align, placeholder text padding (left, right, top, bottom), and field box padding (left, right, top, bottom).

Why do I need the "Text Field" tab for if there is a tool to enter the text in the "Title" and "Subtitle" fields?

Such a screen type is required in case you need your customers to fill out their full names, age, and other personal data, thus, the customer will have an opportunity to deal with numbers to choose, not to write them manually.

What is the functionality of the "String" text field format?

The "String" format allows you to enter any text, numbers, special symbols, or emojis in the "ScreenTitleSubtitleField" screen only.

What is the functionality of the "Int" text field format?

The "Int" format allows you to enter only whole numbers, without any fractional parts, in the "ScreenTitleSubtitleField" screen only.

What is the functionality of the "Double" text field format?

The "Double" format allows you to enter numbers with fractional parts, however, without any text or emojis available, in the "ScreenTitleSubtitleField" screen only.

What is the functionality of the "Date" text field format?

The "Date" format allows you to select a date using the date picker in the "ScreenTitleSubtitleField" screen only. However, please note that you should set the date with a calendar only without using the keyboard and copying and pasting the required date into the text field, otherwise, the date will not be entered and displayed in the screen.

What happens if I leave the placeholder text field empty?

The placeholder's function is to hint a customer on what, where, and how the entered data should be displayed in the screen. Once the text is entered, the placeholder is automatically removed and/or hidden beneath the typed symbols without affecting it. However, if no text is entered, the placeholder remains in the screen.

Did this answer your question?