Create Popups with 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 Popup: 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 Popup:

  • Text, image and video components: Use the resize controller in the middle-right side to adjust width only.

    Your title goes here

    • The maximum width of an image component is dynamically constrained by the width of the popup. When you adjust the popup width, the image automatically resizes. The maximum width of an image component is 800 px.

    • When you change the Border Radius of the Popup, the image components appear within the rounded corners.

  • Button component: Resize controllers on the right side and bottom center, allowing both width and height adjustment.

  • The maximum width of an element is constrained by the Popup width. If padding is configured, the effective maximum width becomes the Popup width minus the applied padding.
    
    Here’s a GIF that shows how you can resize text and button components:

    

    
    

• Configure the space in between elements: adjust vertical spacing and insert new elements between existing ones. Hover your cursor in between elements, and use theDrag to adjust spacing handle to adjust the space in between elements. Drag the handle up or down to increase or decrease the space between the elements.
  
  Here’s a GIF that shows how you can adjust the space in between elements:

  

The editor enables you to drag and resize the total size of the Popup. When you resize the Popup, the editor displays the width and height of the Popup, providing a clearer understanding of its size while resizing.

Here’s how you can resize the Popup width and height:

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

All edit actions performed within the Studio (right panel and editor space) can be undone or redone.

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 or Redo history is session-based and does not persist after saving the Popup

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

The Whatfix Rich Text Editor enables you to change font, size, and link multimedia content. Use the + (plus) icon to add elements or components at specific positions within the Popup layout. For more information, see Add Rich Text content inside a Popup.

Here’s how you can add components to the Popup:

Paste text and retain the formatting of the component

Use the following steps to paste text into a text or button component without losing its formatting:

1. Copy the text from its source.

2. In the Editor, select the text you want to replace.

3. Press Cmd + Shift + V on Mac or Ctrl + Shift + V on Windows.

The pasted text keeps the existing formatting of the component.

Note:

If you paste with Cmd + V or Ctrl + V, the pasted text uses the default formatting of the copied text.

The following table lists the different types of Button Action, their behaviors and descriptions. For more information, see Configure Button Actions in a Pop-up.

Control theme (applicable to Close (X) and Don’t show me again buttons)

• 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 Popup

Don’t show me again

• Enable to allow users to opt out of seeing the Popup again.

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.

Carousel (applicable only for carousel templates)

Your title goes here

This section appears in the Controls accordion only when a carousel template is selected. For more information, see Create a Carousel Pop-up.

• 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).
  
  

  Your title goes here

  When Move slides automatically is enabled:

  • When end-users hover over the Popup, it pauses the slide transition.

  • When users move the cursor away, the timer resumes from where it paused and the next slide appears based on the remaining time.

• Configure navigation for the Popup. 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.
  
  

  Your title goes here

  You can add upto 12 slides in a carousel popup.