Top
Login
Contents x
Create a Beacon
  • 08 Oct 2024
  • 4 Minutes To Read
  • Print
  • Dark
    Light
  • PDF
Contents

Create a Beacon

  • Updated On 08 Oct 2024
  • 4 Minutes To Read
  • Print
  • Dark
    Light
  • PDF
Article summary

Beacon creation is a two-step process:

Step 1: Create the Beacon

Step 2: Configure the segment for the Beacon

Step 1: Create the Beacon

Use the following steps to create a Beacon collection:

  1. Log in to the application where you want to create content, and then launch Whatfix Studio.
    CLM_editor plug in2
  2. On Whatfix Studio, click Beacon.
    clm_studio_beacon
  3. Enter a name for the Beacon Collection.
    Enter_Beacon_Name

Info
  • A Beacon collection is a group of Beacons and are usually on the same page.
  • The Beacon collection name is solely for your (creator's) reference and is not visible to the end-user.
  • Visibility Rules are defined for a Beacon collection. So even if you have only one Beacon on a page, it needs to be part of a collection.

  1. Click + Add Beacon to create a new Beacon.
    Add_Beacon

  2. Select an element on the application where the Beacon must appear.

  3. Enter a description for the Beacon action.
    RB_DB_beaconaction

Info

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

  1. On Studio, 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. In the CONFIGURATIONS tab, expand Interaction, and then, 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.

Note

Once you start selecting the element to place the Beacon, your cursor changes to the set Beacon style. Then, place the Beacon to any desired position.

  1. Expand Positioning and 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
your title goes here

To add more Beacons, click + Add Beacon on the Studio, and then repeat steps 5 to 11.

  1. To save the Beacon collection, click Save Beacon.
    RB_beacon_clicksavebeacon
Note

  • Once you have created the Beacon collection, a segment is automatically created on your Whatfix dashboard.

  • To make content like Beacon or Smart Tip display on your page/ application, on the Whatfix Dashboard, go to the Widget section and move the associated Beacon segment from Draft to Production.

Info

Edit a Beacon inside a collection during the Beacon creation process. For more information, see Edit Beacons.

Step 2: Configure the segment for the Beacon

Note

If your account is Smart Context enabled, then Whatfix automatically configures the Visibility Rules. In that case, skip to step 7.

Use the following steps to configure a Beacon segment:

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

  2. Click Beacons.
    ia_widget_beacons

  1. In the Draft stage, hover your cursor over the auto-created segment, and then click the Edit icon.
    db_beacon_edit
Info

The Beacon collection that is attached is the newly published content.

  1. Expand the Set Visibility Rules section and configure your Visibility Rules that determine how the Beacon collection is displayed to the end user.
    RB_DB_beacon_setvisibilityrules
Note

For more information on the different conditions that can be used in Visibility Rules, see Visibility and display rule conditions.

  1. Click the When tab, and then select the number of times you want to show the Beacon.
    RB_DB_Whentab1
Note

  • A Flow, Video, or Link can be attached to a Beacon.

  • To attach content to a Beacon, expand the attach content section, click Attach Content, and then select any content that you want to display to your users.
    attach content

  • The attached content is displayed based on the Disappearance of Beacon setting you configured while creating it.

  1. Click Save.
Info
  • The Beacon stops displaying once the end user clicks it.
  • To show the Beacon again, you can refresh the Beacon segment or re-create it.
  • If Beacons are to be used for multiple pages, separate segments need to be created for each individual page.
  • Subsequent changes to the Beacon collection do not update the corresponding segment.

  1. Once you are done creating the Beacon collection, select the segment, and then click Send to ready.
    clm_db_send_to_ready

  2. Go to the Ready stage and select the segment you want to move to the Production stage, and then click Push to production.
    clm_db_push_to_production

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