There are two features you can use to edit a tip content or behaviour: inline editing and step editor.
Inline editing (from 20.1)
This is the most simple and fast method to edit a tip.
When you are viewing a tip, just click on its title (or body content, if present), to start editing it. Also, just after you have created a tip, you'll be automatically able to inline edit it.
While inline editing, you can:
- Change the text inside the tip title
- Change the text inside the tip body (only if already present, like in the image above)
- Change the tip position relative to the page element it is anchored to (or relative to the tip icon, if enabled). To do it, drag the bubble while pressing the
button - Open the step editor (click on the left
button on the black bar)
Changes are automatically applied.
Step editor
Tip editor can be opened from both the inline editing feature or the editor sidebar, as shown below.
Tabs, selector precision and element selector
As shown in the image below, the upper section of the step editor is composed of:
- Content tab - from here, you can define the textual content of the tip and some additional options.
- Icon tab - from here, you can customize the tip icon.
- Visibility tab - from here, you can set up visibility rules for skippable steps.
- URL tab - from here, you can change or delete the tip URL. You could need to delete it with very dynamic URLs or Cross-application Journeys. Also, sharing the tip URL will allow people to
- access the tip directly. It can be useful for customer service and support situations.
- Selector precision - With this button, you can access the selector precision.
- Element selector - This button will enable the element selector. It is present here in case you want to redefine the element you will attach the current tip to.
In this article, we'll focus on the Content tab and its features.
Content editor
In the upper section of the tip editor, you can modify:
- The tip title
- The tip position relative to the element it is anchored to (corresponding to the tip icon, if enabled)
- The icon toggle. Click on it to show/hide an icon that users will need to hover over in order to see the tip
- The tip icon position relative to the element the tip is anchored to
- The icon position offset. The offset direction is defined by the icon position (e.g. top position -> offset to the top; bottom position -> offset to the bottom). Both positive and negative values are allowed.
- The tip icon's "in page" check. If enabled, the icon moves from the overlay layer to the application layer, therefore it could change the page layout and some elements positions. By enabling this, the offset field gets disabled. In the images below, you can see an icon with "in page" enabled (left image) and disabled (right image).
- The tip body text. You can customize the text format using the tools in the bar shown below. The highlighted element shows the button for placing Journey Links.
Tags
Here you can add tags to the tip.
Tip properties
Here you can set the following parameters:
- Size - defines the width of the tip bubble. With Auto width enabled, the size will be generated according to the size of the content defined for this tip
- Z-elevation - defines the depth of the tip.