Skip to content

What Are Actions?ΒΆ

Actions are essential in VisualMaker, they allow you to execute a series of instructions when a button is clicked or a command is sent.

Actions enable you to add cool functionalities to your bot. For example, you could make it so only people who have joined certain channels can use your bot, or you could increase and decrease the balance.

How to access actions?ΒΆ

First, before adding an action to the button or command, you need to select the button or command itself. To do this, enter the editor mode by clicking on πŸ›  Edit, and select the button or command to which you want to add actions.

In the menu that appears, click on Actions 🌟, and you'll enter the action creation menu for that button or command.

Inside, you'll see 2 buttons: 🎯 New action and New separator πŸ“. The first one is for adding an action, and the second one adds a separator, which will be explained in detail below. But first, let's understand how actions work.

How do actions work?ΒΆ

Actions are executed in order, one after another, from top to bottom. Each action is only executed after the previous one has finished.

Order of actions in VisualMaker

If a button or command has a normal message or buttons, they won't show until all the actions for that button or command have been completed.

Actions must first be added with 🎯 New action, then configured by clicking on Configure πŸ› , and finally activated with βœ… Activate.

Adding actions in VisualMaker

As you may have noticed, the 🎯 New action and New separator πŸ“ buttons appear both in the normal keyboard and below the actions:

  • Those in the normal keyboard add actions and separators at the end of all actions.
  • Those below the actions add actions and separators just below that action.

All actions show informative text:

  • Action ID: It's the ID of the action, used for identification. It also allows you to execute the action from other actions or obtain the data it returns to use in other actions.
  • Type: The type of action.
  • Preview: A small preview of what the action does.
  • Comment: A comment for yourself; it only appears if you have added a comment to the action.

You can move actions up with ⬆️ or down with ⬇️, copy them with πŸ“„, or move them with βœ‚οΈ, within the same button or command, and delete them with ❌. You can also add a comment to each action with πŸ’¬, a small note for yourself. It's recommended to add a comment to understand what the action does in the future.

What are action IDs?ΒΆ

Just like everyone has a name, each action has an ID, and just as you call people by their names, you'll call actions by their IDs.

Action IDs have a format similar to #123AB#, composed of 5 random characters of letters and numbers that will always be between #.

Identifying actions in VisualMaker

Just as people only know your name in your house, not throughout your town, in actions, IDs will only be known within the button where they were created. You can't call an ID from button A from button B.

Most actions, after being executed, will return data that you can use in other actions. This data is accessible through their ID.

It's like when you ask someone to buy something for you at the market, when they come back, you call them by their name and ask them to give you what you asked them to buy, and then you use it as you wish. That's exactly how it works with actions.

Example: Suppose you have a button called "Ask name," with the following actions:

Example actions in VisualMaker

  1. The first action, with ID #DUdOz#, is of type Send message, it will send the message "What's your name?" to the user.
  2. The second action, with ID #zbLxt#, is of type Wait for answer, this action will make the bot wait for the user to respond. It can be anything, like a message or a photo. When the user sends something to the bot, the action will store it inside, so you can use it later in other actions.
  3. Finally, the third action, with ID #BYxS9# and of type Send message, will return to the user the text they sent themselves, in this case their name, but adding "Hello" in front, to make it a greeting. To return their own name to the user, you access the content of the Wait for answer action through its ID #zbLxt#, but adding .text after the ID, and everything inside {}, that is, an expression, so it would be like this: {#zbLxt.text#}. It's like saying: "from the action with ID #zbLxt#, give me the text it contains."

    Common error:

    • ❌ {#zbLxt#.text#} (wrong)
    • βœ… {#zbLxt.text#} (right)

In this video, you can see what the button does:

You'll use this a lot since you'll likely need your bot to wait for the user to send something, so it's very important to learn it well before continuing to read.

Exercise to practice

Create a button called "My profile" that, when clicked, asks the user the following, in 3 separate messages:

  • What's your name?
  • How old are you?
  • What is your country of residence?

At the end, send a message to the user showing the data they sent in a sigle message, like the following:

Your name is ..., your age is ..., and your country is ...

Something else you'll probably use a lot is the functionality to change the balance and other variables for users.

To watch an example video of how to create a button that increases a user's balance by 1 each time it's pressed, click here.

What are separators?ΒΆ

Actions work like blocks, and you can separate and isolate them with separators.

The first block of actions will always be executed when the button or command is clicked, the rest of the actions from other blocks can only be executed if one of their actions is directly called by its ID, let's say they are actions on the bench, which are only called when needed.

Look at the following image:

VisualMaker separators

  • The first block is marked in green, these are the actions that will be executed when the button is clicked, unless directly canceled.
  • Next is the separator, in yellow color, identified by being composed of 2 horizontal lines, they don't have an ID or any information like actions do, although you can add a comment to them, it's recommended to do so to explain what the block below does.
  • Then comes the second block of actions, in red color, in this case there's only one action, this action won't be executed unless it's directly called.

Let's see a practical example: a "Withdraw" button

Withdraw button in VisualMaker

  1. The first action, with ID #KtY8R#, is of type Condition, let's see step by step what it does:

    • πŸ” expression to evaluate: {balance > 0}, it's like saying: "if the user's balance is greater than 0..."

      Information

      Check out the comparison operators here.

    • 🟒 if the expression is true: "...continue with the actions that follow from that block"

    • πŸ›‘ if the expression is false: "...execute the action with ID #DHDhI# and stop (it has jumped to another block, it won't execute the actions that come after ID #DHDhI#, if there are any, as we told it to stop)"
  2. The second action, with ID #4ykDm#, will only be executed if the expression is true, that is, if the balance is greater than 0. It's an action of type Send payment, which allows making a payment using cryptocurrencies, through the crypto network, or through the VisualMaker wallet without fees.

  3. The third action, with ID #9Fdrw#, is of type Save to variable, what it does is, once the payment to the user is made, their balance is set to the value 0.
  4. Then comes a separator, and lastly, there's an action of Send message, with ID #DHDhI#, this action is in another block and will ONLY be executed if it's directly called by the condition in point 1, what it will do is send a message to the user saying: "❌ Insufficient balance."

This way, you can group actions into blocks, which will be executed one after the other until reaching the separator, while the actions in the blocks after the separator or the separators themselves, will be on standby to be called only if necessary.

I recommend you to understand well the concept of actions and master the Condition action since it's the main action to create dynamic bots.

Once you master actions, you'll have mastered more than 80% of VisualMaker.

Exercise to practice

Create a button called "Administration" that, when clicked, asks the user for a password:

  • If the password is password123, send the message "Welcome to the bot administration."
  • If the password is anything else, send the message "You are not allowed to use this bot."

P.S: Never use a password like that!