This feature available on the Pro Plan
Overview
The Image Editor Widget allows campaign entrants to make minor edits to images they've uploaded as part of their form submission. When added to a campaign, this widget appears as a pop-up by default when users click the Edit icon on the thumbnail of their submitted image.
Adding the Image Editor Widget
To add the Image Editor Widget to your campaign:
- Click the Image Editor Widget icon in the Add Widgets Panel, or
- Drag the icon into your preview area.
Note: This widget does not allow editing of images added via the Image Widget or as background images in the Style Panel.
Widget Settings
The widget settings pop-up allows you to configure your Image Editor Widget.
Renaming the Widget
- Click the pencil icon in the top-left corner (next to the widget name).
- Enter a new name and press Enter.
CSS ID
- The CSS ID (starting with a
#) is displayed in the top-right corner of the pop-up.
Customization
- Navigate through the left-side menu to adjust settings. Use the Back and Next buttons to move between sections.
When finished, click the Save and Exit button.
Display Options
The Display Options section contains the main settings for this widget.
Auto Load Image
- Check the Auto load image into editor box to automatically load uploaded images into the editor.
- If unchecked, visitors will need to click the Edit icon on the submitted image thumbnail to load the image into the editor.
Editor Height
- Adjust the Editor Height (default: 400 pixels) using the provided field.
Editing Buttons
You can choose which editing tools to include in the Image Editor. Available options include:
- Crop
- Flip
- Rotate
- Undo/Redo
- Frame (not selected by default)
To include a tool, check its box. To exclude it, uncheck the box.
Reordering Buttons
- Click and hold the drag icon (☰) for the button you'd like to move.
- Drag the button to its new position in the list.
Buttons will appear in the editor from left to right, following the order in the list.
Additional Options for Editing Buttons
Rotate
- Customize the rotation angle for Clockwise and Counterclockwise rotations.
- Enter values (in degrees) in the Rotation Angle fields.
Frame
The Frame tool allows you to upload custom frames to overlay on the uploaded image. Frames must:
- Be in PNG or GIF format.
- Include transparent space for the uploaded image to show through.
Adding Frames
- Click the + icon to open the Media Library pop-up.
- Add your frame image to the Media Library. For guidance, refer to the Media Manager Help Doc.
- Select the desired frame(s) and click Use Selected.
Using Frames
- If only one frame is added, it will automatically overlay the uploaded image.
- If multiple frames are available, they will appear below the image in the editor, allowing visitors to select their preferred frame.
Visibility
Control when and where the widget is visible using the Visibility section. Options include:
- Setting specific dates and times.
- Displaying the widget only in the Builder.
- Restricting visibility by country.
For more details, refer to the Widget Visibility Help Doc.
Extras
Explore advanced customization options in the Extras section, including:
- Main Tag
- CSS Classes
- Smart Labels
Learn about the Main Tag, CSS Classes, and Smart Labels settings here.