Customize Bottom Sheet
- 09 Jan 2024
- 2 Minutes To Read
-
Print
-
DarkLight
-
PDF
Customize Bottom Sheet
- Updated On 09 Jan 2024
- 2 Minutes To Read
-
Print
-
DarkLight
-
PDF
Article Summary
Share feedback
Thanks for sharing your feedback!
Once you have created the Bottom Sheet project and chosen a template, you can start to design and configure the Bottom Sheet.
Click the Bottom Sheet to configure the following,
Header
-
Under the Header section, you can edit the Header text, change the font, font size, font weight, text alignment, text color, and bottom margin.
You can also add a user property to personalize the experience for your end user.
-
You can align the Header to the top or bottom, add any content block, or delete the Header section using the action bar
Body
-
On the Body of the Highlight, you can edit the text, font, font size, font weight, text alignment, text color, and bottom margin.
You can also add user property to personalize the experience for your end user.
-
You can align the Body text to the top or bottom, add any content block, or delete the Body section using the action bar
-
You can increase, decrease, or delete the Topspacer using the action bar
-
You can customize the button that appears on your Highlight. You can choose to have one or two buttons, adjust the button width, alignment, height, radius, and the bottom margin
Button
- Click the BUTTON dropdown to customize the individual buttons. You can change the button color, stroke of the button outline, text, font family, font size, font weight, and button action. You can also add user property to personalize the experience for your end user.
The following are the Button Actions you can configure,
| Button Action | Description |
|---|---|
| Dismiss | When the user clicks the button, the Pop-up is dismissed from the app screen |
| External Link | When the user clicks the button, they are routed to the URL that is attached to the button |
| Deep Link | When the user clicks the button, they are routed to the app screen within the same app that is attached to the button |
-
You can align the Buttons to the top or bottom, add any content block, or delete the Buttons using the action bar
Layout
- In the navigation panel, click Layout to enable Overlay, change the Bottom Sheet color, and add Ripple Effect.
your title goes here
You can also click the Edit icon to do the same.
-
Click Done.
The Bottom Sheet you create is automatically saved.
your title goes here
-
You can preview projects on your device before making it live for your end users.
-
After creating and designing the Bottom Sheet, click Publish to make the Bottom Sheet live for your end users. For more information on publishing Whatfix Mobile content, see Publish Whatfix Mobile content
Was this article helpful?