Top
Add a Beacon to an existing Beacon Collection
  • 08 Oct 2024
  • 2 Minutes To Read
  • Dark
    Light
  • PDF

Add a Beacon to an existing Beacon Collection

  • Dark
    Light
  • PDF

Article summary

Note

Whatfix, by default, evaluates only one Beacon collection per page at any given time. To enable this feature, contact support@whatfix.com.

Use the following steps to add a Beacon to an existing Beacon Collection:

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

  2. Click Beacons.
    ia_left%20nav_beacons

  3. Hover your cursor over the required Beacon collection, and then click the Edit icon.
    db_beacon_edit

  1. Click Launch live edit.
    RB_DB_beacon_launchliveedit

  2. Once the Studio launches in your application, click + Add Beacon.
    add beacon

  3. Select an element on the application where you want the Beacon to appear.

  4. Enter the name of the Beacon.
    Enter_beaconname

Info

The Beacon name is solely for your (creator's) reference and not visible to the end user.

  1. Enter the description for the Beacon Step action.
    Describe beacon
Info

The Beacon description is visible to the end user when they hover their cursor over the Beacon.

  1. In the CONFIGURATIONS tab, under the Disappear Beacon section, select the condition to stop displaying the Beacon.
    Disappear_Beacon

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

  • Change the tip Color using the color picker or enter the hex code in the text box.
  • Customize the style, color, and size of the text of the Beacon Tooltip.
    Config_beaconappearance
  1. Under the Icon section, select the Type, Color, and Size of the icon.
    Configure_beaconicon
your title goes here
  • By default, Whatfix provides four types of icons for a Beacon, that is, Custom, Radial, Ripple, and Speckle.
    Beacon_type

  • Select the Custom icon to configure the Text of your Beacon.
    Custom_icon

  • You cannot change the size of the Custom icon.

  • Whatfix enables you to add custom icons for Beacons. To add custom icons, see Use custom icons for Beacon.

  1. Under the Positioning section, adjust the position of the Beacon.
    Beacon_position
your title goes here

There are two different positioning modes,

  • In the Basic Positioning mode, you can choose among the 8 available positions.
    clm_beacon_basic positioning

  • In the Advanced Positioning mode, you can adjust the position of the Beacon by pixel. Either use the navigational arrows or enter the value in the Movement on key click(px) dropdown to change the position by pixels.

  • Click the Lock icon to unlock and reposition the Beacon.
    Advanced_positioning

  1. In the Tooltip Position section, choose the position of the tooltip.
    clm_beacon_tooltip position
your title goes here

Display Rules enable you to configure Beacons to display the tooltip only when pre-determined conditions are met.

Use the following steps to add Display Rules to a Beacon:

a. Click ADVANCED OPTIONS.
Click_Advanced_Options

b. Expand the Display Rules section and then click + Add Rule.
Click_Add_rule

c. Set the desired conditions. For more information on the different conditions that can be used in Display Rules, see Visibility and Display Rule Conditions.
image.png

Additional conditions can be added using + Add Rule, if needed.

  1. Click Save Beacon.
    save beacon

  2. To save the Beacon collection, click Save Beacon.
    RB_beacon_clicksavebeacon

Note

Add Beacons to a Beacon collection that is in the Production stage by moving it to the Draft Stage, and then following the steps listed.


Was this article helpful?

What's Next
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.