Restaurant Toolkit For Messenger

Deliver a dynamic food ordering experience inside of Facebook Messenger

The Restaurant Toolkit turns a Manychat bot into a dynamic food ordering experience. A restaurant owner without any technical knowledge can simply enter data into these 7 Google Sheet columns and everything else works like magic. If you make changes in the Google Sheet, the Messenger bot updates in real-time.

That 👆 instantly turns into this 👇

Everything you would expect from a food ordering system are built-in. A Chatbot built with Manychat will dynamically generate a restaurant menu using the data entered into the Google Sheet. Here you can see how a gallery is dynamically generated using data stored in the Google Sheet.

Clicking an Add to Order button in a dynamically generated gallery will add a user’s selected item to an order and a Carts worksheet serves as a shopping cart for every item a user wants to order.

If you have more than 10 items on a restaurant menu, the 10th card in the gallery is a More button. When a user clicks the button to view more, another gallery will load, reading the next set of rows in the Google Sheet

You can even customize every element of the “More” gallery card to match the brand and voice of the restaurant.

Users can browse the complete menu, or browse by menu category. Because a restaurant owner can add keywords in the Google Sheet, users can search the menu too and a gallery will be dynamically generated with search results. Here you can see a user asking the bot for a hamburger and the bot will search the Google Sheet looking for burgers and dynamically generate a gallery of items the user can order.

Restaurant menus can be complex because some items on a menu either require the user to select a variant, such as size, or select add-ons. 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).

You can create Selection Lists for each item on the menu, and when users want to add an item to their order, a Webview is dynamically generated with options reading columns of data in your Google Sheet.

When users want to view their order, the bot will add up the cost of all items saved in the Carts worksheet and display a total price for the user in Messenger.

Users can add more items to the cart, indicate quantities they want to order, remove individual items, or clear the order. Of course, when a user is ready to complete an order, they can checkout and the bot will give them an order total, calculate taxes, add any delivery fees, let them add a tip, list out everything included in the order, and give customers a grand total for payment, then make a payment directly inside of Messenger.

Now let’s go through the steps you need to get this configured. It can take about 20 minutes for everything to be set up but it begins working immediately meaning you can be generating transactional food orders through Messenger in no time!

Step 1: Install

Assuming you have made a copy of the Google Sheet template for this Toolkit, you’ll need make the Google Sheet shareable so that Botsheets can read your data. Click the green share button at the top right corner of Google Sheets.

Change the share settings in Google Sheets so that Anyone on the Internet can view your sheet.

Don’t worry as only those with the link can access the sheet data. Copy the link to your clipboard. You’ll give that read access to your Manychat bot.

If you have not done so already, install this template to your Manychat bot. You can always go to your Manychat Settings > Installed Templates and check if the Botsheets Restaurant Toolkit is installed.

When you install our Manychat template, it comes bundled with our Manychat Action app. This is where you’ll store your Botsheets Key and a link to your Google Sheet.

You can access the Botsheets app through Manychat Settings > Apps. Select the Botsheets app and add your Botsheets Key and shareable link to your Google Sheet

Once you have added your Botsheets Key and Google Sheet link, the connection is activated.

Go find this automation flow you installed when you installed the tempalte.

Open the flow, click edit, and then click the big preview button at the top right of your screen so you can preview the flow. You’ll be given a menu to get started. You must preview the flow in Messenger.

The first option in the menu is to connect the toolkit, so click that and follow the steps. You’ll be given the Google Sheet template and your own bot will walk you through the setup!

Step 2: Setup Google Sheets Integration

You’ll want to use the Manychat Google Sheets integration to write data to the Google Sheet. In your Manychat settings, navigate to Integrations and connect your Google Sheets account to your Manychat bot.

Step 3: Configure Payments (Optional)

You may only collect cash or process payment for food in person. However, you can collect payment directly inside of Messenger. If you want to use Manychat’s native payment integration for PayPal or collect credit card payments with Stripe, you’ll need to first need to enable the Stripe Integration (or the PayPal integration) in your Manychat settings. Navigate to Payments and connect a payment provider.

Now, let’s configure the food ordering system.

Step 4: Writing data to the Google Sheet

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 select the 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!

Step 5: Currency, Taxes, Tips, & Delivery Costs

