Top
Customize a Pop-up
  • 30 Aug 2024
  • 3 Minutes To Read
  • Dark
    Light
  • PDF

Customize a Pop-up

  • Dark
    Light
  • PDF

Article summary

After creating a Pop-up, customize it based on your requirements.

You can customize the following in a Pop-up:

  • 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 Pop-up template you choose.

On the Whatfix Mobile Studio, choose a Pop-up template and then click the Pop-up to configure the following:

popup_template_studio

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 user property to personalize the experience for your end user.
    header_popup

  • You can align the Header to the top or bottom, add any content block, or delete the Header section using the action bar
    header_action_bar

Body

  • Go to the Body section. You can edit the text, change the 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.

    2022-11-22_16-57-16

  • You can align the Body text to the top or bottom, add any content block, or delete the Body section using the action bar.

    body_action_bar

Topspacer

  • To increase, decrease, or delete the Topspacer, use the action bar
    top_spacer_popup

Media

  • Under the Media section, you can click the Edit icon to add images and GIFs to your Pop-up from your local drive, and then configure the image size, alignment, and bottom margin.
    media_popup
your title goes here

The image formats supported are .jpg, .png, and .svg.

  • Enable the CLICK ACTION toggle to link any action to your image. Clicking the image triggers the action that you configure.
    click_action
Button Action Description
Dismiss When the user clicks the media, the Pop-up is dismissed from the app screen
External Link When the user clicks the media, they are routed to the URL that is attached to the media
Deep Link When the user clicks the media, they are routed to the app screen within the same app that is attached to the media
your title goes here

To track the usage of how many users are using the media, first provide a name for the action you add to your media.
click_events

  • To align the Media to the top or bottom, add any content block, or delete the Media section use the action bar
    media_action_bar

Buttons

  • To customize the button that appears on your Pop-up, choose to one or two buttons, adjust the button width, alignment, height, radius, and the bottom margin
    button_config

  • 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.
    individual_button

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
    button_action_bar

Layout

  1. On the left, click Layout to enable Overlay and the Close icon to dismiss the Pop-up.

    2023-02-06_16-48-23.png

your title goes here

You can also click Edit to do the same.

editiconmobile.png

  • You can change the Fill Color of the Overlay and enable your end user to dismiss the Pop-up by clicking the Overlay.

  • You can change the color of the Pop-up template and also customize the the position of the Close icon, the button size, the background color, and the color of the icon.

    Mobile_layout config_popup.png

  1. Click Done.
    done_popup

your title goes here

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.