---
title: "Customize a Pop-up"
slug: "customize-a-pop-up"
updated: 2026-08-13T12:13:49Z
published: 2026-08-13T12:13:49Z
canonical: "support.whatfix.com/customize-a-pop-up"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize a Pop-up

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

> [!NOTE]
> Info:
> 
> 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/popup_template_studio.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A17Z&se=2026-10-29T18%3A13%3A17Z&sr=c&sp=r&sig=AjEqnFbGHxOyXjlDdECmalyA7skLGb%2BMH34YCT%2F5tu8%3D)

Expand the following accordions for more details:

**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](/mobile/docs/personalization) to personalize the experience for your end user. ![header_popup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/header_popup.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A17Z&se=2026-10-29T18%3A13%3A17Z&sr=c&sp=r&sig=AjEqnFbGHxOyXjlDdECmalyA7skLGb%2BMH34YCT%2F5tu8%3D)
- 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/header_action_bar.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A17Z&se=2026-10-29T18%3A13%3A17Z&sr=c&sp=r&sig=AjEqnFbGHxOyXjlDdECmalyA7skLGb%2BMH34YCT%2F5tu8%3D)

**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](/mobile/docs/personalization) to personalize the experience for your end user. ![2022-11-22_16-57-16](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2022-11-22_16-57-16.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A17Z&se=2026-10-29T18%3A13%3A17Z&sr=c&sp=r&sig=AjEqnFbGHxOyXjlDdECmalyA7skLGb%2BMH34YCT%2F5tu8%3D)
- 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/body_action_bar.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A17Z&se=2026-10-29T18%3A13%3A17Z&sr=c&sp=r&sig=AjEqnFbGHxOyXjlDdECmalyA7skLGb%2BMH34YCT%2F5tu8%3D)

**Topspacer**

- To increase, decrease, or delete the **Topspacer**, use the action bar. ![top_spacer_popup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/top_spacer_popup.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A17Z&se=2026-10-29T18%3A13%3A17Z&sr=c&sp=r&sig=AjEqnFbGHxOyXjlDdECmalyA7skLGb%2BMH34YCT%2F5tu8%3D)

**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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/media_popup.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A17Z&se=2026-10-29T18%3A13%3A17Z&sr=c&sp=r&sig=AjEqnFbGHxOyXjlDdECmalyA7skLGb%2BMH34YCT%2F5tu8%3D)

> [!NOTE]
> 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_action.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A17Z&se=2026-10-29T18%3A13%3A17Z&sr=c&sp=r&sig=AjEqnFbGHxOyXjlDdECmalyA7skLGb%2BMH34YCT%2F5tu8%3D)

| 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 |

> [!NOTE]
> Info
> 
> 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_events.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A17Z&se=2026-10-29T18%3A13%3A17Z&sr=c&sp=r&sig=AjEqnFbGHxOyXjlDdECmalyA7skLGb%2BMH34YCT%2F5tu8%3D)

- 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/media_action_bar.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A17Z&se=2026-10-29T18%3A13%3A17Z&sr=c&sp=r&sig=AjEqnFbGHxOyXjlDdECmalyA7skLGb%2BMH34YCT%2F5tu8%3D)

**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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/button_config.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A17Z&se=2026-10-29T18%3A13%3A17Z&sr=c&sp=r&sig=AjEqnFbGHxOyXjlDdECmalyA7skLGb%2BMH34YCT%2F5tu8%3D)
- 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 may also [add user property](/mobile/docs/personalization) to personalize the experience for your end user. ![individual_button](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/individual_button.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A17Z&se=2026-10-29T18%3A13%3A17Z&sr=c&sp=r&sig=AjEqnFbGHxOyXjlDdECmalyA7skLGb%2BMH34YCT%2F5tu8%3D)

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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/button_action_bar.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A17Z&se=2026-10-29T18%3A13%3A17Z&sr=c&sp=r&sig=AjEqnFbGHxOyXjlDdECmalyA7skLGb%2BMH34YCT%2F5tu8%3D)

**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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2023-02-06_16-48-23.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A17Z&se=2026-10-29T18%3A13%3A17Z&sr=c&sp=r&sig=AjEqnFbGHxOyXjlDdECmalyA7skLGb%2BMH34YCT%2F5tu8%3D)

> [!NOTE]
> Info
> 
> You can also click **Edit** to do the same.
> 
> ![editiconmobile.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/editiconmobile.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A17Z&se=2026-10-29T18%3A13%3A17Z&sr=c&sp=r&sig=AjEqnFbGHxOyXjlDdECmalyA7skLGb%2BMH34YCT%2F5tu8%3D)

- 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Mobile_layout%20config_popup.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A17Z&se=2026-10-29T18%3A13%3A17Z&sr=c&sp=r&sig=AjEqnFbGHxOyXjlDdECmalyA7skLGb%2BMH34YCT%2F5tu8%3D)

1. Click **Done**. ![done_popup](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/done_popup.png?sv=2026-02-06&spr=https&st=2026-10-29T17%3A13%3A17Z&se=2026-10-29T18%3A13%3A17Z&sr=c&sp=r&sig=AjEqnFbGHxOyXjlDdECmalyA7skLGb%2BMH34YCT%2F5tu8%3D)

> [!NOTE]
> Info
> 
> - You can [preview projects on a device](/mobile/docs/preview-projects-on-a-device) before making it live for your end users.
> - After creating and designing the Pop-up, click **Publish** to make the Pop-up live for your end users. For more information on publishing Whatfix Mobile content, see [Publish Whatfix Mobile content](/mobile/docs/publish-whatfix-content).