There are two features you can use to edit a step content or behaviour: inline editing and step editor.
Inline editing (from 20.1)
This is the most simple and fastest method to edit a step.
When you are playing a journey, just click on the current step title (or body content, if present), to start editing it. Also, just after you have created a step, you'll be automatically able to inline edit it.
While inline editing, you can:
- Change the text inside the step title
- Change the text inside the step body (only if already present, like in the image above)
- Change the step transition method (click on the right part of the black bar,
in the case above) - Change the step position relative to the page element it is anchored to (drag the bubble while pressing the
button) - Open the step editor (click on the left
button on the black bar)
Changes are automatically applied, so once you have finished editing, you can stop the journey or simply keep following it.
Step editor
Step 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 step, as well as what action will take the end user to the next Step in the Journey and some additional options.
- Visibility tab - from here, you can set up visibility rules for skippable steps.
- Action tab - from here, you can set up step actions.
- URL tab - from here, you can change or delete the step URL. You could need to delete it with very dynamic URLs or Cross-application Journeys. Also, sharing the step URL will allow people to access the Step 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 step to.
In this article, we'll focus on the Content tab and its features.
Content editor
In the upper section of the step editor, you can modify:
- The step title
- The step position relative to the element it is anchored to (shown in the image below)
- The step body text. With the editor, you can customize the text format using the tools in the bar shown below. The highlighted element shows the button for placing Journey Links.
Transition section
The step transition enables you to specify what needs to happen in order for the end user to go to the next Step of the Journey. These are the possible transitions:
-
Click - When a Step is associated with a link or a button, this option moves the Journey to the next Step when the end user clicks on the element.
-
Button click - This option causes a button labeled Next to appear in the Step bubble. The user needs to click on the button to move to the next Step.
-
Edit input - To be used for input fields (e.g. the username or password field) or text boxes. The Journey displays the next Step when the end user types into the input field or text box.
-
Value change - To be used for dropdown menus. When a value is selected from the list, the Journey moves to the next Step. This option can also be used for input fields when the user would like the condition to be true before the input is typed in.
-
Hover - The Journey moves to the next Step when the end user hovers the mouse pointer over the selected page element.
-
Multiple - The current Step should appear together with the following one, and the engagement method used in this case will be the one selected on the next Step.
-
Timing - The Journey moves onto the next Step after a specified amount of time, defined by the "Delay" field.
-
URL Change - The Journey moves onto the next Step when the URL changes. This also includes in-page anchors preceded by #. For example, the transition will occur if the URL changes from .../index.php/ to .../index.php/#signup.
In the transition section you can also define:
- Delay - Here you can choose to delay the transition after it has been triggered. Except for Button click and URL change, it can be set for every transition method.
- Extra wait time - It defines how many seconds Newired will wait before stopping the Journey if the page element associated with the step is not found on the page.
You can use this, for example, if the element concerned appears only after a user is required to perform an action which takes long.
Step properties
This section lets you set the following parameters:
- Size - defines the width of the step bubble. You can also turn on Auto Width to let Newired set the width according to the step content length
- Spotlight - this option darkens the screen with the exception of the selected element, thereby highlighting that element, as soon as the user arrives at the given step. Moreover, the darkened area won't be clickable. You can use it, for example, to direct the attention of your end users to a specific function or area.
- Animation - if this option is selected, the step bubble "bounces" a few times to call the user's attention when they arrive at the step.
- Step is skippable - if enabled, the end user can optionally skip the Step. If disabled, the user cannot skip it. The option comes disabled by default. Check this article to know more about skippable Steps.
- Allow Step feedback: if enabled, end users will be able to provide feedback about that specific step, even if feedback collection for the Journey is disabled. The option comes disabled by default.