Online Ordering

This section will be around anything you need to know around the Online ordering.

Connect Online Ordering

The RIGHT way to set up Online Ordering

During the years we have seen many different ways of setting up online ordering, and we think we have pretty much found the right way to drive high conversion, meaning higher traffic, and as a result, more orders! from your website. In general, make sure the online ordering button is visible immediately to your customer, can be located and clicked with the fewest steps possible.

Best Example #1:

You can't miss it! Order Online X 3 times!

Best Example #2:

The following code should be embedded to a button:

<a href="http://YOURRESTAURANT.appfront.app/?openSignup=true" target="_blank">Signup</a>

(please ensure to edit the field "YOURRESTAURANT")

This code will open the following screens in a new tab:

Desktop version - Mobile version -

Branding

Home Page

You can set up 2 different home page - one for desktop and one for mobile.

Desktop

Desktop, home page:

Mobile

Mobile, Home page:

Dimensions, Image Guidelines

For more info about images - please find here:

Store Photos

Store photo is something that is very important - to make sure the customer recognize once he comes to the store.

Location Photo:

Same here, an option for Mobile and option for Desktop

Desktop

Mobile

Overview

All menu item photos are uploaded from the POS direct and synced automatically from the POS.

Setup:

Directly from the POS.

Toast:

Upload all menu item descriptions from POS directly.

Setup:

Logo

Overview:

Your brand logo will appear in a few different places:

Order receipt:

Set Up:

Fonts

At Appfront we also have the capability to align the platform's fonts with your brand fonts! In order to update your fonts we will need you to supply us the fonts (you need to buy them) or, the recommended option, is to send us a link to adobe fonts' library (see below)

The Recommended way

