Top
Reselect Smart Tip Elements to Manage UI Changes
  • 18 Oct 2024
  • 3 Minutes To Read
  • Dark
    Light
  • PDF

Reselect Smart Tip Elements to Manage UI Changes

  • Dark
    Light
  • PDF

Article summary

Whenever an application undergoes an update, the underlying UI elements might change. This can result in Whatfix content, like Smart Tips, failing to appear on the desired element as Whatfix won't be able to identify the element on the page.

To prevent such failures, Whatfix enables you to reselect such elements for the existing content. This saves the Content Creator time to create content from scratch every time the application undergoes a change.

Reselect the Smart Tip elements in the following instances:

During Smart Tips creation

Use the following steps to reselect Smart Tip elements during Smart Tips creation:

  1. Log in to the application where you want to create content, and then launch the Whatfix Studio.
    CLM_editor plug in2
  2. Under WIDGETS, click Smart-tip.
    clm_studio_smart tip1
  3. Enter a name for the Smart tip Collection.
    Smart_tip_Name
Info
  • A Smart Tip Collection is a group of Smart Tips created on the same page of an application.
  • The Smart Tip Collection name is solely for your (Creator's) reference and is not visible to the end user.
  1. Click + Add Help Tip to create a new Smart Tip.
    Click_Addhelptip

Info

In case you want to create a Validation Tip, click the dropdown, and then click + Add validation tip.
Studio_validationtip

  1. Select an element on the application to which you would like the Smart Tip to point.
your title goes here

If the default style of your Smart Tips is the "i" icon, then once you start selecting the element to place the Smart Tip, your cursor changes to an "i" icon to help you place the Smart Tip to the desired position.

  1. Enter the purpose of the Smart tip.
    RB_EDT_ST_description
Tip:

Whatfix recommends you add a more detailed optional description for the step action (for example, to specify the rules of an input field).

  1. In the CONFIGURATIONS tab, expand Interaction, and then, in the Display smart-tip on section select when you want to display the Smart Tip.
    Smart_tipinteraction.png

  2. Expand Appearance, under the Tooltip section, make the following configurations:

  • Color: Select a color for the Tooltip from the existing color picker or enter the hex code of the desired color.
  • Close (X): Enable or disable the Close (X) toggle to show or hide the X icon on the tooltip.
  • Close (X) color: Select a color for the X icon from the existing color picker or enter the hex code of the desired color.
  • Title: Select font size, color, and style for the Tooltip title.
  • Description: Select font size, color, and style for the Tooltip text.
    ST_Appearance
  1. Under the Icon section, select the Type, Color, and Size of the icon.
    ST_Iconlib
your title goes here

Whatfix enables you to add custom icons for Smart Tips. To add custom icons, see Use custom icons for Smart Tips.

  1. Expand Positioning and adjust the position of the Smart Tip.
    clm_smart tip_basic positioning
your title goes here

The following are the two different positioning modes available:

  • In the Basic Positioning mode, choose among four available positions.
    clm_smart tip_basic positioning

  • In the Advanced Positioning mode, make micro adjustments to the position of the Smart Tip. Either use the navigational arrows or enter the value in the Movement on key click(px) dropdown to change the position by pixels.
    clm_smart tip_advanced positioning

  1. Expand Tooltip Position and choose the position of the tooltip.
    Clm_smart tip tool position
your title goes here

Display Rules enable you to configure Smart Tips to get displayed only when certain conditions are met. Setting Display Rules for a Smart Tip ensures that the Tip appears on the correct page, based on the conditions set.

Use the following steps to add Display Rules to a Smart Tip:

a. Click the ADVANCED OPTIONS tab.
Studio_advancedoptions

b. Under the Display Rules section, click + Add Rule to set the desired conditions.
Studio_addrule

  • For more information on the different conditions that can be used in Display Rules, see Visibility and Display Rule Conditions

  • Choose to add multiple Display Rule Conditions using the + Add Rule button.

  1. Click Save Tip.
    Studio_savetip
Info

To add more Smart Tips, click + Add Help Tip on Studio, and then repeat steps 5 to 10.

  1. Once you've created Smart Tips, on Studio, click the Smart Tip that you want to edit.
    Studio_clicksmarttip

  2. Click Edit step.
    Studio_clickedit

  3. Click Reselect element.
    Click_reselectelement

  4. Select the element on your application.

  5. Click Save.
    Click_SaveST_Studio.png

  6. Finish the Smart Tip creation and then, click Save Tip.
    Click_Savetip_ST.png

Post Smart Tips creation

Use the following steps to reselect Smart Tip elements post Smart Tips creation:

  1. On the Whatfix Guidance dashboard, click Content.
    ia_left_nav_content

  2. Click Smart-tips.
    ia_left%20nav_smart%20tips

  3. Hover your cursor over the required Smart Tip collection, and then click the Edit icon.
    CLM_DB_SmartTip_Edit_icon

  1. Click Launch live edit.
    launch live edit

  2. Once the Studio launches on the application, click the Smart Tip you want to reselect the element for.

  3. Click Edit step.
    soft_editor_edit.png

  4. Click Reselect element.
    Editor_st_reselect_element

  5. Select the element on your application.

  6. Click Save.
    soft_editor_save.png

  7. Click Save Tip.
    Click_Savetip


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.