1. GETTING STARTED
In order to create and edit Tips, you need to use both Newired Editor and Newired Portal. For the editor to communicate with the portal, you also need to be connected to the internet or some internal server.
Start the Editor via Portal, first selecting the Site which you would like to add Tips to or you can log in from the editor:
After inserting your server and login details, you will be asked to choose which site you would like to work on:
2. CREATING TIPS
To create a new Tip, first select the target website on the portal or editor. If you start from the portal, click on “Open Editor”.
Once the editor is open, you will see two different Tabs on the right hand side of the screen. The green one with the dialog box is the one for creating Journeys. To create a new Tip, click on the purple tab with a little rocket.
After that, click on the plus sign.
You will see your target website open on the editor. If you hover the mouse on that area, you will see that it selects whole elements with a red or green square, called selectors (see item 3 below). That is because Tips need to be associated with a given element on a page.
To create a Tip, click on the target element. A dialog box will open:
You can define its size by clicking in the lower right corner:
3. RELIABILITY OF PAGE ELEMENTS AND SELECTOR PRECISION
The site elements which Tips will be related to receive a reliability score from Newired. This score shows how likely the element is to be found at runtime, granting a timely appearance of the Tip on the user’s screen during navigation.
The reliability score of an element changes according to the color and the number of dots shown, which can be from 1 to 5 dots. The more solid dots appear, the more reliable the element. Red stands for a generally low reliability, whereas green means high reliability.
On the screenshot below, you can see two elements which have been scored in the Editor as examples:
You should aim to write Tips attached to highly reliable elements, to prevent failed Tip executions - although low-scoring elements do not necessarily mean that the Tip execution will fail, as a timely execution depends on many factors.
If you decide to attach a Tip to a low-scoring element, make sure to test the Tip by performing relevant runtime tests.
TIP: Every web page consists of many elements, which are either visible or hidden. This may affect the selector behavior and movement. If you have problems selecting the precise element you would like to, try using the Selector Precision tool (Ctrl + Alt + mouse wheel), explained below, or approach the element from a different direction.
4. TITLE
On the upper side of the dialog box, you will see a title field. You can edit it to name your Tip. The option comes as “New Tip” by default, and will remain like this if you do not change it.
5. CONTENT BOX
Write the content of your Tip here. In this field, you can also add links or pictures.
6. POSITION
By clicking on one of the four options, you can choose where the Tip will appear in relation to the element it refers to.
7. ICON
In the upper right corner, you will see a button called Icon. You can select or unselect this option when creating a Tip.
If you select it, an icon with a small question mark will appear on the element selected on the tar- get website. By default, it looks like this, on a smaller scale:
However, you can customize the icon. Check the article "Customizing Tip Icons" for more information.
This icon may help attract the user’s attention to that element, making them hover the mouse on that element and read the Tip.
If you leave the option unchecked, the end user will come across the Tip anyway when hovering the mouse around the element the Tip is attached to.
- Offset
When you enable the Tip Icon, you can define how close the Icon will appear to the end user on the target website/ application. In the example below, the offset is 3, so the Tip is shown very close to the element it is related to (in this case, the Login button):
In this other example, the Offset has been set to 33, so the Tip is shown much further away from the Login bar if compared to the previous example:
The Offset value can vary from -99 to 99. The higher the value, the further the icon and the Tip will appear from the element they relate to.
From release 19.2, we also have the possibility of defining a negative value for the offset.
The offset can thus be either positive or negative. If positive, it moves the icon in the direction of the established for the anchor, as seen in blue (right, left, up, down). If negative, the offset moves to the opposite direction established in the blue rectangle.
In this first case, the Tip icon (red square) is anchored to the top (blue square) of the element (black square). The offset (green square) is positive and moves the icon upwards (red square):
In the second case, the offset (green square) is negative, so the icon is moved downwards (which is the opposite direction of the current anchor):
In the following example, the offset are the same as in the previous one (15 in the first image, -15 in the second), but the anchor is on the bottom (instead of the top). So a positive offset means a downwards movement, while a negative one results in an upwards movement.
- In Page
This is another feature related to the Tip Icon.
If you would like the Tip icon to appear in a centralized default position in relation to the element selected, check this option. Note that checking this option will deactivate the Offset function. By unchecking the “In Page” option and not defining any Offset value, the icon will be placed as an overlay on the same level as the Tip bubble, without interfering with the underlying elements.
In our example, the result will be:
8. TIP SIZES
As with Journey modal steps, you can choose the size of your Tip here:
You can choose pre-defined small, medium, large or extra-large sizes or even personalize the Tip size by writing the size in pixels.
If you select the "Auto width" option to the right, the Tip size will be generated according to the size of the content defined for this Tip.