--- title: "Insert an Image in a Pop-up" slug: "inserting-an-image-in-a-pop-up" updated: 2024-10-11T18:00:24Z published: 2024-10-11T18:00:24Z --- > ## Documentation Index > Fetch the complete documentation index at: https://support.whatfix.com/llms.txt > Use this file to discover all available pages before exploring further. # Insert an Image in a Pop-up 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](/studio/docs/upload-images-and-videos-to-whatfix-dashboard), or on an online image-sharing website like *Imgur*, *ImgBB*, and more. Once hosted, use the image URL to add the images. Note - 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](mailto:support@whatfix.com?Subject=Upload%20limit%20reached&Body=Hello%20Team%2C%0A%0AMy%20account%20has%20reached%20the%20upload%20limit%20to%20add%20images%20and%20videos%20in%20Pop-ups.%20Please%20increase%20the%20maximum%20limit%20for%20images%20and%20videos.%0A%0AMore%20information%3A%0A%0AThanks%20and%20regards.). 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_editor%20plug%20in%282%29.png) 2. On the Whatfix Studio, click **Popup**. ![clm_studio_pop-up](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_studio_pop-up.png) 3. Choose the color theme using the **Theme** dropdown. ![2024-10-18_16-49-43.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-10-18_16-49-43%281%29.png) Note: Use custom color by entering the hex color code in the text box. ![Add hex color code for Pop-ups before you select a template](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Pop-ups_hexcolor_code.png) 1. Select one of the Pop-up templates, for example, **Feature Onboarding**. ![Select_template](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Select_template.png) 2. Click the image placeholder to open the **Image Froala Toolbar**. ![Image_froala_toolbar](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%2012.28.20%20PM.png) 3. Click the **+** icon. ![click_add_componentnew](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_add_componentnew.png) 4. On the **Add Component** dialog box, click **Image**. ![click_image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_image%281%29.png) 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_add_img.png) 6. Click **Insert**. ![click_insert](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_insert%281%29.png) 7. The image gets added in the Pop-up. your title goes here Once the image gets added, make the following changes using the **Image Froala Toolbar** : - Resize the image height using the **Resize options** icon. ![click_image_resize](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image_resize.gif) - Enable the **Ignore safe area** toggle to extend the image beyond the safe area boundaries. ![ignore_safe_area_toggle](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%201.53.30%20PM.png) - Use the **Align** icon to align the image to left, right, or center. ![Align_icon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%202.04.10%20PM.png) - Use the **Vertical Align** icon to align the image vertically. ![Vertical_align](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%202.04.10%20PM%281%29.png) - Use the **Alternative Text** icon to provide a textual description of the image content. ![Alternative_text](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%202.04.10%20PM%282%29.png) - Use the **Replace Image** icon to replace the existing image. ![Replace_icon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%202.04.10%20PM%283%29.png) - Use the **Remove Component** icon to delete the image. ![Remove_Component](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screenshot%202024-07-05%20at%202.04.10%20PM%284%29.png) your title goes here - 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). ![Drag and Drop](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Screen%20Recording%202024-07-05%20at%202.16.06%20PM%20%281%29.gif) 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. For more information, see [Can I undo the changes made with the Drag Handlers?](/studio/docs/can-i-undo-changes-made-with-the-drag-handlers). 1. Finish creating the Pop-up and click **Save Popup**. ![click_save](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/click_save%282%29.png) your title goes here Insert or edit an image in a Pop-up template after creating it, using the **Edit** icon on the Dashboard. ![resize_popup_DB](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/resize_popup_DB.png) Drag Handlers are used to move or reposition the component within the Pop-up. ## Related - [Visual Editor](/visual-editor.md)