Top
Insert an image in a Pop-up
  • 24 Jan 2024
  • 2 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, and more. 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, 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.

You can insert an image in a Pop-up in the following two ways:

Insert image using 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 All widgets.
    ia_widgets_all_widgets

  3. Click Create widget.
    CLM_DB_CreateWidget.png

  1. Click Pop Up.
    CLM_DB_Pop-up

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

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

  4. Select the Image icon.
    2023-04-12_12-59-52.png

  5. You can 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 All widgets.
    ia_widgets_all_widgets

  3. Click Create widget.
    CLM_DB_CreateWidget.png

  1. Hover your cursor over the Pop-up to which you want to add an image, and then click the Edit icon.

    CLM_DB_Click_edit_icon.png

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

  3. 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?

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.