Top
Customize a Pop-up template
  • 08 Oct 2024
  • 4 Minuten zu lesen
  • Dunkel
    Licht
  • pdf

Customize a Pop-up template

  • Dunkel
    Licht
  • pdf

The content is currently unavailable in German. You are viewing the default English version.
Artikel-Zusammenfassung

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 Primärer Button or Sekundärer 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.


War dieser Artikel hilfreich?

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.