Your designer is probably familiar with Adobe Kit (should look something like this - https://use.typekit.net/12345.css ), but if not, you can use the following links:

Add fonts to your website

Google Fonts

Other recommended method is to use Google Fonts. Google Fonts are free to use and share. If you are using Google Fonts, simply provide us with their name and we'll upload it to our system.

Fonts files

Have your own special font, available only in a file? no problem! Just send us the font file and we'll upload it! Supported formats: TrueType Fonts (TTF) OpenType Fonts (OTF) The Web Open Font Format (WOFF) The Web Open Font Format (WOFF 2.0)

Email Receipt

You have the option to brand your email receipt as well.

Logo

As described previously in the logo section.

Email Template Background Image

This is basically don automatically. If you do have photos for menu items on the platform, Appfront will pull those photos automatically, and will print it in the email receipt.

Sender name

We can customize the name and the email the receipt is sent from. (*with additional cost)

Image Requirements

For all image rewuirements - dimensions etc, please go here:

This section will cover the different menu structure capabilities we support in our platform (that we had the time to write about).

Min / Max Modifier Selection

Overview

We have a very cool animation the prevent to add customers more modifiers in a modifier group. In the following example, the customer allowed to choose 3 modifiers:

Once the customer choose 3 modifiers, all other options, become unavailable:

Set Up

Our system synced automatically, the only thing you should do is make sure the set up in the POS defined as follows:

Modifier Description

Appfront pulls the information directly from the POS, for example, Toast:

Multi Select Modifier

Overview

Choose the amount of modifiers (specified number), using the [+] and [-].

You can also limit the max selection for all group, in this example, 12 cookies.

Set Up

Once you set it up - our system will be synced automatically

Allergens

Overview

In this guide, we will learn how to configure allergens for your business and how to add them to a menu item. Allergens can be configured and view on the menu item level, and will be presented next to each item.

IMPORTANT - Appfront Do not take any responsibility for any issue that might come up with your customers.

Customer Facing Preview

Once you set up the Allergens on Appfront portal, the customer will see that in a few places on the platform.

Allergens Menu:

Once you click on this button, a pop up with all allergens icon and description will be appear to the customer. Icons and descriptions it's something that you add by yourself on Appfront portal.

Modifier level Allergens Description

How to set up Allergens:

Allergens are general and will be available to configure for every menu item. In order to create a new allergen, you will need to give it a title and a description (optional). The title will be used to describe the allergen icon to the user in the allergens info list in the app. Further description is optional.

Tags:

The tag is something unique for each allergen and can be used to substitute the icon in textual names within the modifiers and toppings - once you set a tag you cannot change it, so think about a good tag to describe the allergen. A tag has to be wrapped in [ ]. In order to add the icon to a modifier name - you can define an allergen of Gluten Free with the tag: [GF] and change the "Gluten Free" modifier to : "Gluten Free [GF]" and this will result in the following presentation:

Images:

In the image category, you will need to upload an SVG file for the allergen.

Adding Allergens to the list:

Add the title, Description, Tag and image and press "save".

Allergens List:

One you added an allergen, it will be added to the list:

Now that we've added an allergen to our list, we will review how to add them to the actual menu item. So first we need to go to our menu (App Menu tab on current page). We will choose our item from the categories and click edit. You will see now, an allergens category on the menu item. When clicking on it, a list opens up of all the allergens that we just configured. You can choose the allergens that are applicable for this menu item, add them and click save.

Congratulations! You've learned how to add and configure allergens for your business, you should be able to see the change in about 15 - 30 min.

You should only add Tags, and it will happen automatically

Toppings (Half / All)

In order to correlate between WHOLE toppings and HALF toppings, the Appfront menu sync process makes connections according to names.

In cases where your toppings show up with only whole toppings, please check the names of you toppings - many times the names in the Whole and the Halves are different:

Modifier Groups Positioning

In order to control the order of the modifier groups position / order, you will have to access the Appfront back office. Please see the following example:

Customer Facing at Appfront

Group 1:

Group 2:

How to swap group 2 with group 1:

Under the Appfront back office, locate them menu item, under menu section:

Drag and Drop:

Click here

See link to Video:

https://www.loom.com/share/7b106902ee7d40ad9ab9be6cc9503502

First of all, using master menu for multi unit chains this is probably the best thing to do. Appfront platform support different types of menu level. All stores can have one unified menu, or multiple menus, one for each store. The master menu functionality meaning is that all stores share the same menu items ids.

Different stores can still have different pricing for same menu items, but share the same ids.
Each stores also might have different menu items (for example - some can have beers and other not)

But for all shared menu items - there are share menu items ids.

Very important - with master menu, when you update one menu for specific store, you must push update all other menus to avoid possible out of sync solution.

Bad example - need to publish all stores:

POS Items

Each menu item MUST be connected to a POS item.

This short presentation explains about POS items, and how to create and connect them to menu items:

1MB

POS Items - Creating and Linking.pdf

pdf

Visibility On/Off

There is an option to turn On/Off category visibility on demand.

Locate the category and click on edit (hover the category with your mouse)

Just toggle on/off -

Time Visibility

Category Order

Overview

Appfront allow you to change the menu category order. This should be done from the Appfront back office. The main reason for that is that sometime, you would like to have one order in the POS and other at Appfront platfrom.

How to change the order?

Please go to menu section under configuration:

In case of chain - Filter the right view according to the location:

This is an important step! - you need to make sure you are looking at the right menu if its not centralized / Master menu solution for all chain

The only thins you should do now is to "drag and drop" the menu.

Once completed - you should wait until the next sync (~30 min) - executed.

Grouping - items to category

Delivery

Delivery Price

Appfront platform support almost any possible pricing structure, from basic to advance/complex options.

Different price for different Zone

Each location/store might have multiple delivery zones. You can create different price for different zones and the set up will be under the location page.

Go to the location page:

Look for "Delivery Areas" and press edit

Fixed Delivery Price

You can set up a fixed price for delivery

Advanced Delivery price

You have the option to have flexible price, that change according to the order check size, with different ranges.

Click on "Add" advnce price:

Add range:

Done

Free Delivery > $30

In order to set up free delivery the only - Go to - location edit:

All orders above $30 will be free

Connect External 3rd Party Delivery

External means a company that AppFront is not fully Api integrated (Currently we integrated with Doordash Drive and Postmates. Read more about this integration here:

pageDispatch - 3rd Partys Delivery

If you would like to add External company. you should do the following:

Go To:
> Configure
> > Locations 
> > Edit
> > > " Add More Senders"

Every email that you will add here will receive the every order

Click and add the email:

Alcohol Delivery

In order to mark a a category as alcoholic, which will force the dasher to capture photo ID at dropoff, you can select the "Contains Alcohol" tag within the alcoholic category.

Once this tag will be selected, each delivery that contains alcohol will be flagged by passing: "contains_alcohol": true to DoorDash.

Curbside - I'm Here!

This feature will allow you customers to notify you when they arrive the restaurant - with just one click! (relevant for Curbside and mobile view\mobile apps only!)

When the customer will finish placing their order, they will a small button, as seen below:

The customer can change the button's position, and it will remain in the app until the customer will click on it. Clicking on the button will show the order's details, and the customer will be able to confirm sending the notification, open Waze for directions - or archive the message (hence - the message won't be sent to the restaurant).

Confirming sending the message will send another order to the kitchen - with a text saying that the customer is here!

To enable this feature, please contact our Support team at support@appfront.ai

Drop - Off (Neighborhood)

Serving Option Setup

Enable / Disable

In order to disable serving option you'll need to check "Hide this serving option"

Disable Serving Option in location

In order to disable a serving option in a particular location, click the "Unavailable in" field inside the serving option and select the location(s) you'd like to remove:

Serving Option Name

You can edit your serving option name. For example - pickup / order ahead etc.

Serving Option Description

Set Up

Edit description under the POS:

Enter the text:

Customer Facing

Delivery Zone per Serving Option

For every serving option you can define different delivery zones.

Edit location:

Choose the delivery Option you would like to set up delivery zone:

Timing

Ordering timing set up is different between the serving options. This section will explain how to set the up the timing option for each serving option

Delivery Hours

Related to the delivery area, because every delivery area can be set with different times.

Click edit, and scroll down below the map:

You should click on the "watch sign". and a pop up will be opened.

And then just click on the numbers to edit.

IMPORTANT - 24H clock

At the end dont forget to "Save Changes"!

Self Check:

We do recommend to try and place a delivery at the end - and make sure the time was updated (should take up to 20 min).

Do you have menu items / Category that available only in specific times? No problem!

This is something you will have to set up in AppFront's portal (we currently not pulling the time from the POS as part of our menu sync, and it has to be synced manually)

Click on the Edit sign -

IMPORTANT - before saving, you have to choose the locations (stores) and days, otherwise - it won't be saved.

Adding days. locations:

And, don't forget to SAVE:

Delivery Time

The time it takes you to delivery the order to your customer

Set Up

Edit Location:

Edit Delivery Zone (Choose one zone): - you will need to scroll down.

Update the Delivery Time:

And SAVE.

Customer Facing

Order Confirmation Email Update:

Online Ordering Platfrom:

The FIRST available ordering time:

First available ordering time =

Current Time + Delivery Time + Prep Time

Prep Time

Preparation time (Prep time) - how long it takes to prepare the food. It actually influence ONLY on the "First available ordering time".

Set Up

You can set up different Prep Time for Pick Up / Delivery

How to video

Customer Facing

Scheduled Prep Time

In case you want different prep times for peak hours, you can use our "Order Scheduling" Module and set different prep times for specific time intervals and dates.

These changes are applied to your online ordering immediately (could take up to 1 minute to apply between refreshes).

1) Go to our New (Beta) section > Order Scheduling. 2) Click on "Add new scheduling" 3) Set the "Scheduling Event" to "Prep Time" and the prep time value below it. 4) If this is for the holiday season for example, you may set a date range. 5) If this is for particular hours of the day or for particular days of the week, click on "Add Hours" 6) Add the relevant locations and serving options 7) Once you've finished, click the "Publish" button at the bottom and if you want to enable this, switch the toggle on the top to "Enabled".

