Customize Drawer
- 23 Aug 2024
- 2 Minutes To Read
-
Print
-
DarkLight
-
PDF
Customize Drawer
- Updated On 23 Aug 2024
- 2 Minutes To Read
-
Print
-
DarkLight
-
PDF
Article summary
Did you find this summary helpful?
Thank you for your feedback
After creating a Drawer, customize it based on your requirements.
Whatfix enables you to customize the following in a Drawer:
- Add Body and Header content
- Add images and GIFs
- Add buttons and attach external and deep links
your title goes here
The customization options differ based on the Drawer template you choose.
On the Whatfix Mobile Studio, choose a Drawer template, and then click the Drawer to configure the following:
Header
-
Under the Header section, edit the Header text, font, font size, font weight, text alignment, text color, and bottom margin. Add user property to personalize the experience for your end user.
-
Align the Header to the top or bottom, add any content block, or delete the Header section using the action bar.
Body
-
Go to the Body section. Edit the text, change the font, font size, font weight, text alignment, text color, and bottom margin. Add a user property to personalize the experience for your end user.
-
Align the Body text to the top or bottom, add any content block, or delete the Body section using the action bar.
Divider
Align the Divider to the top or bottom, add any content block, or delete the Divider using the action bar.
Media
-
Under the Media section, click the Edit icon to add images to your Drawer from your local drive and then configure the image size, alignment, and bottom margin.
your title goes hereWhatfix Mobile supports .jpg, .png, .gif, and .svg file formats lesser than 100kB.
-
Enable the CLICK ACTION toggle to link any action to your image. Clicking the image triggers the action that you configure.
-
Align the Media to the top or bottom, add any content block, or delete the Media section using the action bar.
-
Buttons
-
Customize the button that appears on your Drawer. You can choose to have one or two buttons, adjust the button width, alignment, height, radius, and the bottom margin.
-
Click the BUTTON dropdown to customize the individual buttons. Change the button color, stroke of the button outline, text, font family, font size, font weight, and button action. Add a 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 Drawer 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 |
- Align the Buttons to the top or bottom, add any content block, or delete the Buttons using the action bar.
Layout
-
Click Layout to customize the position of the Drawer to the left or right of your app screen and enable OVERLAY toggle and the Close icon to dismiss the Drawer.
your title goes hereClick Edit to do the same.
- Change the Fill Color of the Overlay and enable your end user to dismiss the Drawer by clicking the Overlay.
- Change the color of the Drawer template and also customize the position of the Close icon, the button size, the background color, and the color of the icon.
your title goes here
- Preview projects on a device before making it live for your end users.
- After creating and designing the Drawer, click Publish to make the Drawer live for your end users. For more information on publishing Whatfix Mobile content, see Publish Whatfix Mobile content.
Was this article helpful?