Webitel Flow Diagram
- Olesya Tantsyura
- Olga Chorna
1. Description
A graphical Low-Code editor for creating Flows that can be used for any maintenance scenario.
Note
Minimum screen resolution requirements: 1280x768 or more!
Represented by space to build, as well as:
- Top bar (Fig.1(1));
- Bar of components (Fig.1(2));
- Space for building (Fig.1(3)).
Fig. 1. Webitel Flow Diagram
1.1. Top bar
This bar displays the name of the Flow and also contains the following elements:
- Edit tool (Fig.2);
- Go to start;
- Jsonify to console;
- Save;
- Close.
Fig. 2. Top bar
1.1.1. Edit tool
It is designed to change the name and the tags of the Flow.
Click the button opens the Update name modal window (Fig.3).
Fig. 3. Update name modal window
1.1.2. Go to start
Clicking the Go to start button returns the schematic to where the Start component is in the middle of the space for the build.
1.1.3. Jsonify to console
The Jsonify to console button is designed to display the JSON code that matches the generated flow schema in the console. To view it, you need to open the console.
1.1.4. Save
It is designed to save changes in the flow schema.
Clicking the arrow opens the possibility of selecting the Save as option (Fig.4).
Fig. 4. Save as
When you select Save as the Update name modal window (Fig. 3) opens. You can change the flow scheme's name in this modal window.
The Save failed modal window opens (Fig.5) when the connection with the server disappears during the work in the constructor after clicking on the Save button.
Fig. 5. Save failed modal window
Retry button - repeated attempt to save changes.
Export to JSON button - downloading a JSON file of an unsaved schema.
Close button - closing the modal window.
1.1.5. Close
When there are unsaved changes, the Save button is active, and when you click on the Close button, the Warning modal window opens (Fig.6).
Fig. 6. Warning modal window
The Warning modal window consists of an informational notification and buttons:
- Save - saves changes and closes the editor. The Flow page opens;
- Don't save - does not save changes and closes the editor. The Flow page opens;
- Cancel - cancel closing the editor. The modal window closes. You can continue working in the editor.
1.2. Bar of components
This bar displays a list of components from which you can create flow schemes and a search field. The flow type is displayed at the top of the bar.
The list of displayed components depends on the type of Flow selected when creating it. When you click on the button at the top of the block, it collapses the list of components; the button expands the list of components.
There are such components:
- Answer
- Attempt Result
- Bridge
- Broadcast message
- Calendar
- Callback Queue
- Chat AI
- Chat History
- Classifier
- Conference
- Custom code
- Execute
- Export variables
- Flush DTMF
- Form Datetime Picker
- Form File
- Form Rich Text Editor
- Form Select
- Form Text
- Form Textfield
- Function
- Generate Form
- Generate Link
- Get Email
- Get Queue Agents
- Go to
- Hangup
- HTTP Request
- If
- iFrame
- In-band DTMF
- Join Agent
- Join Queue
- List
- List Add
- Log
- Mark IVR
- Math
- Member info
- Menu
- Mono Pay
- Park
- Patch Members
- Playback
- Pre answer
- Record file
- Record session
- Recv Message
- Ringback
- Ring ready
- Schema
- Script
- Send email
- Send file
- Send message
- Send text
- Send TTS
- Set Grantee
- Set variables
- Sip redirect
- Soft Sleep
- STT
- String
- Switch
- Text-to-Speech
- Trigger
- Update Cid
- Unset variables
- User info
- While
- Notification
There can be only one Start component, and when creating a new Flow, it is located in the space for building. It is the start of the Flow.
Each component has its settings bar.
The setting bar opens on the right side of the page when you click a component block in the space for building.
The list of displayed components depends on the type of Flow selected when creating it!
1.3. Space for building
This is the main workspace for building a Flow.
You can clone or delete the selected block by right-clicking on a component block.
You can change the scale of the constructed flow using the mouse wheel.
In the lower right corner is a mini-map of the scheme with a zoom scale for ease of use. The scale is 50% by default and after clicking on Go to start button.
2. Opportunities
2.1. Add a Component to a Flow
Goal | Add a Component to a Flow |
---|---|
Preconditions | |
Steps |
|
Result | Data saved. The component is added to the Flow. |
3. Additional materials
3.1. Instructions
3.1.1. Flow examples
- Add missed call to outgoing dialer
- Add a Subscriber to the Inbound Task Queue — Email
- Conference (Flow)
- Create an Activity on a missed call in Creatio
- Flow schema fragments
- Forms - Call processing
- Form — Send an email
- Incoming call with additional dialing
- Internal transfer per group
- Outgoing call
- Request a call back from the queue
- Route an incoming call to the responsible agent in Creatio
- Simple IVR menu
- Processing and Reply to Email