Go to your Manychat Settings and go to the Custom Fields tab. If you scroll down to your Bot Fields you’ll see fields and values that can be used in the calculation of costs.

Tax_Rate is this amount of tax that you’ll charge for the order (excluding tips since tips are usually not taxed by the restaurant). If your local tax rate is 3%, then you would enter 1.03. If your tax rate is 13% you would enter 1.13. You’ll multiply this number by the total amount of the user’s order + a delivery charge (if the user picked delivery) to get a grand total.

Delivery_Charge is a flat rate for delivery of an order. If delivery is free, or you don’t deliver, set the value to 0. If you want a variable delivery cost based on the user’s location, or use other conditions to determine a delivery cost (i.e. Buy 3 and get free delivery) follow this guide.

Currency All amounts are entered and displayed as just the number. The currency value (i.e. $) is a Bot Field value so you can just edit the currency symbol and it will be updated everywhere there is a cost.

Tips It’s a good idea to collect tips from customers when they pay, both if they order for delivery or pickup curbside. Tips are not subject to tax, but an added to the total cost after tax and tips are usually given directly to servers, or delivery drivers (and they pay their own taxes). It’s standard for restaurants to try and collect a 10%, 15%, or 18% tip. However, you can edit the names of the fields and/or the values if you want to ask for more or less. The value should always be 0.X as it will be factored into the calculation.

If you don’t want to collect tips, or change the values of tips, you’ll want to modify the Checkout flows.

Step 6: Checkout

A restaurant can offer delivery, pickup (curbside), or both options. Therefore the checkout process is divided into 3 flows.

The first flow will ask the user if they want to order for delivery, or pickup. If you only offer one option, then move the starting step to the action to capture the user’s selection, otherwise leave the starting step as is to ask the user their preference and then save that preference.

If you offer food for pickup (curbside), then edit your address in this step. Since the Pickup and Delivery checkout flows may have different conditions depending on the user’s selection, they will be sent to a corresponding flow.

Find the flow to complete a purchase.

Click to open the flow and click Edit then find the step where they checkout.

We take you to the point that the would pay for an order and the order will be delivered to a page admin on Messenger. You might collect cash, but if you want to collect payment inside of Messenger you’ll need to configure payments.

Configure payment through your chatbot

You can collect payment in Messenger using Manychat’s native payment integrations. You’ll need to enable the Stripe Integration (and/or the PayPal integration) in your Manychat settings. Navigate to Payments and connect a payment provider.

Now, go back to this flow:

Checkout — Complete Purchase

Switch the Checkout button to be a Buy Button in the flow. You’ll want a “Buy button” labeled Checkout (or whatever your call-to-action is to get the user to pay you).

Reconnect the button to the Action to continue the flow.

You’ll also see how the orders can be written to the Orders Google Sheet. You’ll want to edit the action and map the fields to corresponding Google Sheet columns.

Step 7: Working with the Google Sheet

The Google Sheet is a template and you’ll want to work within the guidelines of the template so everything works perfectly. Let’s go through the individual worksheets

1. Manage Menu: This is the Restaurant manager interface. Add all items on the restaurant menu here. It’s designed to be easy for restaurant owners/managers. Don’t change the order of the rows, just edit the rows and add data into new rows, or clear out data from unneeded rows.
2. Options: Certain items on the menu may require selections. Selecting a Pizza Size may be required while other selections are optional such as pizza toppings. When users select an item on the menu that requires selections, you can generate a selection list and your bot will read data from this worksheet.
3. Manage Categories: A list of categories for a menu. The list is accessed from the Manage Menu Worksheet. Example Categories are “Appetizers” and “Main Courses”. Don’t change the order of the rows, just edit the categories.
4. Menu Logic: This will generate a dynamic gallery of food items and has data that communicates with Manychat flows. It’s really an advanced mode and most cells are greyed out meaning you shouldn’t edit them. It’s important that all rows have a product_id that matches what’s in the Manage Menu worksheet
5. Category Logic: Similar to Menu Logic, just specific to menu categories. You don’t need to edit the worksheet as it contains logic.
6. Carts: This stores the items that users add to their order. Your bot will write the data to this worksheet. DO NOT enter data into this sheet manually. It’s dynamically populated by the chatbot and keeps track of everything users want to buy
7. Orders: Where you’ll write the orders after they pay for them.
8. Promo Codes: If the user tells the bot they have a promo code they will be prompted to enter the code, and if the code matches the user will be given a success message, and a value will be stored and used in the calculation. If you add codes, each row needs an incremental ID.
9. Locations: If you’re a multi-location restaurant, then you can add all of your locations here with the longitude and latitude coordinates. Your bot will read this GOogle Sheet to generate a gallery of locations ranked by the closest distance from the user.