Future Ordering

There are 2 types of future ordering options - both can be controlled on Appfront back office

Same day future order
Schedule Order (different day)

The default is both options are enabled.

Store Hours

Click to edit.

At the end - scroll down and SAVE

Store Opening Time Frames

If you would like to creates 2 different time frames for store opening - you should do it under menu set up. You can defined different time frames for different serving options.

Click on "12 Time Frames" button - and add Time frame:

Schedule Store Closing Hours

Please click here.

Order Throttling

Choose how many orders can be accepted in time interval, for example, 15 orders for every 15 minutes.

See video below:

Note that you can also enable this feature without selecting dates or hours.

Auto Order Throttling

The feature will allow you to pull and mimic the order throttling and prep time from your POS. This option is currently available in limited POS companies:

Toast Tab

The parameters will be pulled directly from your Terminal

You can also change it from your Orders Hub - see THIS article by Toast.

Order Notification

Text when ready

This option is related for Pick up and curbside only. Please note that there are 2 modes - with KDs and without KDs from the POS, and another option to send directly from Appfront portal.

How to set it up

In order to set order notifications, go to the Appfront portal > Configure > Locations > Select a location:

Once inside the location page, scroll to the bottom right side of the page until you see the following settings ("Enable Text message when order ready"

Notifying customers of Order Ready

In order to activate text messages for order ready from the activity log, set the following parameter:

After saving the location, you will see for each pickup/curbside order in the activity log on the Appfront portal:

Notify when ready from KDS

When toggled on, an SMS notification will be sent once the order is marked as "Ready" from the KDS (Toast POS only).

Notify (without KDS)

When toggled on, the SMS notification will be triggered once a menu item is added to the order from the POS. We recommend creating a dedicated menu item for this and setting this item as trigger:

Notify from Appfront Activity Log

Location Confirmation

It is optional to add a confirmation modal before placing an order:

Please reach out to support@appfront.ai if you're interested in activating it.

Order Failure

Delivery Failure

Order Routing

Our platform is able to route your orders to many different sources apart from the POS.

Via Fax

In order to configure orders to be sent to your fax, you'll need to have this option chosen on your location's configuration page and add the following parameters for this location:

shouldWaitForTransactionId ; false

faxNumber ; Add your Fax number as the value

Via Email

In order to configure orders to be sent to your email address, you'll need to have this option chosen on your location's configuration page and add your branch's email address:

IMPORTANT - The order parameters should still be configured as usual when this option is chosen. Make sure they are configured correctly while the 'POS' 'Send Order VIA' option is chosen.

Failover (Automatic)

In order to have orders sent to the next available platform after the first attempt failed (for example, send the order to your fax after the connection to the POS failed), you'll need to add this parameter to your location:

shouldCancelOrderOnFailure ; false

Tips

Tips can be added to any serving option, mainly for Delivery and pick up. We supoort both percentage (%) and customed tips.

Delivery Tip

Disable / Enable Costumed Tip

We can disable the custom tips with the following toggle within the location editor:

Setting the tip options

Use the following parameter in the location editor:

tipOptions_SERVINGOPTION

for example: tipOptions_pickup - 0,10,15,20

Setting Default Tip

Pickup: defaultSelectedTipOption_pickup Delivery: defaultSelectedTipOption_delivery

For example - setting a 15% tip default for pickup & delivery:

Pick Up Tip

There is also an option to set up Tip for pick up. The Tip will appear in the checkout page, same as delivery tip:

Set up:

Tip Reporting / Back Office

There are 3 ways to mark tips:

Tips as service charge - all tips will be marked under the service charge field, meaning that you will need to take care of tips management. This option is usually used when using 3rd party delivery fulfillment services
Tip Pool - all tips will be marked under the POS management. Basically the tip will be attached to the current employee that logged in to the POS.
Tip for specific employee - create a "fake employee" that all tips will be attached to this account

As a service charge

We can report tips as a special service charge that would be pooled together. This is good practice for 3rd party delivery as they can invoice you directly for those tips.

How to sum the data?

In Toast go to Analytics & Reports > Sales and in the "Service Charge" bracket you'll have a "Delivery Tip" article with the amount of tips pooled.

This is how it is printed on the receipt:

As a tip

The other way to report tips as "tips", like they are printed in Toast. This will allow you to pool tips received from Appfront orders with the rest of the tips that are handled in the store.

This is the most recommended way of pooling tips, as it is reported exactly as Toast planned and is easier to export a report of the pooled tips.

If you choose this option, you can also pool all tips to a selected server. You can read more about this here:

Toast POS SetupAppfront

How to sum the data?

In Toast go to Analytics & Reports > Sales and at the top left you'll have the total summary of Tips pooled. By default it will display all tips, not only online orders.

This of course is to be expected, as in this setting the tips are meant to be exactly like the tips that are gathered in the store.

This is how it is printed on the receipt:

Please note: some states may account for service charges as income and may tax you for service charges. If you're unsure to the legal status of Tips vs. Service charges, we recommend consulting with an accountant.

Appfront is not liable to any tax regulation incurred due to the selection of pooling tips as a service charge.

Tip Values

Serving Charge

You can add additional service charge for any serving option automatically.

Type of service charge

Fixed - fixed $$ for every transaction
Percent - % $$ from every transaction

Appfront Set Up

Go to:

Enable the service charge in the Appfront side

Create Service charge in POS

Connect POS side

Please notice - this is critical step.

Please connect Appfront's support (support@appfront.ai) and ask them to connect the new service charge. Otherwise, would be gaps in reporting.

Payment Methods

We support both Credit card and Cash options.

IMPORTANT - Payment methods are location based. Meaning, if you are a multi-unit chain, you can set up different locations with different payment methods

First step - go to locations:

Cash

Scroll down and/or search for: "Cash Payments"

Credit Card

Scroll down and/or search for: "Credit Card Payments"

This is something you will have to set up in AppFront's portal (we currently not pulling the time from the POS as part of our menu sync, and it has to be synced manually)

Special Request

Checkout Page

Spcial request, i.e. comments on the check out page, appears by default ONLY in delivery orders.

Item Level

Customer Facing

Set Up

Update comments on item

Utensils and #diners

It will be printed on your receipt.

To configure, please see https://appfront.gitbook.io/portal/menu-editor/setup-tab#fixed-remarks

Tickets Printing

Tickets printing its something that usally very coupled with POS and configured there. AppFront sends to the POS the order time, and the "decision" when to print, is done on the POS side.

Prep Time

Toast:

Immediate Printing

Toast's default printing of a future order is the amount of prep time set in Toast before the scheduled time.

For example: if an order is placed on Monday at 4:00 PM and is scheduled for Wednesday at 2:00 PM, and the prep time is 30 minutes, it will only print on Wednesday at 1:30.

However - Appfront has a feature to circumvent this behavior.

If you choose this feature it will behave the following way:

If an order is placed for later today (customer places an order on Monday morning for Monday afternoon), the order will print as soon as it's placed with an item that prints the actual pickup time (see image below).

If an order is placed for a later day (customer places an order On Monday for Wednesday), the order will print on the day it is due at 8 AM (following the example, on Wednesday morning), with the comment of when the customer chose to pickup the meal.

If you choose for the order to print immediately, it will not fire again.

Future printing

Meaning, printing the future time minus prep time. This is a set up in the POS

Tickets Routing

Routing to the right prep station is configured in Toast POS.

Double Printing

Issue was fixed in Toast - 07/2020.

Please find how to disable the double printing

Not Printing

2 options before reaching out to your POS support:

1) Change from Wifi mode to Ethernet

