Customize a Pop-up template

  • Updated On Oct 8, 2024
  • 4 minute(s) read
Prev Next

The Visual Editor enables you to design and customize the components in Whatfix Pop-ups easily, eliminating the need for code editing. With the Drag-and-Drop feature, content creators can resize Pop-ups, add or delete components, and add customizations directly in the UI.

your title goes here
  • Customize a Pop-up during the Pop-up creation using Whatfix Studio. To know more about creating a Pop-up, see Create a Pop-up.
  • A Pop-up can also be customized after creation using the Edit icon on the Dashboard.
    Edit_popup_DB

Use Cases

Add an extra button

Use the following steps to add an extra button in the Pop-up using the Add Component on the Visual Editor:

  1. On the Pop-up template, hover your cursor over the button corner, and then click to open the button configuration menu.
    RTE_Button_Edit

  2. Click the + icon. The Add Component dialog box opens.
    click_add_component

  3. On the Add Component dialog box, click Button.
    click_button.png

The button gets added.

your title goes here

Whatfix enables you to change the following button configurations:

  • Change the button Type to Primary Button or Secondary Button.

    Button_Type

  • Click the Button Style icon to change the Color, Hover color, and Corner radius of the button.

    Button_config

  • Click the Button Resize icon to resize the button.

    Button_resize

  • Click the Horizontal Align icon to align the button horizontally.

    Horizontal Align

  • Click the Vertical Align icon to align the button vertically.

    Vertical Align

your title goes here
  • Using the Drag and Drop feature, move or re-position the button around the Pop-up.
  • Using the Drag Handlers, the button can be moved or re-positioned both vertically (column-wise) and horizontally (row-wise).

Button_DND

your title goes here

When you make changes to the Pop-up using the Drag Handlers, you may not be able to undo certain changes. In that case, you may need to re-create the Pop-up.

Add an Image or GIF

Use the following steps to add an image in the Pop-up using the Add Component on the Visual Editor:

  1. On the Pop-up template, double-click the text to open the Rich Text Editor.
    Click_RTE

  2. Click the + icon. The Add Component dialog box opens.
    click_add_component_icon

  3. On the Add Component dialog box, click Image.
    click_image

  4. Paste the embed URL of the image you want to insert or upload an image from your local drive or Whatfix Gallery.
    click_add_img

your title goes here
  • The image URL must contain https if the Pop-up is displayed on a secure webpage.
  • GIFs can also be added using the image dialog box.
  • Only .jpg and .png image formats that are up to 4 MB in size are supported.
  1. Click Insert.
    click_insert

The image gets added.

your title goes here
  • Using the Drag and Drop feature, move or re-position the image around the Pop-up.
  • Using the Drag Handlers, the image can be moved or re-positioned both vertically (column-wise) and horizontally (row-wise).

Image_dnd.

your title goes here

When you make changes to the Pop-up using the Drag Handlers, you may not be able to undo certain changes. In that case, you may need to re-create the Pop-up.

Add a video

Use the following steps to add a video in the Pop-up using the Add Component on the Visual Editor:

  1. On the Pop-up template, double-click the text to open the Rich Text Editor.
    Click_RTE

  2. Click the + icon. The Add Component dialog box opens.
    click_add_component_icon

  3. On the Add Component dialog box, click Video.
    Click_Video_Addcomponent

  4. Paste the video URL.
    Insert_video_url

your title goes here

The video URL must contain https if the pop-up is displayed on a secure webpage.

  1. Click Insert.
    Click_insert_video
your title goes here
  • Using the Drag and Drop feature, move or re-position the video around the Pop-up.
  • Using the Drag Handlers the video can be moved or re-positioned both vertically (column-wise) and horizontally (row-wise).

Video_DND

your title goes here

When you make changes to the Pop-up using the Drag Handlers, you may not be able to undo certain changes. In that case, you may need to re-create the Pop-up.

Add an extra Text box

Use the following steps to add an extra Text box in the Pop-up using the Add Component on the Visual Editor:

  1. On the Pop-up template, double-click the text to open the Rich Text Editor.
    Click_RTE

  2. Click the + icon. The Add Component dialog box opens.
    click_add_component_icon

  3. On the Add Component dialog box, click Text.
    Click_Text

The Text box gets added.

your title goes here
  • Using the Drag and Drop feature, you can move/re-position the Text box around the Pop-up.
  • Using the Drag Handlers the video can be moved/re-positioned both vertically (column-wise) and horizontally (row-wise).

DND_Textbox

your title goes here

When you make changes to the Pop-up using the Drag Handlers, you may not be able to undo certain changes. In that case, you may need to re-create the Pop-up.

Add Pop-up background customizations

Customize the Pop-up background color and background image directly in the UI using the Visual Editor.

  • To change the Pop-up Background Color, under CONTROL, choose the color from the existing color palette or enter the hex code of the desired color.
    under_control_click

  • To add a Pop-up Background Image, under CONTROL, click Upload image.
    click_upload_image

  • Paste the embed URL of the image you want to insert or upload an image from your local drive or Whatfix Gallery.
    click_upload_img

  • Click Insert.

your title goes here
  • Only .jpg, and .png image formats that are up to 4 MB in size are supported.
  • The Pop-up Background Image and Color can be changed only using Whatfix Studio and not the Dashboard.

Similarly, mix and match multiple components, and create your own custom template.