Top
Pop-ups Best Practices
  • 08 Jan 2025
  • 3 Minutes To Read
  • Dark
    Light
  • PDF

Pop-ups Best Practices

  • Dark
    Light
  • PDF

Article summary

Use Pop-ups to display important messages

Use Pop-ups to display important messages about your product or feature. For example, inform users about upcoming downtime by scheduling a Pop-up. For more information on scheduling Pop-ups, see Schedule a Pop-up.

Choose the right template for your Pop-up

Create a new Pop-up using one of Whatfix's available templates, eliminating the need to start from scratch. Whatfix enables you to choose from 6 templates. For more information, see Create a Pop-up.

Set the Pop-up Date and Time correctly

For the Pop-up to appear on your application, ensure that the Pop-up start date, end date, start time, and end time are set correctly. For more information, see Schedule a Pop-up.

popup_date_time

Note
  • The Pop-up appears only between the set time duration on the selected dates. For example, if you set the start time at 08:00 and the end time at 21:00, then for the selected dates, the Pop-up would appear between 08:00 and 21:00 every day until the end date.
  • For the Pop-up to appear immediately upon publishing, set the start time as 00:00 and the end time as 23:30. This ensures that the Pop-up appears for end-users regardless of their login time.

Use Pop-ups for product or feature tour

Whatfix recommends you to use Pop-ups to provide a guided product or feature tour to users. Include embedded videos to onboard users, introduce your software application using a quick tour, or deliver change management communication.

Introduce Self Help and Task List

Whatfix recommends that you use the last steps of your Pop-ups, to introduce users to your other Whatfix widgets like Self Help and Task List.

Intro self help task list - 12

Translate Pop-ups to multiple languages

If you want to create a Pop-up for your English and German-speaking users, Whatfix recommends that you translate the Pop-ups in the UI so that the Pop-up content is both in English and German respectively. Route your users to the respective language support page.
translation_sample_pop-up_page

For more information, see Translate Pop-ups in multiple languages.

Preview the Pop-up before pushing it to Production

Once you are done creating a Pop-up, test the Pop-up using the Preview mode. Whatfix also recommends that you check the Pop-up once it's live to ensure that it's appearing as expected to your end users.

Move inactive Pop-ups back to Draft

After a Pop-up serves its purpose, move the widget back to Draft. Keeping inactive content in Production can cause performance issues on the Dashboard, as Whatfix continues to evaluate it, even if it does not display to the end user. Thus, it's best to keep only relevant widgets active for smoother performance.

Note

Scheduling a Pop-up doesn't move the widget back to Draft. While scheduling stops the Pop-up from displaying on the application, it remains in Production and continues to be evaluated.

Create WCAG compliant Pop-ups

  • Add Alternative Text to images within Pop-ups.

Dashboard_Pop-up_alttext

  • Avoid adding interactive elements such as links, videos, or buttons in the middle of the Pop-up content. Position the links at the end of the paragraph or create a separate call-to-action (CTA) for user interaction.
  • Upload videos to Whatfix before you add them to Pop-ups; Videos hosted on Whatfix align with the accessibility behavior of browsers that end users are more familiar with.
  • Ensure that you provide context of the video or audio content when adding them to Whatfix Pop-ups.
  • Add closed captions to videos; ensure that both video and audio transcripts are easily accessible for all end users.
  • Ensure you use WCAG compliant color contrast themes.
  • Check the tabbing order for Whatfix Pop-ups. The logical tabbing order on Whatfix Pop-ups should be from top to bottom and then left to right, in a Z pattern. However, interactive elements on a Pop-up always receive the initial focus; otherwise the leftmost button receives the initial focus when multiple buttons are present. To understand what tabbing order is, refer to Tab order explained.


Note
  • To enable the WCAG compliant Pop-up on the Whatfix Dashboard, contact support@whatfix.com.
  • Once the WCAG feature is active on the Whatfix Dashboard, you can see Add title for screen reader visible .
    Dashboard_WCAG_pop-up
  • The screen reader behavior may change depending on the browser type used by your end users.



Was this article helpful?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.