Top
Insert an Image in a Pop-up
  • 08 Jan 2024
  • 4 Minutes To Read
  • Dark
    Light
  • PDF

Insert an Image in a Pop-up

  • Dark
    Light
  • PDF

Article Summary

You can embed images in any Pop-up template by adding their URL. Any image you want to insert in a Pop-up has to be first hosted on the Whatfix dashboard, or on an online image-sharing website like Imgur, ImgBB, etc. Once hosted, you can use the image URL to add the images.

You can also upload images from your local hard drive if the template supports the image field. For example, Pop-up templates such as SYSKA and Meet & Greet.

Note
  • Ensure that you have the image URL before proceeding.
  • Only .jpeg, .jpg, .gif, and .png image formats that are up to 10 MB in size are supported.
  • Whatfix enables you to upload up to 100 images from your local drive for use in your Pop-ups. Once this limit is reached, you will see the error message. However, you can increase this limit by contacting support@whatfix.com.

You can insert an image in a Pop-up using one of the following three ways:

Insert an image using the Visual Editor

your title goes here
  • Visual Editor is a Beta feature. To enable the feature, contact support@whatfix.com.
  • Once you enable the Visual Editor, you won’t be able to go back to the old experience.
  • Once the Visual Editor is enabled, Pop-ups can only be created using Whatfix Studio, and not using the Dashboard.
  • After creating Pop-ups using the Visual Editor, you can edit them using the Dashboard.
  • You can only edit the Visibility Rules of Pop-ups that were not created using the Visual Editor and cannot customize them further.

Visual Editor enables you to insert an Image in a Pop-up template directly using the UI, without needing to edit the JSX code.

Use the following steps to insert an image in a Pop-up using the Visual Editor:

  1. Log in to the application where you want to create content, and then launch Whatfix Studio.
    CLM_editor plug in2

  2. On the Whatfix Studio, click Popup.
    clm_studio_pop-up

  3. Choose the color theme using the Theme dropdown.
    RB_EDT_popupthemes

    Note

    You can also use your custom color by entering the hex color code in the text box.

  1. Select one of the Pop-up templates, for example, Feature Onboarding.
    Select_template

  2. Click the placeholder to open the Image Froala Toolbar.
    image_froala_toolbar

  3. Click the + icon.
    click_add_componentnew

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

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

  2. The image gets added in the Pop-up.

your title goes here

You can resize the image height using the Resize options icon on the Image Froala Toolbar.

click_image_resize

your title goes here
  • Using the Drag and Drop feature, you can move/re-position the image around the Pop-up.
  • Using the Drag Handlers, the image can be moved/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.

  1. Finish creating the Pop-up and click Save Popup.
    click_save
your title goes here

You can also insert/edit an image in a Pop-up template after creating it, using the Edit icon on the Dashboard.
resize_popup_DB

Insert image using Existing Templates

Use the following steps to insert an image using the Pop-up templates that support image fields:

  1. On the Whatfix Guidance dashboard, click Widgets.
    ia_left_nav_widgets

  2. Click Pop-ups.
    ia_widget_popups

  1. Click Create widget.
    CLM_DB_CreateWidget.png

  2. Click Pop Up.
    CLM_DB_Pop-up

  3. Select any template that has an image placeholder, for example, Feature Onboarding.
    2023-04-12_12-53-03.png

  4. Click the placeholder for the image. The insert image dialog box opens up.
    2023-04-13_14-11-53.png

  5. Click the Image icon.
    2023-04-12_12-59-52.png

  6. Paste the embed URL of the image you want to insert or upload an image from your local drive.
    2023-04-12_13-07-02.png

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 itself.
  1. Finish creating the Pop-up.

Insert image using the Rich Text Editor

Instead of directly using a template with an image placeholder, you may want to add an image in the description of the Popup, or in a template where the placeholder is not available. Using the Rich Text Editor, you can add images between text, in descriptions, or in templates without pre-existing image placeholders.

Use the following steps to insert an image in a Pop-up using the Rich Text Editor:

  1. On the Whatfix Guidance dashboard, click Widgets.
    ia_left_nav_widgets

  2. Click Pop-ups.
    ia_widget_popups

  3. Hover your cursor over the Pop-up segment you want to configure, and then click the Edit icon.
    CLM_DB_Click_edit_icon.png

  1. In the Description section, place the cursor where you want to add the image and use the shortcut command + P (Mac) or CTRL + P (Windows) to open the insert image dialog box.
    image.png

  2. Copy the image URL from the Whatfix dashboard or online image-sharing website and paste the URL.
    image.png

your title goes here

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

  1. Click Insert.
    image.png

  2. Finish creating the Pop-up.


Was this article helpful?

What's Next
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.