Complex food ordering options for chatbots made easy with Webviews
How Bot Makers can help restaurants survive a pandemic
Restaurant menus can be complex because some items on a menu either require the customer to select a variant, such as size, or select add-ons for customization. Ordering pizza is a great example because a user often needs to pick between small, medium, or large sizes (variants) and a pizza can be customized with different toppings (add-ons).
A Webview makes it easy for users to make required selections with radio buttons, as well as select add-ons with checkboxes. In this tutorial, I’m going to show you how to:
✅ Trigger a Webview when users select an item that requires selections.
✅Design your Webview using the Botsheets Webview Builder
✅Manage content for the Webview from a Google Sheet.
How it works
We’re going to tell the user that options are required when they select a specific item on the menu.
The user will click a button to make their selections in a Webview, and any selections made through the Webview will be added to the order, factoring in any changes in price as a result of making these selections.
We’re now going to add an Options worksheet so that a restaurant owner can add options for any item on the menu. All of the data will be managed from a Google Sheet and appear through a Webview configured for each item.
Finally, we can use the Botsheets Webview Builder to define what our Webview will look like, what data to retrieve from the Google Sheet, how the data will be displayed, and where the data will be saved when users make their selections.
Upgrading your restaurant bot with Webviews
I’m assuming that you’ve already installed my restaurant template for Manychat + Google Sheets but you do not have the Webview option.
If you have a more recent version of the restaurant template (v2.0) with Webviews built-in, then refer to this document and you do not need to proceed with the following steps
Don’t have an “Options” sheet in your restaurant bot? Here is how to upgrade your version of the restaurant bot:
Step 1: Replace Custom User Fields
We’re going to want to change two Custom Users Fields because we’re adding options that may affect the price and need to do some calculations.
In Manychat, go to your settings and click the User Fields tab. Delete the following user fields:item_price item_total
Don’t just archive the fields. Delete them, even if they are used in any of your Manychat flows. We’re going to install a Manychat template in Step 2 with item_price and item_total fields included as number-type user fields.
Did you delete these user fields? If so, let’s continue.
Step 2: Install This Manychat template
Click and install this simple Manychat template. There are three flows. Once you install the template, continue to Step 3.
Step 3: Modify Add To Cart Flows to Support Options
Go to your Flows and you’ll see a Restaurant Webview Example folder. Move these flows to where you keep your other restaurant ordering flows.
Now, we’re going to modify your existing Add to Cart flow.
Open the flow and delete everything AFTER where the user selects a quantity of items. Don’t worry, these steps are in the new flows you just installed
Your flow should look like this:
Drop-in an Add to Flow step and go to the Add to Cart Step 2 (Choose Options) flow which you just installed to your bot. Link everything to that step so it looks like this:
When a user selects a quantity of an item they want to order, your bot will check to see if any options are required and trigger a Webview if they are.
Step 4: Grab v2.0 Google Sheet
You’re going to want to grab a new Google Sheet template (v2.0) and if you made no changes to the original, you’re in luck. You just need to copy over your Menu categories and your Menu items and paste those into the new Google Sheet template. If you’ve made significant changes to the Google Sheet that might be more work, but keep reading and you can decide if it’s easier to copy over your changes to this new Google Sheet or make changes to your existing Google Sheet based on what I’m showing here.
In the Carts sheet, you can see that when items get added to the cart, some items may require additional selections from the user, and may have additional costs. We want to store those selections in the Carts worksheet.
There is an Options worksheet as well. This is what a restaurant will use to add lists of options for specific menu items. The Webview will read data from this worksheet and generate a list of options.
You can see how the Add ons for the Webview Configuration “Default Pizza” are different from the Add ons for the Webview Configuration for “Sandwich”. For my pizza Webview, both the Size options and Add ons will appear in the same Webview because they refer to the same Webview configuration. Some options in a Webview may not have a price. For example, a Sandwich may have options the user can pick from at no additional cost. All options for all menu items would be managed from this Worksheet, with options grouped by a Webview Configuration.
Go to the Manage Menu worksheet and you’ll see how a restaurant owner/manager can select if an item on the menu would have possible options. They just need to select the configurations that groups the options.
If you select an option and want to clear that, just click in the cell and click delete and it will reset it the cell with nothing selected. Some items will have options and some won’t.
To use the new Google Sheet, make sure you click to “Share” the Google Sheet URL and copy and paste that into your Manychat Settings, replacing your existing Google Sheet URL. Remember to make sure the Goggle Sheet URL is set to “Anyone on the Internet with this link can view” and bot-sheets-service-account@botsheetsremover.iam.gserviceaccount.com is invited to the sheet as well:
Remember to paste the link into your Bot Field Restaurant_Sheet_URL in your Manychat Settings.
Step 5: How it works from your Manychat flow
Open up the Add to Cart Step 2 (Choose Options) flow.
You’ll see it has a condition to check if the Custom User Field webview_configuration has a value. The field would be set with a value when an item on the menu with options is selected in a gallery (the value gets set in the Menu logic worksheet). If no value is set, it’s because the item doesn’t have options, and the bot will skip a prompt for the user to make their selections and choose from the options in the Webview.
Step 6: Map Custom User Fields To Column Headers
Now go to the flow named Add to Cart Step 3 (Write to Cart) and you’ll need to configure the Insert Row step.
Find the Insert Row Action and click that to edit the Action. You’ll want to find the new Google Sheet and select the Carts worksheet:
Map these Manychat Custom User fields to column titles in the Carts Worksheet:
Click the blue Save button!
Now in the same flow connect your View Cart flow like this:
Finally, update the Get Cart Total Price flow so that we can retrieve a total cost that includes any options users select in the Webview.
Click to edit the Action in this flow and change the query to column L since the new Cart worksheet will store the total cost including the cost of any options that may affect the total price.
Finally, go to the flow named Generates a list of items in the order, and edit the Action in that Flow. You’ll want to edit the Response Mapping tab and change the JSONPath to $.item_cart
Click the blue Save button and publish the flow.
Step 7: Configure a Webview
We’ll now want to configure a Webview so we can define what the Webview will look like, which options will be accessed from the Google Sheet, and where that data will get saved in Manychat.
Go to https://app.botsheets.com and login with your Google account.
If you’re a new user, you’ll need to add your current Botsheets Key to migrate your account to the new Botsheets Manager.
Click the Webview Builder tab.
You’ll need to create a Webview Token for your Manychat bot. Click the (+) button in Step 1. You need to add your Manychat API Token which you can get in the API section of your Manychat Settings. Paste in your Manychat token, select your Botsheets Key, and click Create in order to create a Webview token for your bot.
When your Webview Token is generated, click the icon to copy it to your clipboard.
Add the Webview token to your bot in your Manychat settings. You only need to do this once.
Paste the token into the Bot Field value
Step 8: Create a Webview configuration
Now you’ll want to create a Webview configuration. You can create different configurations for the same bot. For example, you might have a configuration for ordering pizza, or a different configuration for different kinds of pizzas, and you might have a different configuration for sandwiches.
When you create a Webview configuration, you’ll want to make sure that your configuration name matches a configuration name in your Google Sheet.
In Step 2 of the Webview Builder, click the (+) to create a configuration:
You can choose from a template or create a new one from scratch. Select the Pizza Options template configuration and click create.
Now click the edit icon to edit the configuration and I’ll show you how it works!
The Main Settings allow you to define the theme for the Webview. You can add a heading and you can choose a color to match your brand. A good strategy here is to use a generic heading, or make the main heading product-specific, so if someone chooses a specific pizza on the menu, display the product name as the Main Heading so people
You’ll want to group selections with a heading. For each column under the heading, you would reference a Google Header Column Name. When users make selections choose a specific Custom User Field to save that data. You can also choose how the data will be saved.
At the bottom of the screen, you’ll see that you can customize the label for the “Submit” button and you’ll be able to target a flow when the user clicks that button to close the Webview. You’ll want to target your Add to Cart 3 (Write to Cart) flow. You can get the Button target by going to your Manychat Dashboard and going to the Add to Cart 3 (Write to Cart) flow, then copy the Flow ID in the URL.
Paste it in here and click SAVE.
The Submit Button target will ensure that when the user clicks Submit in the Webview, the order process will continue in the conversation! You can now click the X in the top right corner of your screen to close the configuration screen.
Step 9: Merging all selections for the cart
Each Webview configuration will capture specific data and save that data to corresponding user fields. Your users could make multiple selections for multiple items in a single order, so you’ll want to merge all of their selections into one user field and display that in the cart. For example, I want to capture a pizza size, and toppings, but I want the cart to merge these into one cell in the cart, so it’s easy to manage and see the user wants to order a pizza (Medium, Onions, Pepperoni, Mushrooms)
If you’re a pizza restaurant, then {selected_size} could be an appropriate/descriptive user field to store a pizza size selection, but really you could just use {variant} as a custom user field name to capture a variety of radio-button selections. Either way, while you’ll want to store different selections separately, but merge everything into a selections field for the cart.
Step 10: Add a URL to your Manychat Settings
You’re going to need to add a URL to your Manychat settings to allow the Webview to automatically close when the user makes selections. Click into your Manychat Settings, then click Growth Tools, then in the section for Authorized Websites add webview.botsheets.com
Step 11: Final clean up
You’re going to want to update a couple of final things. Find the flow 🥘Empty Carts Automatically and edit the external request so the URL is:
https://api.botsheets.com/botsheets-remover-2/delete
Also, change the JSONPath to message
In the Action step where it clears out the fields, you’ll want to remove the “unknown fields”, and then add item_price, item_total, and selections and clear those custom user fields.
Test it Out!
Make sure you have an item in the menu with options added, referring to your Webview configuration, preview your bot in Messenger and select an item on the menu you know has options.
Have questions? Best place to get a response from me is in the Botsheets community
