- 08 Jan 2024
- 4 Minutes To Read
-
Print
-
DarkLight
-
PDF
Insert an Image in a Pop-up
- Updated On 08 Jan 2024
- 4 Minutes To Read
-
Print
-
DarkLight
-
PDF
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.
- 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:
- 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:
-
Log in to the application where you want to create content, and then launch Whatfix Studio.
-
On the Whatfix Studio, click Popup.
-
Choose the color theme using the Theme dropdown.
NoteYou can also use your custom color by entering the hex color code in the text box.
-
Select one of the Pop-up templates, for example, Feature Onboarding.
-
Click the placeholder to open the Image Froala Toolbar.
-
Click the + icon.
-
On the Add Component dialog box, click Image.
-
Paste the embed URL of the image you want to insert or upload an image from your local drive or Whatfix Gallery.
- 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.
-
Click Insert.
-
The image gets added in the Pop-up.
You can resize the image height using the Resize options icon on the Image Froala Toolbar.
- 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).
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.
- Finish creating the Pop-up and click Save Popup.
You can also insert/edit an image in a Pop-up template after creating it, using the Edit icon on the Dashboard.
Use the following steps to insert an image using the Pop-up templates that support image fields:
-
On the Whatfix Guidance dashboard, click Widgets.
-
Click Pop-ups.
-
Click Create widget.
-
Click Pop Up.
-
Select any template that has an image placeholder, for example, Feature Onboarding.
-
Click the placeholder for the image. The insert image dialog box opens up.
-
Click the Image icon.
-
Paste the embed URL of the image you want to insert or upload an image from your local drive.
- 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.
- Finish creating the Pop-up.
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:
-
On the Whatfix Guidance dashboard, click Widgets.
-
Click Pop-ups.
-
Hover your cursor over the Pop-up segment you want to configure, and then click the Edit icon.
-
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.
-
Copy the image URL from the Whatfix dashboard or online image-sharing website and paste the URL.
The image URL must contain https if the Pop-up is displayed on a secure webpage.
-
Click Insert.
-
Finish creating the Pop-up.