This is according to Toast support

2) Change approval mode

Switch to "send orders directly to kitchen"

Deals and promo codes are a great tool for marketing! A promo code can be attached automatically or by entering a text promo code.

15% Off code for Pick Up

Create new deal:

Leave the "promo code" field if you like the deal apply for every order:

Set the deal type:

Customer Facing:

Reporting

Sales Report (Toast)

Order notification

Appfront system allow you to receive an order notification for every order received in the platform. You can set it up for store level, i.e., for each store, different people can receive the notification.

What type of notifications?

Emails
Text msg

Please notice - text msg will require additional cost.

How to set it up?

Under the locations' set up:

Click edit and search for: "Add more senders":

Choose email:

Add your email and/or phone number.

Appfront Back Office

POS

Appfront is fully integrated with your POS (We do have a stand alone solution as well (in that's case - skip the POS section) - and all transactions, either credit card or cash, are reported to the POS, and marked under dedicated serving option and/or payment type. In order to confirm the money you received from Appfront, you should check your POS only and can confirm with the data reported on Appfront's back office.

Toast

Appfront is integrated with Toast payments directly. Meaning that all transactions are processed via Toast's processing and will be deposited and have the same terms as you have with Toast.

In order to check how many transactions were in Toast via Appfront you should do the following (inside Toast's back office):

Choose the dining option (Appfront is marked directly to specific dining options):

Choose Appfront's dining options:

Click on update, and scroll down to see the results:

This is the total amount mapped for Appfront's dining options, i.e., all transactions were made via Appfront.

You can also check the dining options:

Appfront Weekly Report

Transaction Monthly Report

Troubleshooting

Toast POS

AppFront and Toast are fully synced, so any change you make in Toast is reflected automatically in AppFront.

Currently there is only ONE update per day (this is related to Toast POS menu export)
The update takes place anytime between 3am-8am (local store time)

Different Pricing in Toast Vs AppFront Email notification

Toast is the priority. AppFront's email is used for backup, for notifications, and for the menu structure export. Usually the differece is that Toast charge for the tax - and we aren't

App Rounding / Sales Tax Adjustment

Once in a while, you might notice, that there is additional line says "App Rounding" or "Sales Tax Adjustment" on the customer receipt / check. This is an auto mechanism solution, to make sure that the check balance due is Zero (0).

Check Rounding Example:

The Root Cause - Different Tax calculation Mechanism

Until now, Toast supported item level tax calculation. Around last week (May 2020) they started to launch check level tax calculation. Only small percentage of customers received this update. In order to avoid problems, Appfront tax calculation set up should be the same as Toast.

(Sum all items) X Tax = Final Amount

Toast calculates tax as follows:

(Item 1) X Tax + (Item 2) X Tax + (Item 3) X Tax + ...... = Final Amount

Which might cause a few cents differences (either Toast or Appfront will charge a few cents more - depends on the rounding up/down)

In the Example above: (Tax rate - 9.86%)

How to check how much Rounding gaps do I have (between Appfront & POS)?

We know that you probably worried about the gaps, but we can assure you shouldn't. There is an easy way to check it out. Go to your back office and follow the steps:

Choose More and filter by "Dining Options":

And then, filter ALL dining options related to Appfront:

Run a report for the last 30 days:

So how much are the gaps?

Scroll down to "Rounding" under "service charge" - and this is the number:

0.83 cents - this is the gap between Appfront to Toast.

How we should handle it?

The avg. gap is about $1 more/less per month for high volume restaurants. Our last update was that Toast is working on a new tax calculation method (per check and not per item), and should be deployed around Q1-Q2 2021. Until then, we will keep use the rounding mechanism as the best option.

Chargebacks

Chargebacks are painful, no question about that. Appfront support some extra safety layers, depends on the processor we offer different security layers (with First Data, Worldpay we have the highest security option.

What should I doo when there is a chargeback?

You should work directly with your processor. Appfront is not part of it. For First Data, Worldpay (and some others) - we offer an additional security layer (check with your account manager).

Toast Processinig

Appfront utilizes Toast Payment processing, the regular chargeback protocol is followed on Toast Backend to dispute those charges. Please keep in mind that any online credit card transaction will be equal to a keyed in Credit Card, exposing yourselves to potential chargebacks.