Beacon Docs
  • Announcements - Modals/Slide Outs
  • Announcements - Banners/Info-Island
  • Highlights - Tooltips/Hotspots
  • Journeys - Flows
  • Journeys - Guides
  • NPS & Forms - Surveys
  • AI chat setup
  • How AI Assist work?
  • How to create commands in Dashboard?
  • How to create Badges?
  • How to setup Dashboard?
  • How to setup Editor Extension?
  • How to create commands using Editor Extension?
  • How to setup SDK?
  • How to create Product Tours/Flows?
  • How to create Modals/Slide-Outs?
  • How to create Segment?
  • How to create Tooltips/Hotspot?
  • How to create User Guides?
  • How to create Banners/Info-Island?
  • How to create NPS & Forms or a Surveys?
Powered by GitBook
On this page

How to create Badges?

PreviousHow to create commands in Dashboard?NextHow to setup Dashboard?

Last updated 1 year ago

The badge in the command bar serves as a visual indicator, providing quick insights or status information associated with specific commands.

To initiate the badge creation process, navigate to the beacon bar in the sidebar and choose the "Badges" option, or use the shortcut "Command + K" (for Mac) or "CTRL + K" (for Windows) and enter "Badges" then click on "Create Badge" button.

Within the content tab, provide a name for the badge as a reference. In the search and select commands dropdown, you have the option to search for either created commands or connected helpdocs. You can add multiple commands or help docs.

Navigate to the Styles tab to customize the badge. You can choose from three options: manually add, upload an image, or select none.

Opt for the "Add Manually" option to include both an icon and text for the badge. Additionally, you can enhance the badge by incorporating a border through the border color option. Utilize the toggle switch for the flexibility to disable unwanted elements.

On the right-side section, preview the badge, and utilize the dark mode toggle switch to observe how it will appear in dark mode.

To emphasize the entire command, you can apply a border or background by clicking the "Add Highlighter" button located at the bottom right.

By using the action text color and description color options, you can customize the color of the command text and description. This provides flexibility in addition to setting colors or gradients for the entire command, including borders and backgrounds.

Highlighters can be added in all three options: "Add Manually," "Upload Image," and "None."

Within the "Upload Image" option, instead of text, you can incorporate an image and customize it with features like animation, size, and alignment.

Choosing the "None" option limits the addition of only highlighter to the commands.

Navigate to the Settings tab to define command behavior by incorporating segments. Additionally, you have the option to override command behavior with either another command or a specified path.

Refer to the screenshot below to visualize how the badges will appear in your dashboard command palette.