Can I install my own template as a ready-made design for onboarding?
No, you have to choose the existing ready-made template only for creating your onboarding. Please note that all of them are easily customized for your purposes and the features required.
How many theme templates can I add within one onboarding?
When you add a new onboarding, you choose only 1 template theme among the offered ones in the list. Please note that you may easily customize any theme for your purposes. Currently, we are working on adding new templates to the catalog.
How many screens do theme templates contain? Can I add more?
Each theme template contains 14 screens templates, however, while editing the flow of the onboarding, you may drag and drop as many screens from the chosen theme to the main board as you need to build your own structure and logic. Currently, we are working on expanding the existing catalog by adding new theme templates and screens.
Can I add or remove the theme template?
No; however, we are working hard at the moment to expand the functionality for your convenience. Please note these templates are added by the Onboarding.Online team only, and if there is a need to work with certain tailored decisions, please contact our Support Team for further assistance.
Can I change the design for only one screen for the theme?
If you want to change the design only for one screen from the list, just click on int Edit button below the screen template or click on the. screen image. (For instance, you want to change the background only for the 'Image title subtitle' screen type, click on edit button below this screen, change it's background color and click on Save&Close)
What parameters can be customized for the whole theme template?
On the "Customize Onboarding Theme" menu you will see the following categories for editing and upgrading: Colors, Background, Header, Fonts, Table, Footer. All these categories contain their list of parameters for customization.
Are changes in the theme template parameters applicable to the already-used screens on the onboarding dashboard?
Yes, changes to the theme template parameters can be applied to screens already in use on the onboarding dashboard. After you've added screens to the flow, to make these changes, click on the "Settings" button located in the top right corner of the "Templates" menu. Once you've made your adjustments, click on "Apply to onboarding" in the "Customize Theme Screen" section. Please note that if you click "Apply to onboarding" without clicking "Done," the changes will be applied only to the onboarding screens and not to the overall theme. To save the changes for the theme as well, first click "Done," and then click "Apply to onboarding."
What settings are applicable in the "Colors" tab in the theme template?
In the "Colors" tab you may set up the next color options: 'Buttons background', 'Titles, Subtitles', and 'Button titles' for your theme. The changes might be applied if you know the exact code of the color to be set in the field line starting with the "#" sign, or you may opt for the required tint on the palette board by clicking the square box next to the field line. Please note the changes in colors are reflected on all screens of the whole theme template at once and can be saved once you click "Done" on top of the "Customize onboarding theme" panel.
What screens have changed when I change the 'Buttons background' color?
This option covers the color of the
Footer: Background color the Button1 and the text in Button2.
Header: Influences the page progress indicator.
Table Multiple Selection: Affects the item selected state
Table Single Selection: Alters the item's background color.
Progress Bar: Changes the progress view.
Text Field Border: Modifies the border color of text fields.
2-Column Multiple Selection: Impacts the item selected background and border color.
2-Column Single Selection: Influences the item selected background color.
Calendar: Checkbox selected color
What screens have changed when I change the 'Titles, subtitles' color?
This option is reflected in the following:
Header Buttons: Alters button colors.
Titles and Subtitles on Screens and Table items: Affects these elements except in table single selection.
Table Multiple Selection: Changes the unselected item color and checkbox color.
2-Column Multiple Selection: Modifies the item's unselected border color.
2-Column Single Selection: Alters the item's unselected border color.
Calendar: Checbox colors
Pickers: Color of text in pickers
What screens have changed when I change the 'Buttons title' color?
This option colors are depicted in
Footer: Changes the text inside Button1.
Table Single Selection: Alters the title and subtitle color of items.
I attempted to enter the color code in the field line, but received the error message "Invalid color code," what went wrong?
Please make sure that you have entered the correct color code in the needed HEX format starting with the sign "#" in the field line without any extra symbols or signs. Otherwise, you may verify the exact color code on the palette board in the square box by checking the HEX format at the bottom of the board with the up/down arrows.
I changed the colors in the theme template, but nothing happened. What could be the issue?
The issue might occur if you click outside the palette board or enter the invalid color code in the field line. Moreover, please make sure that you have saved up the changes on the "Customize onboarding theme" by clicking "Done" on the top right.
What settings are applicable in the "Background" tab in the theme template?
In the "Background" tab you may choose out of 3 settings to customize on the drop-down menu: color, image, and video by specifying their corresponding parameters.
Can I apply 3 settings such as color, image and video to the background of the theme template at once?
No, you have to choose only 1 setting you would like to install in the whole theme template. But if you need a certain color, image or video to be depicted on a special screen or several screens within the same theme template, you may customize the single screen separately either in the theme template settings or in the onboarding flow.
How do I change the color in the "Background" tab in the theme template?
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. Please also note that the background color change is applicable for all screens in the theme template and will retain the installed parameters when dragged and dropped to the flow, or you may customize the single screen separately.
What is the difference between "Image URL" and "Asset Name" in the background setting in the theme template?
"Video URL" allows you to upload the needed video from the internet to be installed as the background either for a single screen or for the whole theme template.
"Asset Name" allows storing videos inside the app by setting specific names to them, and once chosen, it will be uploaded from the local archive inside the app and serve as the background either for a single screen or for the whole theme template following your settings.
Please note that "Asset Name" will help your onboarding look and function appropriately even in case of a bad internet connection from the customer's side.
Can I use different image formats in the "Image URL" field?
Yes, you can insert links with various image formats in the "Image URL" field. The visual constructor supports JPEG, PNG, GIF, BMP, TIFF, SVG, and WEBP formats. Each format should be displayed without issues when applied to every screen template.
What is the function of the button "Generate" in the "Image URL" field?
Once you don't have the appropriate image to be inserted, but you still want to depict a picture in the app, we will help you with the idea. You may either use the default text inserted by us or enter your own in the "Prompt" field and press "Generate." The AI function embedded in the button will generate several images per your request which may be applied to your background.
I inserted the image in the "Image URL"/"Asset Name" field, but nothing was displayed, what might be the issue?
Looks like you've entered an invalid or broken link in the field. When you insert a broken image URL or invalid content in the "Image URL" field, the background image will not be displayed, and the background will appear white. The app will not break and will continue functioning as expected.
How do I set a video as the background in the visual constructor?
You should follow the steps as they are: click on the "Background" type drop-down menu and select Video, select video URL, and copy-paste it in the empty field or click on "camera" and upload any video from your computer. Save the background for your theme template by clicking "Done" on the "Customize onboarding" menu. Thus, your changes will be reflected in the whole theme template.
I inserted the video link in the "Video URL"/"Asset Name" field, but nothing was displayed, what might be the issue?
If you insert a broken Video URL, delete the Video URL, or insert incorrect data such as text with numbers or special symbols, HTML, or a script, the background video won't be shown and the background will appear white.
What settings are applicable in the "Fonts" tab in the theme template?
In the "Fonts" tab you may set up Font family, Title font size, Title font-weight, Subtitle font size, and Subtitle font weight parameters per the needs of your customization.
Can I add my own font to the "Font family" parameter?
Currently not. You will have to choose the one among the offered fonts on the drop-down menu only. This list of the presented fonts is determined by their popularity used in top apps worldwide. However, we are currently working on expanding the font choice for you as well.
What does the "Title font size" setting do?
The "Title font size" setting changes the size of the title text in on the screens: setting a higher value (e.g., 30) makes the font bigger, while a lower value (e.g., 3) makes it smaller. You may use the up/down arrows to adjust the value.
I received an error when I tried to change the "Title font size" setting, what caused the issue?
This can happen if you've entered invalid numbers or text in the field, or if the number is too high. Please make sure to enter a valid number between 1 and 55.
What does the "Title font-weight" setting do?
The "Title font-weight" setting makes the installed font thinner (e.g., 100) or bolder (e.g., 900) depending on your customization. You may use the up/down arrows to adjust the value.
I received an error when I tried to change the "Title font-weight" setting, what caused the issue?
This can happen if you've entered invalid numbers or text in the field, or if the number is too high. Please make sure to enter a valid number between 100 and 900.
I tried to delete the values in the "Fonts" tab, but it's not allowed. Why is that?
The system is designed to always have values in the "Fonts" settings to ensure the text is present and visible. Please note that you may change values at any time to adjust the text to the project's needs.
Do the "Subtitle font size" and "Subtitle font-weight" settings have the same functions as "Title font size" and "Title font weight?"
Indeed, these settings for subtitles obtain the same functionality and values embedded for the main font settings, which means the values for "Subtitle font size" should range from 1 to 55, while "Subtitle font-weight" ranges from 100 to 900.
I changed the font values in the theme template, but no changes were reflected. What could be the issue?
Please always make sure to save up the installed settings for this or that parameter by clicking "Done" on the right top of the "Customize onboarding theme" panel. If the issue remains, please contact our Support Team for the bug reporting and further assistance required.
What settings are applicable in the "Table" tab in the theme template?
The "Table" tab in your theme template is specifically designed for setting up the parameters for tables in your screens: choose the type of checkbox for your selection lines in tables, customize the font type, size, weight, and color used for titles and subtitles within the selection lines, adjust the kind for your selection lines
It's important to note that these customizations apply only to screens that contain tables with various selection types and list styles.
What does the 'Checkbox kind' setting do?
The "Checkbox Kind" setting enables you to choose from different types of checkboxes that are available for use on certain screens.
Can I add my own 'Checkbox Kind' to the dropdown menu?
Currently, this is not possible. You must select from the existing checkbox kinds available in the dropdown menu. This selection is based on the popularity of these kinds in top apps worldwide. However, we are actively working on expanding the range of checkbox kinds available for greater customization.
What is the difference between 'Table Border Radius' and 'Collection Border Radius'?
The Table Border Radius is applicable to the following screen templates: Table Multiple Selection, Table Single Selection, and Image Title Subtitle Selection. On the other hand, the Collection Border Radius is applicable for screen templates such as 2-column Multiple Selection and 2-column Single Selection.
What do the Table Border Radius and Collection Border settings do?
The Table Border Radius and Collection Border settings determine the curvature of the item borders in their respective template types. For instance, setting the radius to 60 will result in more rounded item borders, while setting it to 0 will produce squared borders.
What are the Item Title and Item Subtitle settings for?
The Item Title and Item Subtitle settings enable you to customize the appearance of titles and subtitles within table items. You can personalize aspects such as font family, font size, font weight, and font colors, allowing for a tailored look in your table items.
Where do the Item Title and Item Subtitle settings apply?
These settings apply to each screen that features a table. Currently, this includes Table Single Selection, Table Multiple Selection, 2-column Single Selection, 2-column Multiple Selection, Image Title Subtitle List, and Image Title Subtitle Selection. You can find each of these templates listed above the settings. Additionally, you have the option to customize the text inside items of each screen on an individual basis by clicking on the specific screen. These settings do not affect general titles and subtitles that present on each screen
What settings are applicable in the "Header" tab in the theme template?
The "Navigation Bar" tab contains 2 action buttons to switch screens either forward ("Skip") or back ("Back") and a page indicator bar with the help of which you show how many screens are left for the customer to progress in your app.
What settings are applicable in the "Page indicator" in the theme template?
You can change the availability of the Page indicator for your Onboarding Template Page, set up the progress indicator to show either the percentage completed or the percentage remaining for the user, change the color of the bar that indicates progress, and modify the background color on which the progress bar sits.
To manage colors choose the color for it if needed in the checkbox below. If the checkbox is not chosen, the default color will be set as black. To change the color, please enter the exact HEX code of the color to be set in the field line starting with the "#" sign, or you may opt for the required tint on the palette board once click on the square box nearby.
I tried to change the page-indicator-color or page-indicator-track-color, but it doesn't seem to work. What am I doing wrong?
You might be entering invalid color formats or forgetting to include the '#' sign in the HEX color code without any extra symbols or signs. Otherwise, you may verify the exact color code on the palette board in the square box by checking the HEX format at the bottom of the board with the up/down arrows.
Can I change the availability of the "Page indicator" on screens in the theme template?
Yes, you can change the availability of the "Page Indicator" on screens within the theme template. To do this, uncheck the corresponding checkbox. Upon unchecking, a confirmation pop-up will appear, allowing you to either confirm or deny your action.
If you confirm the disabling of the page indicator, it will be removed from all screen templates. If you decide to enable it again later, the page indicator will reappear on all templates. Additionally, you have the option to customize the page indicator on each screen individually. You can do this by clicking on the screen on "Customize template," or by dragging and dropping the screen onto the main flow and editing it there.
Can I change the position of the "Page indicator" on screens in the theme template?
No, the progress bar position is set by default and cannot change its location in any direction. However, if it is critical for your appropriate visual constructor workflow, please contact our Support Team for further assistance.
What settings are applicable to the 'Back' and 'Skip' buttons in the theme template?
There are the following options that are easily customizable: the availability of the button on screens, the text line for titling the button per your needs, its text font family, text font size, text color, button background color, text line height, text line weight, and text background color.
I see checkbox settings in the "Back/Skip" settings, but some of them have already been filled out, what's that?
It appears that certain parameters, such as text align, text font family, text font size and color are automatically pulled data from your installed settings in the "Font" tab. However, it is just the system option; it is not imposed, and you can freely customize these parameters for your purposes. The changes will be applied only to the "Back button" tab in such a case, and it will not affect parameters in the "Font" tab previously set by you.
Can I change the availability of the 'Back' and 'Skip' buttons on screens in the theme template?
Yes, you can change the availability of the buttons on screens within the theme template. To do this, uncheck the corresponding checkbox. If you confirm the disabling of the page indicator, it will be removed from all screen templates. If you decide to enable it again later, the page indicator will reappear on all templates. Additionally, you have the option to customize the page indicator on each screen individually. You can do this by clicking on the screen on "Customize template," or by dragging and dropping the screen onto the main flow and editing it there.
What settings are applicable in the "Footer" tab in the theme template?
In the "Footer" tab of the theme template, you can customize settings for the two buttons that are typically located at the bottom of the screen for user navigation. These customization options include the availability of buttons, setting titles for active buttons, adjusting the size and shape of the buttons, selecting colors and fonts for the button text, modifying the fonts used within the buttons, adjusting text placement, and arranging button location using padding. This array of settings allows for a high degree of personalization for the navigation experience in the footer area.
Are the settings for the Footer buttons the same as for the "Back" and "Skip" buttons?
The Footer buttons share some common customization parameters with the "Back" and "Skip" buttons but also include additional options. These extra settings for the Footer buttons include full-width, button-width, button-height, button-border-width, button-border-color, button-border-radius, button-label-text-align, and button-label-paddings (left, right, top, bottom). It's important to note that each button's settings must be configured individually, as data from one button is not automatically transferred or applied to others. This ensures precise and unique customization for each button.
What is the "Full width" setting needed for?
The "Full Width" setting, specific to the Footer button, enables you to adjust the button's width to either span the full width of its container or to a default width, typically 100 px. To use this setting, you simply check the box in the "Full Width" row. Setting this value to true will extend the button to full width, while setting it to false retains the button's default width.
What is the "Button width" setting needed for?
The "Button Width" setting, also for the Footer button, allows you to customize the button's width to a specific value. By checking the box in the "Button Width" row and entering a desired value, you can control the button's size. Larger values, like 300, will make the button wider, whereas smaller values, around 100, will make it narrower.
Why doesn't the button size change when I set "Full Width" to true?
If you observe no change upon setting "Full Width" to true, ensure that the "Button Width" setting is disabled. This is because the "Button Width" setting takes precedence; if it's active, the "Full Width" setting won't affect the button's size.
What is the "Button height" setting needed for?
The "Button Height" setting, applicable to the Footer button, lets you modify the button's height. Activating this setting by checking the box in the "Button Height" row and specifying a value allows you to determine the button's thickness. Higher values, like 100, result in a bolder, more prominent button, while lower values, such as 60, create a thinner appearance.
How do I change the color for active buttons Footer and Header in the theme template?
You should choose the exact button for applying the necessary settings (button borders colors, text colors, and the button background) and 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. Please also note that all color changes are applicable to all screens in the theme template and will retain the installed parameters when dragged and dropped to the flow.
What does changing the "Button border width" value do?
The "Button border width" setting is only displayed for the Footer button.
When the value of "Button border width" is changed, it adjusts the thickness of the button border. A higher value will create a bolder border. The value step is 0.1, so the button border becomes bolder or thinner accordingly.
Why can't I interact with the "Button border width" setting for active buttons?
Please make sure that the checkboxes for both - the "Button border-width" and "Button border-color" settings are checked. If unchecked, the border around the button disappears and the text fields for settings become inactive and unclickable.
What does changing the "Button border-radius" value do?
Changing the "Button Border-Radius" value, a setting available for the Footer button alters the curvature of the button's corners. Increasing this value results in more rounded corners, while a lower value leads to squarer corners. This setting allows you to customize the button's appearance to better fit the design aesthetic of your theme.
Can I use the "Button Border-Radius" without an active "Button Border Width"?
Yes, you can adjust the "Button Border-Radius" even when the "Button Border Width" is disabled. In this case, if the button has a background color, the radius adjustment will affect how the corners of the button with a background appear.
I changed the "Button Border-Radius," but nothing happened. Why?
If you don't observe any changes after adjusting the "Button Border-Radius," please ensure that the "Button Border Width" and the "button background color" are not set to transparent or that their respective checkboxes are not unchecked. Also check that you've entered the correct value: from 0 to 60. These factors can influence the visibility of the changes made to the border-radius.
When I unchecked the box with the setting for buttons, does the value change as well?
Yes, it retains the primary settings installed by the system, you will have to adjust or set the needed values one more time and save them to avoid losing the established parameters.
What is the "Text font size" setting needed for?
In the button settings, you can modify the text font size inside your button by setting a specific value, e.g. 30 or 3 to make the text bigger or smaller.
What is the "Text font family" setting needed for?
The "Text Font Family" setting is essential for customizing the font style of text within buttons. This setting, located within the button settings, provides a dropdown menu with a variety of font options. By default, each button inherits the font family as set in the "Main Font Family" within the Fonts tab.
What is the "Text align" setting needed for?
The "Text align" setting is only displayed for the Footer button.
It is needed for specifying the exact location of the text for your buttons, which means you may either center the text or put it left or right to the button border. These options are available on the drop-down menu of this setting.
I attempted to apply the "Text align" setting to the active buttons, but it doesn't work, what caused the issue?
Looks like you have not set the "Full width" parameter as True. Otherwise, the changes in the field "Text align" will not be visible. Please remember that the "Full width" setting is only displayed for the "Next" button.
What does changing the "Text line height" value do?
Changing the "Text Line Height" value affects the vertical spacing between two lines of text within your button. A larger line-height value increases the space between lines. Conversely, a smaller line-height value decreases this space, making the text appear more compact.
Can I enter the invalid data in the "Text line height" value for active buttons?
No, the system is designed the way to prevent the entry of invalid data. If you try to delete all the data from the text field, at least one item will always be left. The non-valid numbers cannot be entered. If you try to input a very large number (e.g. 1000000000000), you should see an error message.
What does changing the "Text font-weight" value do?
When the value of "Text font-weight" is changed, it adjusts the boldness of the text font in the button or field. A higher value will create a bolder text font. Please note that the maximum value is 900 and the minimum is 100.
Can I have the text in the button padding-left or right, up or down?
You may specify the text location in the button with the setting "Text align" or move it to the needed side with the corresponding padding checkboxes. Please note that these options are specific to the Footer button
Can I change the position of the Footer buttons?
Yes, you can alter the position of the Footer buttons by adjusting the 'button-box-paddings'. Modifying these values for the left, right, top, or bottom sides will increase or decrease the distance from the button's border to the nearest item (such as text, image, table, or screen border). This adjustment offers a range from 0 to 32 px, providing flexibility in positioning the buttons within the Footer area to achieve the desired layout and aesthetic