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 commands using Editor Extension?

PreviousHow to setup Editor Extension?NextHow to setup SDK?

Last updated 1 year ago

to install the Beacon Editor extension.

In the "Domains" field, input the website domain to activate the extension on your site. If you wish to open it in multiple dashboards, include multiple domains separated by commas, as shown in the screenshot below. Alternatively, if you want the extension to open in all tabs, leave the field empty.

Activate the visual editor and click "Save" to make the editor visible.

Enable the "Show Bar Launcher" and "Show Visual Editor Launcher" options to display icons at the bottom right. You can then customize the placement of these icons by dragging them according to your preferences. You can close these launcher icons by clicking on the cancel icon, which becomes visible upon hovering.

Click on these launcher icons to display the editor and bar, or alternatively, use "Command + K" or "CTRL + K" for the bar and "Command + E" or "CTRL + E" for the visual editor.

You also have the option to generate commands through our Chrome extension.

Proceed to the "Actions" section where you can find a list of previously created actions, if any. To generate new commands, click on the "Create New" button located in the top-right corner.

To click on a specific element, utilize the magic tool by selecting and clicking on the desired element. This will automatically populate details such as command name, path, and selector type. The selector type is determined based on priority – if data-beacon-id is present, it takes precedence; if not, it checks for id. If neither data-beacon-id nor id is available, className + xpath will be filled.

Subsequently, you can select "Add Sub Action" if you wish to incorporate multiple actions for the same command.

The extension allows you to include video, link, and click action types.

  • Link Action type : This action type provides options for choosing a static path, dynamic path, or external link.

  • Video Action type : This enables you to incorporate any video link, including links to YouTube videos.

  • Click Action type : In this action type, you can input a static or dynamic path and select a selector type such as className + xpath, id, or data-beacon-id. It is recommended to use the magic tool directly for selecting an element to click, as it automatically populates all the element details.

After navigating to a page using the link or click action type, you can incorporate multiple actions by adding sub-actions. Simply click on the "Add Sub-Action" button and employ the magic tool to select element data.

In sub-action choose your preference, such as "scroll to" for upward scrolling to the selected element, "focus on" to concentrate on the selected element, and "click on" to initiate a click on the selected element. Furthermore, you can remove added sub-actions by clicking on the delete icon.

In the keywords input field, input words that your users commonly use as alternative terms for the command you've created. To add a keyword, type it in and press Enter. You can add multiple keywords in this manner.

Enable GR, CR, or CO as per your specific requirements.

  1. Global Recommendation (GR) : It can be enabled for only 8 commands. These 8 recommended commands will appear at the top of the list of commands in the bar, before a user searches.

  2. Context Recommendation (CR) : It can be enabled for 8 commands in every context. These 8 recommended commands will appear at the top of the list of commands in the bar, before a user searches when invoked in that context/section of the app.

  3. Context Only (CO) : Enabling context only restricts the availability of the command to just the context it is created in. This does not assign any higher priority to the command. It only restricts the command availability.

Following that, you can choose the created rules from the select dropdown. These rules are employed to limit the visibility of your command to specific users or pages, depending on the type of rule you have established. Alternatively, achieve the same outcome by adding metadata as key-value pairs. Click the "Add" button to include multiple metadata key-value pairs, and utilize the delete icon to remove them as needed.

Once you've made all the required modifications, click the "Create" button. You can then make further edits from the list using the edit icon and utilize the delete icon to remove them as needed.

Select the filter icon to sort commands using categories or criteria like GR, CR, CO, or based on the path. To remove the filter, click the filter icon again, and then click on "Clear" followed by the "Apply" button.

Click here