Tutorial 102

In this tutorial, we will guide you through the step by step construction of a form. After that, you will be able to deploy your first qualification chatbot in no time!

First you need to create a Bot on the platform with the Clustaar webchat, to understand the basics please refer to this tutorial: Tutorial 101 : Create a Chatbot

Right, you created your first chatbot by following Tutorial 101 now you want to see how a chatbot can really add value to your website. 🙂

Use Case

Let’s say you have a SaaS product and you want a chatbot to qualify the futur customers on your website. 

What do we need ? 

A – Create The Form

  • Company name
  • The Company Sector
  • Job title of the customer
  • Maybe he wants to leave a message ? 
  • Email address
  • Send all this info to your beloved sale’s team ([email protected] “wink wink” 👀 )

B – Integrate the chatbot

  • Create a Welcome Story
  • Integrate the chatbot

Okay, let’s start! 🧐

A – Create The Form

Create the story:

By now you should already know how to create a story if you completed Tutorial 101. Here we are calling it “Customer Qualification Form“. 

Create an intent for your story:

What is an intent?

Create a second intent with the email entity, you will need it for later. 

Click on the “@” and choose “email

Built-in entities

Well done! Now we can start building the story.

1 – Step Company Name

Enter your story and start by modifying the First Step.

Click on the “First step” step.

Rename the step and add the text that you wish with a “Text” action. Then click on “Set reaction…”  to add a condition and create the following step.

Set up the “If case” with “User response”  “Is set“.Click on the “Links to” case and on “+Create a new step.
Name the step.
Click on “Save

2 – Step Company Sector

Now click on your new step. We called it “Company Sector“.

Here we are going to ask our future customer what is his business sector, for this question we are going to use buttons with the “Replies” action.

But first, we have to set a session value for the previous step. Remember, we asked our customer for the name of his company, and we want to remember this information wo we can send it to our sales team.

Use the Session Value action of the bot builder.

Set up the Session Value like this :

Key: company
Value: {{@message}}

The key is the name of the variable that you can re-use and the value is the information you want to retain. {{@message}} saves the last message of the user.

Now, on to the next part of the step. We created 5 buttons by clicking on +add a quick reply.
On the first button we created a new step called “Job title

We want to keep this information so we are going to set up a Session Value in each button.
Discover “Sessions”

Click on “Save Custom Variable….

Variable : sector
Button Value : Healthcare/Retail/Education/Finance/Others

Link each button to the same next step (Job title)

Save your step.

3 – Step Job title

Click on the Job Title step you just created.

Now you can ask the job title of your customer :

Click on “Set reaction to…
Set up your conditions on “user response” “is set” (IF) and create a new step by clicking on the “Links to” case.
We called the step “Number of employees

Click on Save.

4 – Step Message 

Click on the Message step you just created 

Here we are going to ask the user why he is interested in our product:

Click on “Set reaction to…
Set up your conditions on “User response” “is set” (IF) and create a new step by clicking on the “Links to” case.
We called the step “Email

Click on “Back

Set up the Session Value like this:

Key : jobtitle
Value : {{@message}}

Click on “Save

5 – Step Email

Click on the Email step you just created 

Click on “Set reaction to…
Set up your conditions on “User response” “Matches intent” (IF) and click on the “Select intent” case.
Choose “Email“, it’s the intent we created at the beginning, remember? 😉

Create a new step by clicking on the “Links to” case.
We called the step “Send information“.
Click on “add a fallback message“.

Here we are going to create a Fallback message in case the customer didn’t write his email properly. What is a fallback

Write a text to notify the error and set how many times you want the fallback message to be seen by the user.

Click on “Back

Set up the Session Value like this :

Key: message
Value: {{@message}}

Click on “Save“.

6 – Step Sending the information 

Click on the “Send Information” step you just created 

At this stage, you can thank the user for the information he gave you. That’s common courtesy. 😊

Now we have to send all this information to the user, for this we are going to use the email bloc:

Right, so now i hope you noted all the Session Values you created 😉 

Send to: the email address you want the information to be sent to
make it clear for the receiver
Here you have to display all the Session values you retained

Session Values
Company name: {{@session.company}}
Company sector: {{@session.sector}}
Job Title: {{@session.jobtitle}}
Message: {{@session.message}}
Email: {{@session.email}}

If you complete the form in the webchat this is what it looks like:

And here is the email you should receive:

B – Integrate The Chatbot

1 – Create a Welcome Story

Now that you created the Chatbot maybe you can create a Welcome Story to greet the user of your chatbot!
The welcome story is the story that the Bot will launch when you open the webchat. 

Here we called the scenario “Welcome Story

Now click on “First Step

Here we ask the user what he wants to do. Try to encourage him to use your Chatbot.

Now name the button, here we called it “Get in touch!
Link it to the story you just created

We also added a second button in case the user wouldn’t want to get in touch with you.
Here we linked it to a new step but don’t hesitate to create a new story or give the possibility to the user to explore another side of your chatbot.

Now you can “save” your step. 

2 – Integrate the chatbot

Now we have to integrate the chatbot.

Click on  “Channels” and on Clustaar Webchat. 

Here you can set up your webchat.

Copy the script

Paste it in your html file like this in the header ( <head> </head> )

Save your file! 

Go on your website and you will see the chatbot appear!

Yes, it was that simple! 😉

Thank you for reading this tutorial! And well done if you managed to complete it! 👏

You can out this Bot in our “Template” section : 

Don’t hesitate to contact us if you have any question or want to see a demo of everything you can do with the Clustaar Platform!
Book a demo 🎁

Was this article helpful?

Related Articles

Need Support?
Can’t find the answer you’re looking for? Don’t worry we’re here to help!
More help