NOTE: If you are interested in making a bot with booking or reservation functionality instead, you might want to take a look at our time-slot booking chatbot tutorial.
So, without further ado, let’s get to it!
1. Access Landbot Builder
First and foremost, access the Landbot builder dashboard. From here, click on the pink “BUILD A BOT” button in the upper right corner.
A pop-up will appear prompting you to choose a channel. We will be creating a bot for the bed as it’s the most accessible and flexible option:
Next, you will be redirected to the template library. However, we will be building our bot from scratch:
After clicking the “START FROM SCRATCH” button you will, at last, access the builder:
2. Determine Your Welcome Message
Start your bot-building journey by adjusting the Welcome Message which is the only pre-set block on your interface.
Customizing this block is a great way to familiarize yourself with the Landbot builder. As you can see, the building of the chatbot flow happens in the form of blocks. Each block represents one turn of the conversation with the text/question/media shared by the chatbot followed by the user answer in the form of a button, picture, or free input. These types of blocks are the ones that appear on the front end. However, there are other blocks visible only on the backed. These ones help you with a variety of operations such as data export and calculations… but we will get to that later.
Now, the Welcome message is quite important as it is the first thing your customers see. Likewise, it’s the main indicator of the capabilities of your bot. For instance, you can create a single bot that takes care of ALL the possible customer-restaurant interactions:
So, whether the customer finds this bot on your website or gets to it by scanning a QR code on a table inside your restaurant, they are able to access the service they need quickly and efficiently. You can even make a differentiation between menu items you only serve in the restaurant and those you offer for delivery with two different menu access points.
Though, for the purposes of this tutorial, we will keep things simpler with a single menu and the option to track an order. (As mentioned, if you are interested in building a booking bot, see the tutorial linked above!).
3. Set Up Total Tracker
Before you let customers access the menu, you need to set up a variable to track the price total of your order.
To do so, drag a green arrow from the green corresponding to the “Show me the menu!” button and when a features menu appears, select the “SET VARIABLE” block. This is one of those blocks that are only visible on the backend and do not affect the final user experience.
Focus on the first field “Create/select a variable to modify”.
There are some pre-set variables for the most common type of data such as @name and @email. However, there is no variable representing bill total so you will have to create one.
Simply type the name you want to call your variable and set its format. In our case that would be @total in a numeric format:
After you click create be sure to set the initial value to 0:
Please do note that this step is only necessary if you want to calculate and bill the total using the bot. If not, you can go straight to creating the menu!
4. Structure Your Menu
Continue by dragging a green arrow from the green dot output of the “Set Variable” block. Then, when the feature menu appears, select the “Buttons” block:
Depending on how varied is your menu, you will want to categorize it for simpler navigation:
The above is just one of many alternatives. Just create the categories you have on your menu. For instance, the categorization can reflect dietary restrictions:
Or navigate customer based on courses
It really just depends on the organization that best suits the style of your menu.
5. Build Menu Categories
You can imagine that if each of your menu categories fully expanded on our little canvas it would end up being a hard-to-manage mess.
Thankfully, Landbot builder has a little hack to help you keep control of the flow and make it as easy to follow as possible.
Drag an arrow from your first category and search the pop-up features menu for the “Bricks” option.
Once you click to select it, another popup window will give you an option to choose a brick template from the library or create your own brick:
Bricks are, in essence, builder interfaces within the builder interface. They allow you to group several blocks – a part of the flow – into a single brick. This way, you can keep your chatbot conversation flow clean, organized, and easy to manage.
After clicking “CREATE A NEW BRICK” a new brick will materialize in your flow. When it does, be sure to rename it appropriately so it makes sense within the flow. For example. I named the brick “Beverages” as it will be storing the beverages menu:
Next, hover over the brick to bring out the edit button and click it to get in.
Inside the brick is an interface very similar to that of the main builder with a few subtle differences:
- You have the freedom to choose any type of block as the first block/message of the brick.
- There is one default output option, however, you can design for as many outputs as you want (the outputs in this instance act like buttons in a Buttons block)
- “Back to bot” option in the upper right corner which takes you back to the main flow
- The header menu is different offering option of modifying “Brick Settings” and “Make it Reusable”
NOTE: The “Make it Reusable” option is what makes things interesting. You can save this brick and add it as a template to your person brick library. That means, for example, the next time you are building a different version of your restaurant chatbot, you don’t need to build the beverage menu from scratch but simply import the template from the brick library!
For the first block in the “Beverages” brick, choose “Picture Choice”. This block is pretty fun as it displays options in a visual carousel:
All you need to do here is define the Question Text you want the bot to say the customer and input the options and corresponding images.
To add choices, click the plus sign next to “Add another button” and more features will popup. Then:
- Define the text of each button
- Associate an image with each button (Upload it from your PC or use a URL)
After you are done, click SAVE.
On the front end, the picture choice will show as follows:
Next, draw an arrow from your first drinks groups and created another Buttons block to provide a list of all coffees and their prices:
However, I want my menu to look as attractive as possible to encourage purchases, so I will enrich my buttons with some images.
To do that, click on the three dots in the upper right corner of the Buttons block. The block’s advanced editor will appear on the left:
- Click on the “Settings” icon on the button you want to edit
- Set “Button Style” to “Image”
- Upload or add URL with the desired image
Unlike the carousel in “Picture Choice” block, the images here will display above their respective buttons allowing customers to contemplate all choices at once:
NOTE: Notice my coffee meu includes options to go back to the category menu or back to the main menu. This gives the customer a free hand to explore and move around the menu without commitment until they are ready to make a choice.
Now, here I made a choice to add the item to the cart directly upon clicking since it’s a drink order and there is not much to explain.
However, when you are designing our food menu, you might want to add an extra step. For instance “Click on the option to learn more about, you can always come back here and change your mind!”
That extra information step could look like this, giving the customer option to confirm the selection or go back:
Essentially, this is all you need to know about creating a menu.
Keep going with the set up until you put together each category and items within that category.
If a friendly MENU CHATBOT is all you want, this is it for you! Make sure there are no dead ends in the conversation and the user can always get back to the main menu for more exploring… and done. You’ve got yourself a conversational menu that protects your customers and employees alike while making menu browsing on mobile feel natural!
6. Add Items to Cart
Now it’s time to learn how to add the items to a virtual “cart” and sum the prices of the individual prices to create a total.
Drag an arrow from the menu item you want to “add to cart” and select “Formulas” block from the features menu.
Formulas block allows you to make all kinds of calculations and processes similar to those you can do in Excel or Google Spreadsheets inside the Landbot builder.
This block will help us create the fictional “cart” in the form of a variable and insert the selected item inside that cart.
Turn your attention to the editor bar on the left. First, we need to define the output AKA the result the bot will be left with after it passes through this block.
Name the variable. I chose the word “cart” but you can choose whatever works for you. What is really important is to set the format of the variable to “Array”.
In the programming language (don’t get scared), array is a data structure consisting of a collection of elements… basically a list of things 🙄. This format ensures that when the customer adds more than one item to the cart, they are stored under a single variable but are still distinguishable elements.
Once you create your variable move on to the next step, the formula itself.
In this instance we will use the “Push” formula which basically adds an element/value to the end of an array:
NOTE: If you are ever unsure about what a certain formula can do, just find it in the cheat sheet below the formulas field.
In other words, we are pushing the selected product “Espresso” into our virtual @cart.
Repeat the process for each product, in each section of your menu:
The next step?
We need to ensure our bot can calculate the price of the purchase.
7. Calculate Total
Remember how we set up a @total variable with a 0 value at the beginning of the flow?
Well, now is the time to make that total grow!
Draw an arrow from the green output of the Formulas block and create a new “Set Variable” block:
The variable to modify will be @total as before. However, this time, we will activate the calculation function and perform as sum:
@total + “price of the product”
This way, @total starts with a value of 0 but grows every single time a customer adds another item to the cart.
To wrap up the brick, “link the “Back to drinks Menu” button to lead back to the main drinks menu:
As for the “Back to Main Menu” option… Turn your attention to that brick output field as that is our connection back to the main flow. As a default there is one output but we will create a second one and name them as follows:
Link the “Back to Main Menu” button with the “Main Menu” output and link all of the product orders to the “Add to Cart” output:
After you develop each category, the anatomy of the brick will look much like this:
Though the initial menu setup might take some time, remember you are building a brick which can be saved to your library as a reusable block. Hence, you only have to do it once.
Remember to SAVE your brick before you exit to the main flow!
8. Place Order (In-House)
After you are done designing your menu, direct all your “Main Menu” brick outputs back to the buttons block featuring the main manu. But, for the “Add to cart” output create a new buttons block with these options:
- Continue browsing the menu – which leads back to the main menu
- Place your order – which will lead us to the checkout brick
Draw an arrow from the “Place and order” button and select to create a new brick.
Rename the brick “Place Order”, “Checkout” or something along those lines and enter it for editing.
Your first step when processing the order will be to
- break down the @cart contents in @array format into a string format
- “slice off” the first default value of the @cart array which is 0 (none)
This step is mainly to make the cart contents user friendly.
So, create a Formulas block to kick off the flow inside the brick, set the output to @cart_string and type the formula as follows:
Slice(ToString(Slice(@cart, 1)), 1, -1)
Naturally, if you are using a different name for your @cart variable you need to substitute it with the name you are using.
Next, set up a simple Buttons block recapping the order and displaying the total:
After the customer finally clicks “Place Order” it’s time to offer them payment options. Since this is the in-house order placement scenario, I decided to provide the following:
NOTE: Click on the three dots in the upper right corner of the Buttons block to open the advanced button editor and create a variable to save the customers choice (@payment_pref in string format).
The customer can indicate whether they want to pay cash or by cart at the cashier (or with the waiter or simply pay online within the conversation. Though, you are free to include the payment options you see fit. Even if you don’t think conversational online payment is for you, giving your staff information about payment preference can be useful in a sense that:
- It saves them time of a back-and-forth to find out how the customer wants to pay
- It gives them time to prepare if they need to handle cash which is notoriously one of the “dirtiest” items passing from person to person.
If you do include the online payment, how does it happen?
In Landbot, it’s a question of a simple Stripe integration. Just drag an arrow out of the Online payment option and select “Stripe” from the features menu:
Firstly, you need to connect your Stripe account with Landbot. Next, set the “Amount” to “VARIABLE” and indicate which variable will represent the amount. In our case that will be @total. To finalize, set the currency of the operation and define the message the bot will pass to the customer.
You’ll notice, that the Stripe block has two outputs:
This is to account for situations when there might be a problem with the payment. So, in case the payment fails, I gave the customer the option to try again or choose another method of payment.
Before uploading the order to the system, you can use a predesigned brick to assign a timestamp to each order:
To retrieve the brick, draw an arrow from any of the payment options (once the brick exists connect the rest of them as well) and select the “Bricks” feature from the menu. However, this time, instead of clicking to create a new one, use the search but to retrieve TimeStamp brick:
Once you get inside the brick, the flow is already there along instructions of adjusting to your personal needs:
Save changes and exit the brick.
Now it’s time to export all the data to our database. While it’s possible to connect Landbot to any system using API, the easiest, quickest, and most accessible way to set up data export is with Google Sheets integration.
Naturally, first, you need to create a designated spreadsheet in your Google Drive:
Then you can proceed to connect your Google account with Landbot and associate the integration with a particular:
- Sheet within the spreadsheet
Next, comes the indication of what action you want to perform.
Landbot offers three main processes you can carry out using this integration:
- Insert new data
- Upgrade existing data
- Retrieve data
Since we are uploading new data, choose the first option.
Last but not least, it’s time to associate the names of the individual columns in the spreadsheet with the variables which information you want to store under them:
Now, all that’s left is to wrap up the conversation!
9. Place Order (Home Delivery)
The home delivery “place an order” flow is very similar to the in-house version except for a few changes
As in the restaurant scenario, start the flow with a formula to transform cart contents into a more user friendly format:
The next step will enable you to impose a delivery charge. Use the same “Set Variable” block as when calculating the total but create a new variable @total_after_delivery and sum the order total with whatever is your delivery charge:
Next, it’s time to ask a few questions crucial to the delivery:
- Phone number
Before you finish the conversation though, let your customer revise the information once more using the Buttons block.
Link the “Change contact info” button back to the “address” question so the customer has the chance to update either the address or the number. If you feel like it, you can also create separate buttons to change the number and the address to avoid having to re-enter both when only one needs changing.
Next comes the payment option block. This time, I opted for “Cash on Delivery” or “Card” online:
Do make sure to update the variable for this block answer to @payment_pref (click three dots in the upper right corner to open the advanced editor). And, insert the Stripe integration and order timestamp brick following the same flow structure as the “in-house” scenario:
All that is left to do is upload the order to your sheet so you can process the order.
To keep home deliveries apart from the in-house orders, I created a new sheet inside the same spreadsheet with adjusted column names to accommodate for the additional data required:
Once again, integrate the Google spreadsheet following the same steps as in the “in-house” order scenario:
Save the changes in the brick and return to the main flow.
When you get there, don’t forget to put together a suitable thank you/goodbye message:
9. Create Persistent Menu
In order to give customers the freedom to clean the slate and have a “doover” or place an order in any moment during the conversation.
There is a way to make this happen and it’s called the “Persistent Menu” block. It’s no rocket science. In essence, the block creates permanent buttons in the header of your chatbot.
This block is a bit different since, in the same way as the Welcome message, it acts as the first point of access. Click on the purple arrow on the left side of the interface to open the advanced feature menu and search for “Persistent Menu”. Click to insert into your canvas:
Next, simply define the buttons you want to feature in the header menu:
Naturally, we’ll be linking the “Place Order” button with the “Place Order” brick and the “Start Over” button with the “Main Menu” at the start of the conversation.
While the first connection can be done in a drag of an arrow from the button to the brick. The second “do-over” option requires a little intervention in the form of two “Set Variable” blocks:
In the first instance, using the block will help you set the value of the @cart back to “empty” or “none” using square brackets:
In the second instance, you will use it to set the @total back to 0
That is it!
The anatomy of your bot is working like clockwork… now it’s time to give it a facelift!
10. Personalize Your Chatbot Design
Click “Design” on the navigation bar in the header.
The design section is extremely easy to use, allowing you to see any changes you apply to the bot’s design in real-time.
You can either customize the colors, fonts & icons of your restaurant chatbot to match your businesses exactly:
Or simply use one of the many stylish templates available in the design template library:
11. Set Up Hidden Fields
Hidden fields allow you to “hide” certain information in the URL of your bot.
So, in an instance when, for example, a customer accesses your in-house manu chatbot by scanning a QR code that QR code can correspond to a URL that includes the table number information.
To arrange hidden fields in Landbot, go to the “Settings” section in the header navigation bar and select “Hidden Fields” in the left-side menu:
Here you can indicate which variable you want to store the bot’s URL.
In practice it will look as follows:
Hence, when the time comes for the bot to export the information to the Google sheet, the chatbot will know the table number even if the user didn’t submit this info manually.
Can You Do More?
Of course, you can! This tutorial only scrapes the well of possibilities you can achieve with Landbot builder without having to come anywhere near code!
The best part of it is… whether own a small coffee shop, a food truck, restaurant or a whole chain of eateries, you are able to put together a smart food ordering bot that can:
- Showcase your menu in a fun, interactive and visual attractive that feel natural to the mobile interface
- Prevent people from crowding the bar or serving area and, instead, allow them to take their seat and make their order in peace
- Help keep social distancing and hygiene protocols in place even during busy periods
- Encourage user engagement, improve overall customer experience and perhaps even spur some social media coverage
Deploying a restaurant chatbot with Landbot can be done within an hour… even if you decide to build a more complex one with customer support function or food recommendation services, you can go from concept to launch in a matter of days…
So, are you ready to give it a try?