Top
Customize a Full Screen
  • 20 Jun 2025
  • 3 Minutes To Read
  • Dark
    Light
  • PDF

Customize a Full Screen

  • Dark
    Light
  • PDF

Article summary

Once you have created the Full Screen project and chosen a template, start to design and configure the Full Screen.

Click Full Screen to configure the following:

Click the following accordions for more details.

Header

  • Under the Header section, edit the Header text, font, font size, font weight, text alignment, text color, and bottom margin. Also add user property to personalize the experience for your end user.
    image

  • To align the Header to the top or bottom, add a content block, or delete the Header section using the action bar.
    image

Body

  • Go to the Body section. To edit the text, change the font, font size, font weight, text alignment, text color, and bottom margin. Also add user property to personalize the experience for your end user.
    image

  • Align the Body text to the top or bottom, add any content block, or delete the Body section using the action bar.
    image

  • Align the Divider to the top or bottom, add any content block, or delete the Divider using the action bar.
    image

Media

  • Under the Media section, click the Edit icon to add images to your Full Screen from your local drive and then configure the image size, alignment, and bottom margin.
    image
Info:

Whatfix Mobile only supports image formats including .jpg, .png, and .gif. GIF files are supported up to 500 KB, while all other formats are supported up to 100 KB.

  • Enable the CLICK ACTION toggle to link any action to your image. Clicking the image triggers the action that you configure.
    click_action
Button ActionDescription
DismissWhen the user clicks the media, the Full Screen is dismissed from the app screen
External LinkWhen the user clicks the media, they are routed to the URL that is attached to the media
Deep LinkWhen the user clicks the media, they are routed to the app screen within the same app that is attached to the media
Info:

Provide a name for the action you add to your media using which you track the analytics on how many users are clicking the media.
click_events

  • Align the Media to the top or bottom, add any content block, or delete the Media section using the action bar.
    image

Button

  • To customize the button that appears on your Full Screen, choose to have one or two buttons, adjust the button width, alignment, height, radius, and the bottom margin.
    image

  • 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. Also add user property to personalize the experience for your end user.
    customize_button_drawer

Configure the following button actions:

Button ActionDescription
DismissWhen the user clicks the button, the Full Screen is dismissed from the app screen
External LinkWhen the user clicks the button, they are routed to the URL that is attached to the button
Deep LinkWhen the user clicks the button, they are routed to the app screen within the same app that is attached to the button
  • Aign the Buttons to the top or bottom, add any content block, or delete the Buttons using the action bar.
    image

Layout

  1. Click the Layout option on the left, or the Edit icon to customize the position of the Full Screen to the left or right of your app screen and enable Overlay and the Close icon to dismiss the Full Screen.
    edit_icon_drawer
  • Change the Fill Color of the Overlay and enable your end user to dismiss the Full Screen by clicking the Overlay.

  • Change the color of the Full Screen template and also customize the position of the Close icon, the background color, and the color of the icon.

    Mobile_layout config_full screen.png

  1. Click Done.
    image

The Full Screen you create is automatically saved.

Info:

Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.