1. Description
The component generates a navigation menu, storing the selection in a variable.
This component is present in flow types like:
-
Chat.
The block (Fig. 1.(1)) is used in space to build the Flow. The settings panel for this component opens (Fig. 1.(2)) when you click on the block.
1.1. Menu block
The block consists of the following elements:
-
The name of the component;
-
In branch — receiving (connecting with the previous block) branch;
-
Out branch — outgoing (connecting with the following block) branch. When hovering over the Out field, a switch appears. The switch allows this component to be connected to a component that already has a connection.
The presence of an
Changing the switch position removes the outgoing branch of this component.
The
1.2. Menu settings panel
It consists of the following elements (Fig. 2):
1.2.1. Text
Here, enters the text that will be displayed along with the navigation menu.
1.2.2. “Kind” Field
An optional field used to define the type of message sent together with the menu, so that the interface can display it in a different style.
Only the following characters are allowed in this field:
-
Latin letters
-
Digits
-
Underscore
Format: /[a-zA-Z0-9_]/g
This field can be used, for example, for service or system messages (such as system).
1.2.3. Set
Here enters the variable's name in which the result of the subscriber's selection is written.
The field is automatically populated with ${onClick.Menu} value.
1.2.4. Type
Here, chooses the type of button placement. There are such options:
-
message — buttons are displayed in the message;
-
chat — buttons are displayed under the chat;
-
clear — no buttons.
1.2.5. Rows of buttons
It is designed to create rows of buttons in the navigation menu.
The No input switch becomes available when at least one row is present.
Only for portals!
1.2.6. Add row button
When you click on the Add row button, the following options are displayed (Fig. 3):
-
Button;
-
Add button;
-
Delete row.
1.2.6.1. Button
It is designed to create a button. Consists of:
-
Remove button;
-
Type;
-
Text.
1.2.6.1.1. Remove button
It is intended for removing the button. Clicking the
1.2.6.1.2. Type
The button type.
For the message button placement type, the following options are available:
-
reply;
-
url.
For the chat button placement type, the following options are available:
-
postback;
-
contact;
-
email;
-
location.
1.2.6.1.3. Text
The name of the button that is displayed in the messenger.
You can create branches along which the Flow scheme will pass, according to the selected button, by using the Switch component.
To do this, in the Cases field of the Switch component, you have to enter the button code created in the Menu component. In the Variable field of the Switch component — a variable whose name is entered in the Set field of the Menu component.
1.2.6.2. Add button
When this button is clicked, the Button element is added to the row to which the Add button button belongs.
1.2.6.3. Delete row
Clicking this button removes the row and all buttons from that row.
1.2.7. Break
Responsible for the completion of the flow execution.
-
— initiates the end of the flow execution after the given component.
-
— the switch is in the off position.
1.2.8. Limit
It is intended to determine the maximum number of passes through this component.
The failover branch appears in the edited component when the limit is set
The failover branch will be used if more passes are passed through the component than entered in the Max field.
Clicking on the Add Limit button adds a Max field and a Delete limit button.
The number of possible passes is indicated in the Max field.
Clicking on the Delete limit button removes the limit and returns the Add limit button.
Fig. 4. Setting a limit
1.2.9. Add description
When you click the Add description button, a Description field and a Delete description button will be added.
The Description field is used to add comments to the component.
Clicking the Delete description button removes the description field and brings back the Add description button.
Fig. 5. Add description