Creating Smart-Tips & Beacons

Smart-tips and beacons provide context-sensitive help on a field, button, or other UI element.

  • Visible Smart-Tips: Used to provide context-sensitive help, on-hover of the selected text, and provide supplemental information to buttons, labels, and other screen elements. This uses a help icon (icon) to draw the user's attention. This can be set as an icon with/without an animation.
  • Invisible Smart-Tips: Anchored to an element on the page, Invisible Smart-Tips are used to provide context-sensitive help without displaying the help icon.
  • Beacon: Adds a pulsing animation to draw the reader's attention. The best practice is to use beacons for emergency and temporary notifications.

Creating Visible & Invisible Smart-Tips

Smart-Tips appear when a user hovers over an element. Configuring Smart-Tips involves setting up the correct step-level settings and activation conditions. You can utilize Smart-Tips in the following ways:

  • Create independent Smart Tips as a single-step guide
  • Create a Smart Tip as part of an existing guide

    image of smart tip

Creating Smart-Tips

  1. On the OGL console homepage, select Smart Tip under the Create tab.

    Smart tip

    The New Content modal dialog is displayed.

  2. Enter the Display Name and the Location URL.

    enter_name

  3. Select the create_icon button to launch the OGL Editor.

    launcher

    The OGL Editor launches in a new tab, where you can start capturing the steps for the guide.

    Note:

    The editor appears as an overlay on your application.
  4. Enter the desired text to display in your Smart-Tip.

    Smart Tip edit

  5. Select the desired target element. (Hover over the desired element and select the select button.)

    Target edit

    You can view the live preview of the Smart-Tip you just created.

    View smart tip

  6. Select the wrench icon (spanner) to go to Step Settings.

    Step settings

    The settings window is displayed. Select on each tab to view the setting details.

  7. Set the required Display Settings:

    Settings

    For more information, please see the Display Settings, Activation Settings and Advanced Settings pages.

  8. On the OGL Console homepage, select the Activation icon (check) for the Smart-Tip that you want to activate.Refer to the Enabling Guide Activation Settings section for further information on activation.

Sample smart tip

Note:

Set the Smart-Tip to autoload when activation conditions are met.

Creating an Invisible Smart Tip

An Invisible Smart-Tip appears when a user hovers over a field, but there is no Help Icon or Beacon to indicate the Smart-Tip is there. Use Invisible Smart Tips to push information to your users at the point of interaction.

Configure an Invisible Smart-Tip just as you would a regular Smart-Tip or Beacon. However, do not choose Show Beacon or Show Help icon. Instead, leave those options blank and just configure the step to appear on hover in the Activation settings.

Creating Beacons

Beacons provide a pulsing animation to draw the reader's attention, then displays a message when the user hover over the item. The best practice is to use beacons for emergency and temporary notifications.


beacon example

Creating a Beacon

  1. On the OGL console homepage, select Beacon under the Create tab.

    beacon

    The New Content modal dialog is displayed.

  2. Enter the Display Name and the Location URL.

    new con

  3. Select the create button to launch the OGL Editor.

    launcher

    The OGL Editor launches in a new tab, where you can start capturing the steps for the guide.

    Note:

    The editor appears as an overlay on your application.
  4. Enter the desired text to display when the Beacon is hovered through.

    Beacon step

  5. Select the desired target element. (Hover over the desired element and select the select button.)

    Target Beacon

    You can view the live preview of the Beacon you just created.

    View Beacon

  6. Select the wrench icon (spanner) to go to Step Settings.
  7. On the OGL Console homepage, select the Activation icon (check) for the Beacon that you want to activate.Refer to the Enabling Guide Activation Settings section for further information on activation.

    beacon

    Note:

    Set the Beacon to autoload when activation conditions are met.

separator