In onboarding projects, the ability to customize footer buttons is crucial for creating a seamless and engaging user experience. This guide provides an in-depth look at various settings available for tailoring the appearance and functionality of your footer buttons.
Full Width Setting
Purpose: Adjust the button's width to either span the full width of its container or maintain a default width (typically 100 px).
Usage: Check the box in the "Full Width" row to activate. Setting it to true extends the button to full width; false retains the default width.
Button Width Setting
Purpose: Allows for precise control over the button's width.
Usage: Enter a value after checking the box in the "Button Width" row. Larger values increase width, while smaller values decrease it.
Note: currently it works for Web2App only, but we are working to add this functionality in iOS SDK in the nearest releases.
Button Height Setting
Purpose: Modifies the button's height.
Usage: Activate this setting by checking the box in the "Button Height" row and specifying a value. Higher values create a thicker button, and lower values a thinner one.
Button Background Color Customization
Purpose: Change the background color of the footer buttons.
Usage: Select a tint on the palette board or Apply the desired HEX color code
Button Border Width
Purpose: Adjust the thickness of the button border.
Usage: Change the value to increase or decrease border thickness. Ensure both the "Button border-width" and "Button border-color" checkboxes are checked for functionality. If the checkbox is disabled - the button border wont be applied.
Button Border-Color
Purpose: Change the color of the button border.
Usage: Select a tint on the palette board or Apply the desired HEX color code
Button Border-Radius
Purpose: Alters the curvature of the button's corners.
Usage: Increase the value for rounder corners and decrease for squarer corners. Adjust even if "Button Border Width" is disabled.
Button visibility
Availability of the Button Visibility Option
The button visibility option is available for screens that require user input. This includes:
Table Single Selection
Table Multiple Selection
2 Column Single Selection
2 Column Multiple Selection
Image Title Subtitle Selection
Title Subtitle Text Field
Title Subtitle Picker
Title Subtitle Calendar
Platform-Specific Support:
iOS SDK: Available for all listed screens except Title Subtitle Picker and Title Subtitle Calendar.
Web2App: Supported for all screens without exclusions.
Functionality of Button Visibility
By default, the button visibility option is off. In this state, buttons are always active and enabled.
When the checkbox is activated, you get additional choices:
Default: Functions the same as when the option is off – the button is always active and enabled.
DisabledUntilValueEntered: The button is visible but disabled. Users cannot click on it to proceed until they make a selection or enter data.
HiddenUntilValueEntered: The button remains invisible until the user selects an item or enters data.
Text Customization Settings
The section includes full customization of the inside button such as font family, font size, line height, font weight, text color, text background color, text alignment. Follow the detailed guide about text customization
Positions Customizations
Text Padding: Specify the text location or move it with padding checkboxes.
Footer Button Position: Adjust the 'button-box-paddings' to change the button's position.
Note: currently it works for Web2App only, but we are working to add this functionality in iOS SDK in the nearest releases.
Troubleshooting and Tips
No Change in Button Size: If "Full Width" is set to true but no change is observed, ensure "Button Width" is disabled.
Button Border-Radius Issues: If changes to the "Button Border-Radius" are not visible, check that "Button Border Width" and the "button background color" are not set to transparent.
Text Align Functionality: For visible changes in "Text Align," ensure "Full Width" is set to true.
Invalid Data Entry: The system prevents invalid data entry in settings like "Text Line Height" and "Text Font-Weight".
Conclusion
Customizing footer buttons in your onboarding project allows for a tailored and professional appearance that aligns with your brand and enhances user interaction. By understanding and utilizing these settings, you can significantly improve the visual appeal and functionality of your onboarding experience.