Forget about classic chatbots for a moment. Imagine an assistant that could do more than talk, an assistant that could conjure up a UI element most appropriate for the situationā¦ Such chatbots with power-ups are no myths; they are called conversational applications.Ā
And so, for a change, this article will show you how to build a conversational app focusing on adding the exciting UI and backend elements that turn chatbots into real business workflow tools!
A Bit of Context
In the past few years, chatbots went from hype to near-obscurity. However, little by little, as chatbot technology became more sophisticated and more accessible, it made its way back to the spotlight. In fact, in times of the greatest world crisis in decades ā the COVID-19 pandemic ā chatbot tech, especially the no-code chatbots kind, came out as the hero of the hour.
The reason for such success?
Besides advances in NLP and artificial intelligence, which are still foreign to most, chatbots evolved from purely text-based interfaces into conversational apps ā apps that are not only user-friendly but also simple enough to create and maintain, over other options like voice assistants, for example.
Conversational App Definition
As explained in our ultimate guide to conversational apps, a conversational app combines text-based messaging with visual UI elements for a better user experience. Rather than a simple text exchange, conversational apps enable users to interact with buttons, carousels, calendars, maps, videos, mini forms, and so forth when the use case calls for it.
Being able to switch from casual conversation to structured flow, conversational apps debunk the argument that conversational interfaces are not the best choice for every scenario.
Top Conversational App Use Cases
When can conversational apps be of most use and advantage?
Conversational app use cases, like chatbotsā, vary significantly, but there are few situations where these more structured conversational interfaces come in particularly handy.
Bookings and Reservations
Conversational assistants are able to offer reassurance and support users' needs when trying to book a trip or reserve an accommodation. However, when it comes to data collection, many consumers found submitting sensitive information one by one taciturn and uncomfortable. Conversational apps allow you to use rich interface elements such as calendars, clocks or mini forms with structured data fields so the transition from conversation to conversion is smooth and frictionless.
Transactions
Chatbots are great at getting people to convert. Conversational apps are able to increase the conversion rate by allowing for the transaction to happen without forcing the user to leave the conversation. All the while providing them with a familiar transactional interface.
Product Recommendations
When it comes to product presentation, a thousand words cannot do what a single image or a video can. A chatbot can talk all it wants about the benefits and great features of your products, but that wonāt be as effective as offering your customers visual stimulation. Conversational apps allow you to introduce products in the form of images, GIFS, videos, and even engaging carousels.
FAQ/Customer Service
When it comes to FAQ and customer service, itās good to leave customers space to ask their own questions. However, text isnāt always the best way to present an answer. For instance, once a conversational app identifies user intent, it can then present the user with buttons or an in-chat form to help narrow down the issue. Alternatively, the app can use GIFs, videos, or downloadable files to offer the user issue resolution in the most relevant format possible.
How to Build a Conversational App Without Writing a Single Line of Code
Given the variety of elements and integrations involved in conversational app development, many consider it a costly and time-consuming affair. However, as mentioned at the start of this post, low and no-code platforms have made huge strides in making this technology accessible and understandable.
In fact, today, itās possible to build a conversational app in a matter of minutes or hours.
To prove the point, this article will present a simple-to-follow tutorial on how to make a conversational app with a variety of interactive UI elements without coding.
NOTE: If you wish to follow along with this tutorial, click here to create a free Landbot account!
1. Create your āWork Spaceā
On your Landbot dashboard, click āBuild a Chatbotā button in the upper right corner:
Once you do, you will see a pop-up of channel selection. Choose the web option:
Next, you will be redirected to the Landbot Template Library, which is the fastest way to go and build a conversational app. However, selecting a template would beat the purpose of this tutorial, so go on and click āStart from Scratchā also in the upper right corner:
Tadaaa! You made it into a Landbot visual drag-and-drop builder. Have a good look around:
2. Customize Your Welcome Message
Before anything else, adjust your Welcome message. This message is the first thing a user will see when interacting with your conversational app. Itās usually a good place to set expectations as well as establish the botās personality.
Check the video for the basics on how to go about it:
I decided to go with this setup:
3. Outline The Conversation Flow and Assign Question Format
Before you throw yourself into the conversational app development, itās good to outline the data you want to collect as well as the format in which you want them to appear.
For instance, for our conference registration, we decided to gather the following information:
Personal data:
- Name
- Last Name
- Preferred Name/Nickname to Appear on Badge
- Business Email
- Phone number
- GDPR compliance
Company Data:
- Company information
- Country
- Social Networks
Hospitality:
- Arrival
- Dietary Restriction (No Restrictions, Vegetarian, Vegan, Allergies)
Merchandisee:
- Shirt size
- Preferred Color
Transactional Data:
- Payment
Thanks to the outline, we have a better overview of what the conversational flow will look like and can decide on how these questions will be presented.
For instance:
- Personal and company data: Multi-question feature
- Hospitality: (Rich) Buttons
- Merchandise: Buttons/Carrousel
- Transactional Data: Stripe Integration
4. Personal Data Multi-Question Block
Throw in some casual banter, and then drag an arrow to select the āMulti-Questionā option from the features menu:
A new block and an accompanying editor will appear in the builder:
The Multi-Question block enables you to ask users several questions at once using a small conversational mini-form. The feature is extremely flexible, which makes it easy to adjust to any possible use case:
First, adjust the multi-question message to fit the occasion:
Next, create the first field by defining:
- Question Type
- Variable to store the data under
- Field Label
For additional adjustments, click the āExtra options.ā
Of the possibilities, we defined the āhelp textā and cut the column width in half (though you can always do more!):
Next, repeat the process for the last name. To give you a better idea, on the front end, this simple setup will appear as follows:
But we are not done yet!
There are more personal information fields we need to add to the box!
For fields such as email, phone number and the privacy policy checkbox, make sure to choose the appropriate āQuestion Typeā. That way, the bot will automatically check the information for an appropriate format:
Some of the question types can have additional fields such as the checkbox setup with āAdd Optionsā:
The final Multi-question setup will look as follows:
5. Use Variables To Personalize The Process
Thanks to the variables, you can use the collected data in real-time to personalize the experience for every single user:
6. Continue Collecting Data with Formatted Questions
The next set of data to collect are company-related information:
- Company Name
- Country
- URL
- Social Networks
To help ensure you get the data in the right format, you can use any relevant question type blog from the features menu:
For instance, using the URL question block instead of the generic TEXT block will ensure the conversation doesnāt continue unless a valid form URL is submitted.
Now, to ask for social networks, we can once again use the multi-question block:
And the front end:
7. Use Buttons To Streamline Choices
If you need your users to make a quick succession of choices, the simple buttons are the best way to go.
In Landbot, when selecting the next block, choose the āButtonsā block option and simply edit the questions and options:
And the user will be able to select the relevant option quickly and without the hassle:
You can always take the buttons to the next level. Just click on the three little dots in the upper right corner of the block to open an advanced button editor:
Click on the settings icon to open an editing section for each of the buttons. There, you can change the button style to include:
- Icon
- Emoji
- Image
For example, select the emoji option and assign one for each button option:
In the front end, the emoji buttons will look as follows:
8. Set Up Multiple Choice
However, we have only scraped the surface of the button's advanced editor. If you scroll down to the bottom, you will see it offers you the possibility to:
- Redefine buttons alignment
- Display buttons as searchable options instead
- Allow for multiple-choice selection
- AND save the user response under a unique variable like with the rest of the blocks!
So far, we have exited each Buttons block through the purple DEFAULT option because there was no flow diversion based on user answers. However, now, we will need a bit more information from those who select āIām Allergic.ā
Therefore, this time, draw an arrow from the āIām Allergicā button, create another Buttons block, and activate the multiple-choice option. After all, a person can be allergic to more than one thing:
When a user arrives at this point of the conversation, they will be presented with a very straightforward multiple-choice table:
This way, users who choose one of the first three options can continue straight on, and only those with an allergy complete this extra step.
9. Create a Carousel
Next, itās time to move on to collecting merchandise data:
Besides classic, image, icon, or emoji buttons, you can switch things up by using a carousel feature (ideal for product display). In the Landbot builder, you can find the carousel under the name āPicture Choice.ā The setup is very similar to working with buttons. You need to define the title, the image, and (if relevant) a URL:
Using this feature, the final user experience will look like this:
10. Insert the Transaction Element
Introducing a transactional element into the conversation has never been easier. All you need to do is select the chatbot Stripe integration from the features menu and set up the connection:
However, this layout only appears if you are setting up a new account. If you already have one, all you need to do is:
- Define the amount to be paid (it can be fixed or @variable based on user choices, e.g., based on what has been added to the cart)
- Select currency in which the amount will be charged
- Define the message to appear with the payment form
In the front end, the Stripe payment will appear as follows:
11. Integrate, Integrate, Integrate
So far, you have seen elements that improve the end-user experience. However, conversational apps can do for your internal workflows as much as they do for the UX.
Thanks to out-of-the-box integrations or a simplified webhook setup, you can connect your conversational app to your existing workflow without hassle.
For instance, one of the easiest ways to manage data export, import, and update with Landbot is using the Google Sheets integration:
In a similar way, you can easily connect to Mailchimp, Slack, Salesforce, etc.
However, many take advantage of the simplified API webhook setup to connect their conversational apps to tools such as Airtable:
If you donāt feel like setting up a webhook all by yourself, you can always check out Landbot Bricks Library. Bricks in Landbot work like plugins. They are reusable fractions of flow. You can either create your own or use the ones available in the public library:
For example, the email validation brick already comes with a pre-set webhook connecting to an email verification database. The notes inside the brick guide you to make minor adjustments to customize it to your needs.
You Made It!
Learning how to create conversational apps has never been simpler. You can easily bring them to life in a matter of hours or even minutes.
This tutorial shows how to build a conversational app for the web but you can easily adjust the setup to a messaging app such as Messenger or WhatsApp (respecting their UI limitations, of course). So, if you want to give it a try, just sign up for free and try all the advanced features as part of your free trial!