Adding commands
As you have added a new category, we can now move on to adding commands. Click on New Command. This will add a new command that will be presented to the user in Magny popup if conditions apply.
Before going further with commands, here is a what you need to know about search items, commands and actions:
- Search item: All text entered when a search is done by the user, visible in the search bar. This area takes default focus when an end user initializes the Magny popup.
- Command: Corresponding visible command (which is selected by the user via navigation keys or mouse). Examples can be Configure account, Go to teams or View Analytics
- Action: When a command is selected, the action to be run (e.g go to an internal link, add a JavaScript code, simulate a click etc).
Each command corresponds to an action where each action can be the following:
- 1.Callback: A javascript method to run.
- 2.Link: To a page or an external URL. You can also select whether to open the link in the same tab, new tab or via a router method.
- 3.Webhook: A post to a provided API endpoint.
Once the admin configures all commands, the widget can be set either in draft or live mode from the Projects menu.
In draft mode, admin will be able to see the popup on the dashboard, but it won’t be live anywhere.
In active mode, the Magny popup will be visible on your application.
Adding a command to Magny is straightforward. Here we'll explain this step by step.
First, go to Projects page. Here, you'll see current projects list. You can add as many projects as you want, and each project corresponds a group of categories and commands shown on a dashboard.
You should have created a default project previously as you created your account. You can use this one, or add another project to your liking.
Under Projects, you can do the following:
- Add, remove or rename a category, which holds unlimited number of commands. Each category is visible in Magny popup.
- Add or edit a new command where each command can be run by the end user. A command may or may not belong to a category. You can also click on New command --> Quick command to add a command quickly, and edit later. This is especially useful when you want to test how a command looks like in test mode.
For the purpose of this document, we are going to add 3 different command types (e.g actions) one by one, and each requires a set of common steps.
Now go ahead and click on New command. You'll see 3 sections:
- Basics
- Icons & infobox
- Actions & options
Under this section, there are a few options to set up when a command is run. Some of those options are mandatory (e.g Title), however most of them can stay unchanged.
- Title: This is the visible title for your command, when it matches a search (more on search keywords below). Hence, a title will be visible once it appears on the Magny popup.
- Description: This information is located right under the title. It helps user understand what this command does, in a longer form.
- Always show?: If this option is enabled, corresponding command will always be visible in Magny popup, regardless the search keyword.
- Visibility: When the command is run, you can decide whether to keep the popup open or not. When clicked, popup is closed and this is the default behaviour.
- Recommended: If it is enabled, the command title will be visible under “Recommended”, a special category for users. Enable this if you want this command to be highly visible.
- Synonyms: Enter keywords here if you would like this command to be visible when user searches for it. For example, user may want to go to Teams if “teams” or “groups” keyword is searched. By default, you don't have to add words that is contained in the title.
- Category: Choose a category for this command. Each category should be created before it is visible in this list, using "New Category" button on the same page. A command may or may not belong to a category.
This section helps you add icons and additional information related to a command. None of the options here are required for a command palette, but highly recommended.
- Icon: The selected icon will be visible next to the command title on the Magny popup. It greatly enhances the user experience, so try to stick with a relevant icon.
- Icon color: Define icon color here both for light theme or dark theme. Those colors will override the default color you define under the Settings option for each project. If you do not define a color, the default icon color will be used under Settings.
- Infobox: This section helps users to easily understand what the command’s group is, or you can also identify the shortcut so your users would know which shortcut to use. Anything you write here is visible on the right hand side of the command within the popup.
This is the most important part of creating a command. You will define an action here, which will also reveal how a command works. Currently there are 3 different actions types, and each correspond to a different behavior of the user interface.
- Callback: A callback is a JavaScript (JQuery) function which will be run upon running the command. More on this option in this document.
- Link: A link is a direct link (relative or absolute) that user visits when the command runs. More on this option in this document.
- Webhook: When a command is activated, you can also set a webhook to run as well. More on this option in this document.
Last modified 1mo ago