Important: While you can give the Google Sheet any name you want, do not change the names of the worksheets! The names are required.

Menu Worksheet

The Menu worksheet was designed for the restaurant owner. You just share the Google Sheet with them by inviting them and giving them edit access to the Sheet :

Note that if you add rows in the Menu Worksheet, you’ll need to add the same number of rows in the Menu Logic Worksheet, and you’ll need to increment the product_id number too.

Also, don’t re-arrange the order of rows to affect the layout. Type in the cells to edit what’s on the menu.

You’ll need to link to pictures of your food so they appear in galleries, and include a link to them in the sheet. See this guide on how to host your own images.

Menu Logic Worksheet

The Menu Logic Worksheet was designed for the chatbot maker. The greyed out cells mean you should avoid editing them.

The only cells you might want to edit are in red. You’ll need a product ID if you add additional rows, and you might change the label of the button “Add to Order”.

You can include up to 3 buttons on a gallery card. The first button is functional as it’s to add an item to their order. The other two buttons were left blank, but you can add buttons if you want here by selecting the button type and then entering in data into the corresponding cells.

The currency has been set to be $ in the worksheet, but if you want a different currency symbol to display in Gallery cards, then you would want to click to edit the first cell in column D and then in the formula bar, just change the $ to any currency symbol you want. Then you would drag the cell down so all cells in the column use the same formula.

Carts Worksheet

The Carts worksheet stores every item a user adds to their order. The worksheet is intentionally blank and DO NOT add data to cells. When users add to the order, the bot will write a row to this sheet. When the user “Checks Out” and completes an order, then you don’t need to keep the order data in the cart, because it’s now officially an order so the bot will clear out what’s in the Carts worksheet.

Options Worksheet

The Options worksheet is for adding variations of items, or lists that require users to make selections (i.e. size, or customizations).

In this example, if a user clicks the Add to Order button and if selections are required, the button will trigger a webview with a Selection List of options.

You might have a selection group with checkboxes, radio buttons, dropdown menus, or any combination of those. Here we’re using dropdown menus for a pizza size selector, and checkboxes for pizza toppings.

Again, your bot renders all of the data in these Google Sheet columns!

The selection list is configured in a Manychat action!

Configuring Selection Lists

Find the Selection Lists flow and open it.

Any time you have an item on the menu that has variants or requires the user to make selections you would add data columns to the Google Sheet and then configure how that data will appear and where it will be saved when users make their selections.

You can see how we have two Selection Lists linked. You can add and link more Selection List actions, but just make sure to link all your Selection List actions together and preview the flow every time you add or update these actions!

If you click to view a Selection List Action, you can see how a simple form will help you configure how selection lists will be presented by your bot, where the data you capture is saved, and where the user will go after they click submit.

See the Webview name inside of the Action? This refers to a webviewbutton type in the Google Sheet. In this example, the Webview was named “Pizza Options”

The webview name is referenced in the Google Sheet. When a user clicks a button to Add to Order the name in the Google Sheet should match up with the Webview name inside of your Manychat action.

Values you capture when users make selections can be saved to custom user fields, but you can see how you can merge all their selections and save the data to a single custom user field.

When the user submits their selections, your bot writes to the carts worksheet storing all selections from the list in a single cell separated by commas.

Add this 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 view.botsheets.com

Test it Out!

Preview your bot in Messenger and select an item on the menu. A good way to test is to preview the flow Browse Entire Menu

More Options

Now that we’ve covered all of the essentials of using the Restaurant Toolkit there are other options for multi-language support and other tools you can connect to the Toolkit

Translating the template into multiple languages

The Toolkit was built in English but if you want to translate it into your native language, use this translation guide

Support

Have questions? Best place to get a response is in the Botsheets community

The flows are commented and if you’re familiar with the Manychat Flow Builder you’ll understand the logic, but you should refer to documentation on how to use the Manychat App in our documentation here:
https://support.botsheets.com/docs/manychat