Top
Login
Contents x
Create Smart Tips
  • 18 Oct 2024
  • 5 Minutes To Read
  • Print
  • Dark
    Light
  • PDF
Contents

Create Smart Tips

  • Updated On 18 Oct 2024
  • 5 Minutes To Read
  • Print
  • Dark
    Light
  • PDF
Article summary

Smart Tip creation is a two-step process:

Step 1: Create the Smart Tip

Step 2: Configure the segment for the Smart Tip

Step 1: Create the Smart-Tip

Use the following steps to create a Smart Tip Collection:

  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_editor_AddValidationTip

  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
Note

Additionally, a more detailed optional description for the step action can be added (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 Tool tip Color from the existing color picker or enter the hex code of the desired color.
  • Close (X): Choose to show or hide the X icon on the tooltip by enabling or disabling the Close (X) toggle.
  • Close (X) color: Select the Close (X) color from the existing color picker or enter the hex code of the desired color.
  • Title: Select font size, color, and style of the Tool Tip Title.
  • Description: Select font size, color, and style of the Tool Tip 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 the 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.
Click_Add_rule

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

  • Multiple Display Rule Conditions can be added using the + Add Rule button.

  1. Click Save Tip.
    Click_savetip
Info

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

  1. After all the Smart Tips are created, on the Studio, click Save Tip.
    Studio_savetip

  2. On the confirmation Pop-up, click Okay.
    Studio_clickokay

Note
  • Once you create the Smart Tip collection, a segment containing your collection is auto-created on your Whatfix Dashboard.
  • It is possible to preview or edit the Smart Tip Collection using the confirmation pop-up.
Info

A Smart Tip inside a collection can be edited during the Smart Tip creation process. For more information, see Edit Smart Tips.

Step 2: Configure the Segment for the Smart Tip

Note

If your account is Smart Context enabled, then Whatfix auto-configures the Visibility Rules. In this case, you just need to activate the segment, as shown in Step 7.

  1. On the Whatfix Guidance dashboard, click Widgets.
    ia_left_nav_widgets

  2. Click Smart-tips.
    ia_widget_smart%20tips

  1. Hover your cursor over the Smart Tip segment you want to configure, and then click the Edit icon.
    CLM_DB_SmartTip_Edit_icon
Info

The segment name is the Smart Tip collection name.

  1. Expand the Set Visibility Rules section and set up your Visibility Rules that determine the display of the Smart Tip collection.
    Studio_st_set visibility rules
Note

To ensure that the Smart Tip appears correctly on your page or application, add Display Rules to each individual Smart Tip within the collection.
For more information on Display Rules, see Visibility and Display Rules Conditions.

  1. Click Add to add the collection that you created.
    Studio_st_add to collection

  2. Click Save.
    Studio_dashboard_ClickSave

  3. Once you have configured the Smart Tip segment, select the segment using the checkbox, and then click Send to ready.
    clm_db_send_to_ready

  4. Go to the Ready stage, and then click Push to production.
    clm_db_push_to_production

Note
  • Ensure that the Smart Tip collection and its associated Smart Tip segment are pushed to Production to make them live on the application.
  • Ensure that you push the widget first from the Widgets section, as this guarantees that the segment and its associated content are simultaneously pushed to Production. For more information on pushing a widget to Production, see Push Whatfix content and widgets to Production.
  • Position the Smart Tip carefully so that no other important information or element is hidden.
  • Whatfix evaluates only one Smart Tips collection per page at any given time. To show two or more Smart Tips on the same page, create them as part of a single collection whereas Whatfix can also display multiple Smart Tip segments on the same page by enabling a feature flag. Please contact support@whatfix.com for more information.
  • If Smart Tips are to be used for multiple pages, separate segments need to be created for each individual page.

your title goes here

If you're using the JS Embed method to test or publish Whatfix content, add the relevant conditions in Map Stages. This ensures that the content appears in the correct instance. For more information, see How to add conditions in Map Stages? (Log in to see the article)


Was this article helpful?
What's Next
Privacy Policy | Whatfix Glossary | Whatfix Platform Status
Copyright © 2024 WHATFIX TM. All rights reserved.
Change password!
Changing your password will log you out immediately. Use the new password to log back in.
Change profile
Success!
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.
Logout