--- title: "Create Smart Tips" slug: "create-smart-tips" updated: 2026-05-11T10:50:33Z published: 2026-05-11T10:50:33Z --- > ## Documentation Index > Fetch the complete documentation index at: https://support.whatfix.com/llms.txt > Use this file to discover all available pages before exploring further. # Create Smart Tips Whatfix enables you to create Smart-tips using the Whatfix Studio. Expand the following sections to learn how to create, configure and manage Smart-tips: > [!WARNING] > Note: > > If your account has been migrated to the [Unified Content Experience](/studio/docs/unified-dashboard-experience), Visibility rules for Smart Tips, Beacons, Launchers, and Blockers have moved to the **Content** page and are now called **Collection Visibility**. Who, When, and Where conditions are unchanged. > > > > The Unified Content Experience is currently available as a Beta feature. To enable it, contact [support@whatfix.com](mailto:support@whatfix.com?subject=Enable%20Unified%20Content%20Experience&body=Hi%2C%20%0A%0APlease%20enable%20the%20unified%20content%20experience%20for%20my%20account.). 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_editor%20plug%20in%282%29.png) 2. Under **CONTENT**, click **Smart-tip**. ![image.png](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-6NSSUQLX.png) 3. Enter a name for the **Smart tip Collection**. ![Add a smart-tip collection name ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Smart-tips_Collection.png) 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 reference and is not visible to the end user. 1. Click **Add Help Tip** to create a new Smart Tip. ![Add Help Tip ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Smart-tips_HelpTip.png) **Info:** In case you want to create a Validation Tip, click the dropdown, and then click **Add validation tip**. ![Studio_editor_AddValidationTip](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_editor_AddValidationTip.png) 1. Select an element on the application to which you would like the Smart Tip to point. Note: 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/RB_EDT_ST_description.png) 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/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. ![Set the color of smart-tips on Studio ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Smart-tips_color.png) 1. Under the **Icon** section, select the **Type**, **Color**, and **Size** of the icon. ![ST_Iconlib](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ST_Iconlib.png) Note: Whatfix enables you to add custom icons for Smart Tips. To add custom icons, see [Use custom icons for Smart Tips](/studio/docs/use-custom-icons-for-smart-tips). 1. Expand **Positioning** and adjust the position of the Smart Tip. ![clm_smart tip_basic positioning](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_smart%20tip_basic%20positioning.png) Note: 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_smart%20tip_basic%20positioning.png) - 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_smart%20tip_advanced%20positioning.png) 1. Expand **Tooltip Position** and choose the position of the tooltip. ![Clm_smart tip tool position](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Clm_smart%20tip%20tool%20position.png) Note: [Display Rules](/studio/docs/visibility-and-display-rule-conditions-1) 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. ![Click Advanced options on Flow steps ](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_FlowSteps_Advancedoptions.png) b. Under the **Display Rules** section, click **+ Add Rule** to set the desired conditions. ![Add display rules to Flow steps under Advanced Options](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_Flows_Advancedoptions_Display%20Rules.png) - For more information on the different conditions that can be used in Display Rules, see [Visibility and Display Rule Conditions](/studio/docs/visibility-and-display-rule-conditions-1). - Multiple Display Rule Conditions can be added using the **+ Add Rule** button. 1. Click **Save Tip**. ![Click_savetip](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-10-18_14-27-29.png) 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-10-18_14-28-50.png) 2. On the confirmation Pop-up, click **Okay**. ![Studio_clickokay](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/2024-10-18_14-31-37.png) 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](/studio/docs/edit-smart-tips). Step 2: Configure Collection Visibility (If you are on the New Unified Dashboard Experience) 1. On the Whatfix Guidance dashboard, click **Content**. ![ia_left_nav_content](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left_nav_content.png) 2. Click **Smart-tips**. ![ia_left%20nav_smart%20tips](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left%20nav_smart%20tips.png) 1. Hover your cursor over the Smart-tip collection you want to configure, and then click the **Edit** icon. ![CLM_DB_SmartTip_Edit_icon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_DB_SmartTip_Edit_icon.png) 2. Click **Collection Visibility**. ![Image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Edit_Collection_Visibility(1).png) 3. Expand **Where does the tips collection Rules appear?** section, and configure URL and Page tags. For more information, see [Set Where your Widget or Content appears](/studio/docs/set-where-your-widget-appears). ![Image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-3GM2TLD6.png) 4. Expand **When does the tips collection Rules start and stop appearing?** section, and configure configure when you want to start showing your widget. For more information, see [Set When your Content appears](https://support.whatfix.com/studio/docs/set-when-your-widget-appears-using-visiblity-rules-20) ![Image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-Z9ZJQ8ZP.png) 5. Expand **Who does the tips collection Rules appear to?** section, and configure who you want to show your content to. For more information, see [Set Who can see your Widget](/studio/docs/set-who-can-see-your-widget). ![Image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-0SGR9SX6.png) 6. Click **Save**. ![Image](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image-7SUR242F.png) Step 2: Configure the Visibility Rules for the Smart Tip (Old Experience) 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_left_nav_widgets.png) 2. Click **Smart-tips**. ![ia_widget_smart%20tips](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/ia_widget_smart%20tips.png) 1. Hover your cursor over the Smart-tip collection you want to configure, and then click the **Edit** icon. ![CLM_DB_SmartTip_Edit_icon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CLM_DB_SmartTip_Edit_icon.png) 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_st_set%20visibility%20rules.png) 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](/studio/docs/visibility-and-display-rule-conditions). - If you are using new visibility rules, see [New Visibility Rules for Smart Tips](/studio/docs/visibility-rules-for-smart-tips-on-studio) in Studio. 1. Click **Add** to add the collection that you created. ![Studio_st_add to collection](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_st_add%20to%20collection.png) 2. Click **Save**. ![Studio_dashboard_ClickSave](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/Studio_dashboard_ClickSave.png) 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](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_db_send_to_ready.png) 4. Go to the **Ready** stage, and then click **Push to production**. ![clm_db_push_to_production](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_db_push_to_production.png) Note: - Ensure that the Smart Tip collection and its associated Smart Tip segment are published 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 published. For more information, see [Publish Whatfix content and widgets](/studio/docs/pushing-whatfix-content-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](mailto: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. Note: If you're using the [JS Embed method](/studio/docs/integrating-whatfix-using-javascript) 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?](/studio/docs/how-are-the-visibility-rules-evaluated-while-mapping-stages) (Log in to see the article) ## Related - [Smart Tips Best Practices](/smart-tips-best-practices.md) - [Smart Tip widget is auto created in your application](/smart-tips-widget-is-auto-created-in-your-application.md) - [Smart Tip overlapping with the elements of the underlying application](/smart-tip-overlapping-with-the-elements-of-the-underlying-application.md)