Transcription

Back to video

1. Menu Panel

Welcome to the QuBot Editor guidelines from QuData. In this video, you will learn how to create a bot.

Let's assume you have already downloaded and activated the plugin. In the WordPress tabs, click the icon featuring the letters Q and D.

Now, proceed to the Editor tab.

Read through the introductory info, and tick the checkbox in the bottom right. Click the cross or anywhere on the screen to close the popup. It will not be shown again.

However, you can always turn it back on in the Help menu. By the way, the first item of the Help menu launches the assistant to guide you through the Editor.

Let's go through the rest of the menu panel.

> My Bots contains a list of bots you are working on.

> Edit Bot lets you create new bots, clone (i.e. copy) the existing ones, rename and delete them. You can also export and import bot files.

> Edit Step allows you to manage bot messages which are called cards.

> Next two menus on the panel display a collection of available bots.

Templates contain a set of ready-to-use bots for different purposes. All you need to do is to edit texts and images.

Small bots listed in Examples illustrate various QuBot functions. Extensive commentary will help you figure out how to use them.

> View allows you to switch between two modes to arrange bot messages and logic.

2. Bot Lists

Now let's go through the basic steps for creating a bot.

Click the Examples menu and select the bot named Lists.

You can run it immediately by clicking the Run button. A debug window will open along with the bot. It helps to track possible errors in the bot logic.

This bot illustrates a basic store which only sells 4 types of products. A user selects a product, such as wine, and then specifies the amount.

These steps can be repeated limitlessly.

Let's order 3 more slabs of cheese.

Now let’s add few more bottles of wine, but this time by typing the quantity.

If the entered string is not a number, the bot will point to it and ask you to enter it again.

Now you can check the cart and the total order amount.

You can remove any product, if you wish.

3. List Editor

In this example, let's see how to edit bot steps. First, you have to make a bot copy. Click Edit Bot on the menu panel, select Clone and enter a name for the new bot.

It is now listed in the My Bots menu, while the name is displayed next to the RUN BOT button.

As you can see, the bot has 8 steps.

There are two modes to arrange steps. Use the View menu to switch between them.

By default, steps are arranged in a grid. In the Free mode, cards can be placed randomly. Hover the top of a card, then drag and drop it to replace it.

Likewise, in the Grid mode, you can drag and replace separate cards, and even move lines of cards.

The Grid mode is best suited for bots with complex navigation between the steps. The Free mode proves handier for linear or tree-like dialog structures.

The cards show message previews with buttons, images and the input field.

When you click on a step card, it changes its color to pink. The card content is displayed in the editor window on the left. Blue arrows aim the cards which you may navigate to from the current step. These cards are also colored blue.

If an arrow goes from a button, then navigation happens on the button click. If an arrow goes from the input field, then navigation happens after entering text. Finally, an arrow may go from the bottom of the card, which means the navigation is set in the actions.

Green dots show the steps leading to the selected card.

To create a new step card, you need to click on the plus sign on the right side of its border. In the Grid mode, you can also click the plus icon on the left of the grid. In that case a card will be created in a new line.

The cross in the top right deletes the step.

4. Step Editor

Let's try to modify the bot. The initial step features the “start” mark in the top right. The card also has a bold border.

Let's edit the starting step by starting a dialog with a greeting.

Create a new step card by clicking the plus icon.

Switch off the hints in the Help menu in order not to distract you.

A text and a button appears in the editor of the created step. First, let's rename the step. It’s optional, but makes sense to give the steps meaningful names.

Now tick the checkbox in the top right of the editor. This will redefine the starting step.

Let's type a greeting in the text field. Similarly, add the button text.

If you run the bot and click the button, the bot will repeat the current step, since you haven’t defined where to navigate next in this case.

So, let's fix this.

Click the button. Below you will see the actions performed when a user clicks this button. The “step” property indicates the step to navigate to.

Click the field, and then click the MAIN card. Now a blue arrow connects them.

Let's run the bot and make sure it works properly.

5. Multilingual interface

You can create multilingual dialogs in the editor. Even if you are not going to localize your bot, this part of the video might come in handy.

By default, the bot launches in English. The language code is displayed in the top right of the card editor.

Click it now to open a drop-down list of the most common languages for WordPress. It's okay, if your language is not on the list. For our purposes, you can choose any other language now.

