Transcription

Back to video

1. Bot Customer

It is the second lesson devoted to building chatbots.

Today we are going to customize a ready-made bot template, analyze its logic, change the design and deploy it on a website.

So, expand the Templates menu and select the Customer template.

Clone the template so that it can be edited.

The Customer bot collects contact information about the site users. Click the RUN BOT button.

After entering the name, the user is prompted to select the preferred communication channel.

If the bot is not waiting for text input from the user, the input field is unavailable, so you can only click a button.

Let's choose a phone.

Note that the user's name entered above is used to customize the bot's message.

Enter an invalid phone number. 123

The bot will prompt you to change it, and if you refuse, it will return to the channel selection screen.

The bot will now try to obtain the user's email as well. Decline the request.

The following message prompts you to change any of the entered data, In case you agree, you are asked to leave a message.

The entered information is available in the plugin's backend in the Data tab.

2. Bot slots

Though the bot's task seems simple, its logic is quite complex. This makes its behavior smarter.

The steps aimed to collect information are located in the Customer folder. Also there are two starting steps, which are the greeting and the change of language, as well as the final step to give thanks.

Click the folder. The steps it contains are displayed within the orange border.

Another click collapses the steps back into a folder.

It is convenient to group large dialog branches in folders. For instance, obtaining customer information is a common task for all sorts of bots. It is available as a ready to use example. All you need is to copy the Customer folder and set up the navigation.

This bot operates the slots which store customer data. Thus its logic depends on the slot values. Let's run the bot again and pay attention to the debug window.

On the left, there is the full list of slots.

The first two, LANGUAGE and INPUT, are system slots: the current language and the input line.

The rest of slots are specific to this bot, and their names reflect their objectives: name, phone, entered message and email address. Note that at the start of the bot, the value of these slots has not yet been set, which is marked with the word null.

Click anywhere on the screen to close the bot and the debug window.

3. Conditional jumps

Generally, it takes only three steps to get a user's name, phone and email. However, when building a smart bot, we have to consider various flow branches.

First, upon clicking the Start button of the BEGIN step, we navigate to the CUSTOMER START step. It is a logical step containing no visual information.

If the folder is used by other bots, data collection can be accessed multiple times from different steps. Obviously, you shouldn't request the customer's phone number, if it is already in the database. However, if the customer hasn't shared his email yet, you may try and ask for it again.

A single “actions” object contains a set of checks.

The first condition checks if the CUSTOMER NAME slot exists. The slot value is obtained by prefixing its name with a dollar sign. If the slot has no value, “goto” provides for the immediate navigation to the CUSTOMER NAME step.

Such navigation interrupts the execution of all actions below. Thus, in case the “if” condition worked, the rest of the conditions won't be processed.

Similar checks are made in other conditional actions. If both phone and email are missing, navigate to the channel selection. If the phone is known, but the email isn't, then request the email, et cetera.

If none of the conditions have worked, then the last action will be performed, that is the “goto” navigation to the BEFORE_CHECK step. Afterwards, the collected data will be displayed to the customer for confirmation.

Let's see how it looks in the debug window.

On the right, it is reported that the button is clicked, entailing the navigation to the CUSTOMER START step.

This step checks if the name is missing. This condition is true, so the “goto” navigation occurs, so the bot jumps to the CUSTOMER NAME step, and waits for the name to be entered.

4. Name and phone verification

Select the CUSTOMER NAME step and click the input field in it. It lists the actions to be performed when a customer enters his name.

It's difficult to check whether the customer has entered a valid name, or has just pressed random keys. A basic check is made here: the name has to contain at least two characters.

To do so, the “len” function is called in the condition, which returns the length of the input string. If this length is less than two, the jump to the CUSTOMER_WRONG_NAME step occurs.

Otherwise, the “else” action is performed. It sets the navigation to the CUSTOMER GREET welcome step. The CUSTOMER NAME slot then stores the contents of the input string that is in the INPUT slot.

Unlike “goto”, the “step” command simply remembers the navigation step. That's why the order of actions in the “else” block is not important.

The last value of the “step” navigation is used when some event occurs: a button is pressed, a text is entered, or a timer triggers.

Note that after the CUSTOMER_GREET welcome step, the bot returns to the CUSTOMER_START step immediately.

That's because CUSTOMER_GREET can also be accessed from the final step, if the customer decides to change the name.

Moreover, the phone number and email may already be stored, so the customer shouldn't navigate to the channel selection step.

Now let's see how the phone is checked in the CUSTOMER PHONE step. The text uses the already known customer's name. To obtain it, the slot name is prefixed with the dollar sign, as usual.

In the actions of the input field, first pay attention to the phone input kind.

In addition to plain text, as it was with the customer name, it is possible to extract various data from the input string: numbers, phone, email, date, time as well as intent, when natural language communication is enabled.

In this case, the selected data type is “phone”.

