- 11 Oct 2024
- 2 Minutes To Read
-
Print
-
DarkLight
-
PDF
Insert an Image in a Pop-up
- Updated On 11 Oct 2024
- 2 Minutes To Read
-
Print
-
DarkLight
-
PDF
Visual Editor enables you to insert an Image in a Pop-up template directly using the UI, without needing to edit the JSX code.
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, use the image URL to add the images.
- Ensure that you have the image URL before proceeding.
- The image URL must contain https if the Pop-up is displayed on a secure webpage.
- Only .jpg, .gif, and .png image formats that are up to 4 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, this limit can be increased by contacting support@whatfix.com.
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.
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 image 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.
-
Click Insert.
-
The image gets added in the Pop-up.
Once the image gets added, make the following changes using the Image Froala Toolbar :
-
Resize the image height using the Resize options icon.
-
Enable the Ignore safe area toggle to extend the image beyond the safe area boundaries.
-
Use the Align icon to align the image to left, right, or center.
-
Use the Vertical Align icon to align the image vertically.
-
Use the Alternative Text icon to provide a textual description of the image content.
-
Use the Replace Image icon to replace the existing image.
-
Use the Remove Component icon to delete the image.
-
Use the Drag and Drop feature to 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).
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. For more information, see Can I undo the changes made with the Drag Handlers?.
- Finish creating the Pop-up and click Save Popup.
Insert or edit an image in a Pop-up template after creating it, using the Edit icon on the Dashboard.