Let's select Russian as an alternate language. When you change the language, all the texts will turn gray, so that you can enter the translations in the corresponding fields.

Change the greeting message.

And then update the button text

Notice that the texts in other steps are gone.

That’s because the sample bot was created in English, and the rest of the cards don’t have Russian translations.

Language switching changes both the texts in the step editor, and the texts of other cards.

If the default language is not specified, then the bot will start in the first one, i.e. English.

There are several ways to change the default language.

First, let's change this item in the Help menu.

Now, the language set in the step editor will be activated at the bot launch. This option applies until the page is reloaded.

Let's set the Russian language and run the bot. Now change it back to English, and click the RUN BOT button again.

Another option of the Help menu changes the bot performance in a similar way.

When it’s set to “active”, the bot will run from the step which is being edited instead of the starting one.

For example, let's click on the card of the MAIN step, and then the RUN BOT button. Now it will be the first to launch, though it's not a starting step.

This method of modifying the UI language and the starting step are used for debugging only. The language settings of the bot live on your site are configured differently.

6. Actions and Slots

Let's go back to the starting step. Open the popup next to the text, click the plus icon, and select “actions” from the drop-down.

Now press the dots to grab the item, drag it up and drop to make it the first object in the editor.

Let's click the “actions” (marked with a rocket), and look down the editor window. There are many actions which meet different purposes.

We need to set a slot.

A slot is a variable that has a name and a value. You can use any alphanumeric characters and the underscore for the name. However, it has to begin with a letter.

As for slot values, these can be strings, numbers, lists, and objects.

There are several predefined slots. In simple cases, you will use the LANGUAGE slot (the current language), and INPUT, which is the text entered by a user.

The default language is English. Suppose we want to change it to Russian.

Select LANGUAGE in the list of slot names, and type "ru" in quotes as the value, since this is a string.

Let's reset the debug settings in the Help menu.

In the step editor, set the language to English, and run the bot.

You can see the greeting in Russian.

The bot goes from top to bottom when processing a step. Thus, it will first change the language settings, and then display the text in the current language.

7. Change language

Now let's change the language while the bot is running. First let’s create a relevant step for the purpose.

To make it quicker, open the Edit Step menu and click the last item.

As you can see, you may place several buttons in a row.

Click the plus icon to create a button, or the minus to delete it. Use arrows to swap the buttons.

To remove an entire line, click the trash icon in the menu on the left.

Let's remove extra languages, and only leave English and Russian.

Click the language buttons, and pay attention to the values set in the item properties.

Now let’s make the bot return to the starting step no matter whatever button is clicked.

Again, this can be defined in the actions for each button.

However, since the buttons have the same destination step, in this card the step is set in actions once at the beginning.

Thus, if the destination step is not set for a button, the bot will use the last specified step. In this case, it is the step set in the actions.

Let's make it navigate to the WELCOME step instead.

Now add a button to let users change the preferred language.

Don't forget to set the navigation to the LANGUAGE step.

Let's check what happens.

As you can see, it didn’t work, and the bot continues the dialog in Russian.

Let's analyze the bot logic, and figure out what went wrong.

First take a closer look at the debug window.

On the left, you can see the slot values, while on the right are the values of actions performed by the bot.

When you press the button, the language changes, i.e. it changes the value ??of the LANGUAGE slot. However, when you navigate to the WELCOME step, the performed actions change it back to Russian.

8. “goto” navigation

Let's fix the issue. Create the INIT step, and make it the starting one.

Now copy the actions in the WELCOME step, and delete the item from the card.

Paste the actions to the INIT step, and delete all the visible objects.

Now let's add a “goto” action, and set the navigation to the WELCOME step.

Unlike “step”, “goto” provides for instant navigation. That means, when the bot is processing a step and gets to “goto”, it navigates to the specified step immediately, without waiting for button or input string events.

So, INIT appears a logical step, aimed to initialize the needed slots. Then the bot immediately proceeds to the next step, which is WELCOME.

Let's check it out.

Now everything works as intended.

We hope this short intro to the QuBot editor will help you further create neat and functional bots for your website.

If you have any questions, you can ask them on the forum page of the plugin, or contact the QuData specialists directly.

Be creative, and good luck!

Back to video