If the number entered by the customer does not contain enough digits, the INPUT slot will be null. Such a value will make the “if” condition false.

If the phone looks good, the “if” condition triggers. It saves the phone value from the input string into the CUSTOMER_PHONE slot, and then navigates to the final information output chain.

The next “if” action checks if the email is missing. If so, then the navigation step will change to CUSTOMER_EMAIL_MAYBE, prompting the user to enter his email address.

In case the phone number looks invalid, the “else” block is processed, in which the navigation to the CUSTOMER PHONE WRONG step is set.

5. Final steps

Once the customer data has been collected, various situations with the slot values ​​are possible. In the BEFORE_CHECK logical step, they are parsed and “goto” jumps to the relevant step: both the phone and the email are known, only the phone is known, and so on.

Finally, a message is displayed asking the user to verify the entered information. If necessary, the customer can change it.

The arrows from the buttons lead to the corresponding steps for changing the name, phone or email If the customer confirms the entered information, after clicking on the Yes button, the bot navigates to the step asking to leave a feedback about the site.

This feedback is stored in the CUSTOMER_MESSAGE slot.

In the final message named CUSTOMER_END, the first action saves the entered information. There are two storage backends, WordPress and QuData. The QuData storage provides for an unlimited number of records. You will need to register at QuData.com to activate it. For now, let's choose the default WordPress repository that doesn't require registration.

The data is stored as an object consisting of keys - field names and values. In this example, the first “kind” key contains the "customer" string as its value. It can then be used as a filter if various data types are saved from the bot.

Other keys contain data values ​​received from the customer. Note that the object is enclosed in curly brackets, keys and values have a colon between them, and the key-value pairs are separated by commas.

Basically this bot is ready to use. However, you may customize it if needed. For example, change the texts of the start and end messages, add different steps before collecting customer data, etc.

Let's slightly modify it by editing the CUSTOMER_NAME step. It's a good practice to introduce yourself before asking someone's name.

So let's add the text "My name is Qu". Since the bot supports two languages, the Russian translation has to be provided.

If you are not going to support more than one language, just remove the language change button in the start step.

6. Customize the look

Now let's change the bot visuals.

Click the Setup tab.

The first group of icons allows you to change the image of the bot launch button. The same icon will be located in the top left of the bot window.

The second two groups of icons correspond to the bot message avatar and the bot user avatar. They can be disabled or changed.

Next are the texts for the bot window header, the bot name displayed in messages and some optional information about the bot.

The next section allows you to select the size of the bot, and in the “custom” position, to set any width and height of the bot window.

In the right panel, you can set the position within the main browser window where the bot will appear. The numbers below the bar change the distances corresponding to the dotted lines, that is 50 pixels from the right and bottom of the screen.

Next there are predefined styles. Scroll down if they don't suit you.

Hover any interface element to see a tooltip.

You can change the parameters of the bot window shadow, its title general properties of the message box, bot message design, user messages, buttons, the bottom of the bot window, input fields, as well as the design of the start button.

For example, if you prefer to hide the message timestamps, set their font size to zero.

You can change the bot background color or use an image for the purpose.

Since all changes are applied immediately in the bot window, it is easy to explore the effect of the settings.

Let's change the parameters of the start button. Its shadow is the same as that of the entire window. You can change its radius and icon radius, and also add a border around the button.

7. Place the bot on the website

The final step is to implement the bot on your website. Click the Launch tab.

First, let's select the bot we want to activate.

Below is the list of all eligible pages on your site. You can leave the “all” checkbox enabled. In this case the bot will appear on all site pages.

Alternatively, you can select specific pages where the bot should appear.

Then set the timeout before the bot auto-launches after the page loads. It's set in seconds, so let's make 2 seconds for instance. If you want the bot to open only when the visitor clicks the icon, enter a significantly large number in the field.

The last field is optional. It's meant for your identifier, called a token. It can be obtained after registration at QuData.com. This token gives you free access to your bot analytics, and for a small fee you can receive unlimited storage for the bot data.

After setting all these settings, click on the Start button. That's it! Your bot is already on the site! You can stop the running bot with a single click as well.

If the launch settings need changing, first deactivate the bot, modify the settings, and then click the Start button again.

Let's return to the site now. The bot pops up in 2 seconds as intended.

Note that the client browser saves the current bot step and its slots. Click the button in the bot, and navigate to another page.

The bot opens the step it left off at the previous page.

Similarly, the bot remembers that it has been closed. Click the cross and change the page again.

Now the bot will not open until the start button is clicked.

Please, mind that while the bot is tested on the site, you are just another user of the site. If you want to reset its history, you can click the reload button in the window header. However, the bot will still remember it has been closed, so leave it open for further testing. The bot history is also reset in case it is deactivated in the Launch tab, and then reactivated.

Now you know everything you need to create and deploy the bot on your website.

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

We wish you good luck in your work.

Back to video