 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:
Push(@cart, “Espresso”)
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:
- Success
- Failed
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:
- Spreadsheet
- 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:
- Name
- Address
- 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