Create Pop-ups with New Templates

1. Log in to the application where you want to create content, and then launch Whatfix Studio.
   

2. In the WIDGETS section, click Popup.
   

3. Based on your requirements, select a Template from the list.
   

Info:

Use the Filter option to filter the templates by Use Case, Type, or Component.

The following table lists all the available filters:

Filter	Values
Use Case	Outage Alerts, Maintenance, Training, Feature Updates, Policy Updates, and  Announcements
Type	Modal, Snackbar, and Carousel
Component	Media and Text and Only Text

3. Click Create widget.
   

4. Click Pop-up.
   

5. Select a Template based on your requirement.
   

Info:

Use the FIlter option to filter the templates by Use Case, Type, or Component.

• Reposition an element within the Pop-up: A grab handle appears at the top-centre of the element and is visible on both hover and select. Use it to reposition an element.
  
  Here’s a GIF that shows how you can use the grab handle to drag and reposition the element:

  

• Resize an element within the Pop-up:

  • Text components: Use the resize controller in the middle-right side to adjust width (height automatically adjusts).

  • All other components (images, buttons): Resize controllers on the right side and bottom center, allowing both width and height adjustment.
    
    Here’s a GIF that shows how you can resize an element:

    
    

• Configure the space in between elements: adjust vertical spacing and insert new elements between existing ones. Hover your cursor in between elements, and use the + (plus) button to adjust the space in between elements.
  
  Here’s a GIF that shows how you can adjust he space in between elements:

  

The editor enables you to drag and resize the total size of the Pop-up. Here’s how you can resize the Pop-up width and height:

You can use the Undo and Redo buttons in the editor to quickly revert or reapply changes while editing your popup.

The following lists all the actions that are tracked with the Undo and Redo feature:

Editor (drag-and-drop workspace):

• Element repositioning (drag and drop)

• Element resizing (width and height changes)

• Spacer adjustments

• Adding a new element

• Deleting an element

• Side-by-side placement changes of elements

• Continuous typing is treated as a single undo step

• Formatting changes (bold, paste, delete) are tracked as one action

Whatfix Studio Configuration Panel:

• Background appearance changes (colour, gradient, image)

• Button colour changes and link modifications

• Font size changes

• Pop-up position changes

• Auto-scroll toggle and configuration

• Don't show me again toggle

Your title goes here

The following limitations apply when reverting or reapplying changes:

• Up to 20 actions are supported for Undo and Redo

• Oldest actions are removed once the limit is reached

• Redo history is cleared after a new action is performed

• Undo and Redo history persists within the current editing session only

• Navigating away from the editor or refreshing the page clears the history

• Saving the pop-up does not clear the history. You can continue to undo actions after you save the Pop-up, as long as you remain in the same session.

The Whatfix Rich Text Editor enables you to change font, size, and link multimedia content. For more information, see Add Rich Text content inside a Pop-up.

Control theme

• Choose theme: Light or Dark

Show close (X) button

• Toggle to show or hide the close button

• When enabled, appears at the top-right corner of the Pop-up

Title for screen reader

• Add a descriptive title for accessibility

• The specified text is read by screen readers
  

  Note:

  The accessibility feature is not available by default. To enable, contact support@whatfix.com.

Don’t show me again

• Enable to allow users to opt out of seeing the Pop-up again.

Carousel (applicable only for carousel templates)

Your title goes here

This section appears in the Controls accordion only when a carousel template is selected.

• Enable or disable the Move slides automatically toggle.

  • Toggle ON (default): Slides transition automatically at the configured interval.

  • Toggle OFF: Slides advance only when the end user manually clicks an arrow or a marker.

• Set delay: In the Delay by field, specify by how many seconds the next slide should appear (the default is four seconds).
  

• Configure navigation for the Pop-up. In the Show dropdown, select from three options:
  

  • Both arrows and markers (displays both left and right arrow marks, and dot indicators)
    

  • Only Arrows (displays left and right arrow marks only)

  • Only Markers (displays dot indicators only)

Add Carousel slides

• Use the + Add button to add new slides to the carousel. The active slide being edited is visually highlighted.