InstaFood WordPress QR Menu food delivery, pickup and dine-in

Plugin Install & setup #back to top

In order to use the plugin:

Unzip the main file (the file that you have downloaded when you have purchased the plugin). The plugin installer is 'plugin_name'.zip.
Log in to your Wordpress Admin Panel, go to Plugins > Add new > Upload. Upload the zip file that was discussed in the above topic.
Once you have uploaded the plugin, it automatically installs to your WordPress instance. Click the Activate button to activate it.

Settings#back to top

Once you have installed the plugin head to settings (Admin > InstaFood settings). Here you can set up the: General settings, Credentials, Web apps, Order options, Locales, tables & QR codes and Custom Css and JS

Credentials & APIs#back to top

Google Maps & Geocoding

The API Key will be used to get the restaurant geo-coordinates within the Admin General settings and for delivery, this way the max delivery distance can be determined when a user places an order (delivery).
This API Key is optional, if left empty the max delivery radius won't be required.

Both Geocoding API and Maps JavaScript API must be enabled within the Google cloud console.

In order to create the API key:

1. Go to Google Cloud Platform and create a project https://console.cloud.google.com/projectcreate.

2. Make sure you select the project from the top navigation, then click APIs and Services.

2.1 Click API Library, then Search for "Maps Javascript API", click on it, then click Enable.

2.2 Search for "Geocoding API", click on it, then click Enable.

3. Click Credentials, then click Create credentials > API key

4. Click Credentials, then click Create credentials > API key

5. Copy the API Key then paste it in the WP Admin > InstaFood settings > Credentials > Google API Key

6. Click Credentials, then click Create credentials > API key

Note! There is no need to restrict the API Key, it's only beeing used in the backend

Stripe Keys

The Stripe API will be used to process payments.
A webhook enables Stripe to push real-time notifications to the application, as an example, an order is marked as paid based on events received from Stripe. Find out more within the documentation.

In order to create the API key:

1. Log in to your Stripe account and from the bottom-right corner click Developers

2. From the top menu click API Keys > Create Secret Key

3. Copy the publishable key and secret key to their respective places within WP > InstaFood credentials > Stripe

Note! From the Stripe admin, top right corner, you can always choose to switch to developer mode, this way you can test it without having to use a real card. When you switch to developer mode, a new set of keys is being generated.

Note! When testing interactively, use a card number, such as 4242 4242 4242 4242 . Use a valid future date, such as 12/34. Use any three-digit CVC (four digits for American Express cards)

Stripe webhook

A webhook enables Stripe to push real-time notifications to the application, as an example, an order is marked as paid based on events received from Stripe.

In order to Implement a Stripe Webhook:

1. Log in to your Stripe account and from the top-right menu click Developers

2. From the left menu click Webhooks, then click add an endpoint

3. From the WordPress > Admin > InstaFood Settings > Credentials, copy the Stripe webhook endpoint URL and paste it to Stripe Endpoint URL

4. Click, Select Events then add all the events from Charge and all the events from Payment Intent

5. From Webhooks, click on the newly created webhook, then click Reveal Sign-in secret

6. Copy the sign-in secret and paste it within the WordPress > InstaFood Settings > Credentials > Stripe webhook endpoint secret

Google reCaptcha

reCAPTCHA uses an advanced risk analysis engine and adaptive challenges to keep malicious software from engaging in abusive activities on your website. Meanwhile, legitimate users will be able to login, make purchases, view pages, or create accounts and fake users will be blocked. ReCaptcha credentials are optional.
This API Key and secret are optional, if left empty the app will work without protection though

In order to create reCaptcha credentials:

1. Sign in to Google reCapthca https://www.google.com/recaptcha/admin

2. From the top left corner click the + icon (create)

3. Add a label, select reCAPTCHA v3, add the domain name where you installed InstaFood, then click save

4. Copy the site key and the site secret and paste it within WP > InstaFood settings > Credentials > Google reCaptcha.

Web apps section#back to top

Mobile web app

Select the page that will render the mobile web app within the front end.

Note! Changing the webpage will cause the regeneration of all QR codes.

Bill page

Select the page that will generate the PDF bills for orders.

Shortcodes [instafood_embedded]

Even if InstaFood is mainly purposed for mobile devices, there is the possibility to embed the mobile app within regular WordPress pages. In order to do that you can use the [instafood_embedded] shortcode.

The way it works: If the user visiting the website uses a mobile device will be prompted to open the mobile web app on another page, if the user comes from a desktop device the mobile web app will be embedded within the visited page.

Usage example

[instafood_embedded mobile_web_app_info="We've detected that you're visiting from a mobile device." button_label="Open mobile web app"]

Order options#back to top

From the Order options, you can enable Pick-up, Delivery or Dine-in, also the payment methods and other options as min order value, Max delivery, Delivery cost and Tipping percentage.

For Pick-up the following options are available:

Pickup start date (days no)

Pickup start date in days. Leave empty if orders can be placed right away. If the field value is 2, the user can choose the pickup day two days from the current date. For example, this feature is useful if a shop would sell birthday cakes that need a longer preparation time.

Pickup end date (days no)

Pickup availability in days. The value represents the maximum number of days a user can choose to pick up the order. Leave empty if orders can only be picked up only within the same day.

OrderSafeMatch

OrderSafeMatch technology uses a unique combination of colour and pickup number to easily verify orders and to ensure accuracy and simplicity. OrderSafeMatch also speeds up the curbside and in-store order pickup process.

Locales#back to top

Instafood supports two languages, the primary and the secondary language.

Set up locales used across frontend. Note! Some locales contain variables (ex: <%= orderPrepareTime %>) You can change / swap the order of those variables within the locale string according to your language. Note !!! Variables should not be re-named.

The plugin is translation-ready, the language files should be placed under the /languages. The easiest way to translate the plugin is by using the "Loco Translate" plugin.

1. Install Loco Translate plugin
2. Go to Admin > Loco translate > Plugins > Select InstaFood
3. Click New language, Skip template
4. Choose a language, Choose a location (choose /languages/instafood-{locale}.po)
5. Click start translation

Tables & QR codes#back to top

Instafood supports two types of QR codes:

General QR code

the general QR code is being used for delivery and pickup only. It does not hold the table information. As an example, the general QR code can be placed on flyers sent with a previous order.

Tables QR codes

In order to offer a better user experience, each table has its own QR code, this way the table is being identified automatically when the QR code it's being scanned.As for the restaurant staff to easily identify which QR code to assign to which table, all QR codes images will contain the table number.

Products, groups & choices#back to top

Products

1. Products can be added from Admin > InstaFood Products.

2. Each product must be assigned to at least one category. A single product can be assigned to multiple categories.

3. Categories that are not empty are being displayed within the mobile web app.

4. In addition to variants, each product supports Groups with choices.

Introducing Groups & choices

Choices and Groups allow unparalleled customization options for products.

1. Choices are similar with products, the only properties available for choices are the price and the name. A choice's price can also be set to 0.

2. An example of a choice could be a salad, or a cake, or an extra 100g of meat.

3. A single choice can be part of multiple Choice groups.

4. Choice groups can be assigned to products.

5. Each Choice group can be optional for the user to choose from or could have a minimum number of choices required or/and have a maximum allowed choices that the user can choose from.

Live orders & orders#back to top

InstaFood's orders admin implements a reactive user interface allowing the restaurant's staff to act with ease.

The live orders section retrieves new orders every couple of seconds, new orders are also accompanied by a discrete sound. Once an order is marked as accepted it will automatically be moved to the Orders section from where the staff can easily change its statuses (Accepted, Rejected, Prepared, Delivered and Closed).

Full details about orders are also quickly accessible.

Order payment statuses:

1. Pending transaction.

2. Payment intend succeeded.

3. Pending on delivery.

4. Failed.

5. Cancelled.

6. Paid.

Stripe orders have an initial payment status of Pending transaction. As soon as payment confirmation is received from Stripe the order payment status is set to Paid. All other orders have an initial payment status of "Pending on delivery". All orders that are set as "Delivered" will also be set as "Paid".

For orders that were intended to be paid for with Stripe but the user cancelled the process the payment status will be set to "Cancelled" and can be deleted by the restaurant staff.

Users & roles#back to top

InstaFood implements two additional user roles: Restaurant administrator and Restaurant staff.

Restaurant administrator:

The restaurant administrator user has access to all features related to InstaFood like: Customize the options, language, adding products, groups and choices, create/delete/update other Restaurant administrators or Restaurant staff users. The administrator does not have access to other parts of WordPress.

The Restaurant staff:

The Restaurant staff user has access to Live orders & orders & waiter call requests.

Product/categories re-order#back to top

Should you choose to change the order of the products and categories displayed within the mobile web app, we recommend the following plugins:

Post Types Order

Custom Taxonomy Order

Development#back to top

Should you choose to extend the current functionality, for the mobile web app or the admin Live Orders you should know:

To transpile the JS and Scss we've used Prepos (Prepros compiles your files, transpiles your JavaScript, reloads your browsers and makes it really easy to develop)

1. The mobile web app is located at "instafood/frontend/mobile-app". Open Prepos > Add project > select mobile-app/assets. That's it, now any change will be compiled automatically.

2. The Admin Live orders is located at "instafood/com/sakuraplugins/appetit/templates/admin/orders_management/" . Open Prepos > Add project > select orders_management/orders_assets. That's it, now any change will be compiled automatically.

Plugin update#back to top

In order to update, download the "All files" from CodeCanyon. The archive is named "InstafoodAllFiles.zip", unzip it and you can find the following:

1. The plugin installer ( instafood.zip )

2. The plugin uncompressed folder ( /instafood )

3. The plugin's documentation

Update method 1:

1. Go to WP admin, uninstall the plugin, remove the plugin and upload the downloaded "instafood.zip" installer.

Note! This method will override the existing plugin, not recommended if you already translated the admin

Update method 2:

1. Connect to your WP via FTP.

2. Navigate to wp-content/plugins/instafood.

3. From the plugin's uncompressed folder upload everything EXCEPT the language folder.

Thermal printing (advanced)#back to top

Remote thermal printing through printnode.com service.

Note! - This feature is experimental, it hasn't been tested with a real thermal printer.

To implement PrintNode:

- Create a PrintNode account.
- From the PrintNode's admin download and install the native client on your local computer that's connected to a thermal printer.
- From the PrintNode's admin, top nav, API Keys, generate an API Key.
- Go to InstaFood Settings > Web apps > Connect PrintNode.
- Add the API Key and save.
- Go to InstaFood Settings > Web apps > Connect PrintNode and click "Refresh connected printers".
- Once the printers have been retrieved, the remote print functionality will show up on order view/edit.
- Note! The actual print call is implemented within the "child/extended" plugin (see section: Extend the main functionality)
- Note! remote print can also be called in the background on certain events (see section: Extend the main functionality).

Extend the main functionality (advanced)#back to top

In order to extend the main plugin's functionality, we've introduced hooks and created a demo "child" plugin that you can use as a start point to extend the main functionality to fit your business. As an example, you can print, send emails, send SMS on certain order events. service.

In order to use the plugin:

- Unzip all files, you will find the plugin under the "instafood_extended_demo" folder.
- Modify/edit the plugin for your needs, upload it via FTP to your WP instance and activate it.

Available hooks:

instafood_manual_remote_print_request
instafood_new_order
instafood_order_status_changed
instafood_price_format_filter
instafood_extended_js_scrips

Version History (Changelog) #back to top

Changelog

                                        -----------------------------------------------------------------------------------------
                                        Version 1.7.0 - February 2, 2025
                                        -----------------------------------------------------------------------------------------
                                        Safe to override, changes won't break the existing functionality

                                        1. - Uplated php-stripe library to the latest version

                                        -----------------------------------------------------------------------------------------
                                        Version 1.6.0 - March 25, 2024
                                        -----------------------------------------------------------------------------------------
                                        Safe to override, changes won't break the existing functionality

                                        1. - Fix choice group ordering
                                        2. - Fix archive installer

                                        -----------------------------------------------------------------------------------------
                                        Version 1.5.0 - March 3, 2024
                                        -----------------------------------------------------------------------------------------
                                        Safe to override, changes won't break the existing functionality

                                        1. - Fix PHP 8 warnings

                                        -----------------------------------------------------------------------------------------
                                        Version 1.4.0 - July 14, 2022
                                        -----------------------------------------------------------------------------------------
                                        Safe to override, changes won't break the existing functionality

                                        1. - Add the possibility to exclude products from dine-in or pickup and delivery.

                                        -----------------------------------------------------------------------------------------
                                        Version 1.3.0 - July 8, 2022
                                        -----------------------------------------------------------------------------------------
                                        Safe to override, changes won't break the existing functionality

                                        1. - Include the table number when printing the bill. Note! This does not apply to thermal printers. For thermal printers, this can be achieved with custom code from the child plugin. Admin > InstaFood settings > Order options > Dine-in - Print bill: Include table no

                                        -----------------------------------------------------------------------------------------
                                        Version 1.3.0 - July 4, 2022
                                        -----------------------------------------------------------------------------------------
                                        Safe to override, changes won't break the existing functionality

                                        1. - VAT percentage - Allow decimals (Ex: 14.234)

                                        -----------------------------------------------------------------------------------------
                                        Version 1.3.0 - March 31, 2022
                                        -----------------------------------------------------------------------------------------
                                        Safe to override, changes won't break the existing functionality

                                        1. - Add option to show the call restaurant button on the homepage

                                        -----------------------------------------------------------------------------------------
                                        Version 1.2.0 - March 1, 2022
                                        -----------------------------------------------------------------------------------------
                                        Safe to override, changes won't break the existing functionality

                                        1. - Allow VAT percentage to be set to 0.

                                        -----------------------------------------------------------------------------------------
                                        Version 1.2.0 - January 31, 2022
                                        -----------------------------------------------------------------------------------------
                                        Safe to override, changes won't break the existing functionality

                                        1. Implement remote thermal printing via https://www.printnode.com (Experimental, has not been tested with a real device).
                                        2. Implement actions and filters (Easily extend the functionality via hooks without touching the main plugin's source code).
                                        Current hooks:
                                        - instafood_manual_remote_print_request
                                        - instafood_new_order
                                        - instafood_order_status_changed
                                        - instafood_price_format_filter
                                        - instafood_extended_js_scrips

                                        3. Implement a demo “child/extended” plugin, that will showcase different hooks scenarios.

                                        -----------------------------------------------------------------------------------------
                                        Version 1.1.0 - January 27, 2022
                                        -----------------------------------------------------------------------------------------
                                        Safe to override, changes won't break the existing functionality

                                        Implement the decimal price display admin option. Choose between the comma and dot-separated decimals. Ex: ($22.00 instead of $22,00). The formatted price is being shown within the frontend and Print bill.

                                        -----------------------------------------------------------------------------------------
                                        Version 1.1.0 - December 29, 2021
                                        -----------------------------------------------------------------------------------------
                                        Safe to override, changes won't break the existing functionality

                                        Hotfix - render the mobile web app on the homepage (Go to InstaFood > Settings > WebApps > Enable/Disable Mobile Web App displays on the homepage)

                                        -----------------------------------------------------------------------------------------
                                        Version 1.1.0 - December 19, 2021
                                        -----------------------------------------------------------------------------------------
                                        Safe to override, changes won't break the existing functionality

                                        - iOS scroll bug fix
                                        - fix/implement load_textdomain (translation)
                                        - Modified the translation (Locales section)

                                        -----------------------------------------------------------------------------------------
                                        Version 1.0.0 - December 1, 2021
                                        -----------------------------------------------------------------------------------------

                                        - first release

InstaFood QR Menu food delivery,
pickup and dine-in

Introduction

Requirements

Plugin Install & setup #back to top

Settings#back to top

Credentials & APIs#back to top

Google Maps & Geocoding

Stripe Keys

Stripe webhook

Google reCaptcha

Web apps section#back to top

Mobile web app

Bill page

Shortcodes [instafood_embedded]

Order options#back to top

Pickup start date (days no)

Pickup end date (days no)

OrderSafeMatch

Locales#back to top

Tables & QR codes#back to top

General QR code

Tables QR codes

Products, groups & choices#back to top

Products

Introducing Groups & choices

Live orders & orders#back to top

Order payment statuses:

Users & roles#back to top

Restaurant administrator:

The Restaurant staff:

Product/categories re-order#back to top

Development#back to top

Plugin update#back to top

Update method 1:

Update method 2:

Thermal printing (advanced)#back to top

Extend the main functionality (advanced)#back to top

Version History (Changelog) #back to top

Changelog

InstaFood QR Menu food delivery, pickup and dine-in

Introduction

Requirements

Plugin Install & setup #back to top

Settings#back to top

Credentials & APIs#back to top

Google Maps & Geocoding

Stripe Keys

Stripe webhook

Google reCaptcha

Web apps section#back to top

Mobile web app

Bill page

Shortcodes [instafood_embedded]

Order options#back to top

Pickup start date (days no)

Pickup end date (days no)

OrderSafeMatch

Locales#back to top

Tables & QR codes#back to top

General QR code

Tables QR codes

Products, groups & choices#back to top

Products

Introducing Groups & choices

Live orders & orders#back to top

Order payment statuses:

Users & roles#back to top

Restaurant administrator:

The Restaurant staff:

Product/categories re-order#back to top

Development#back to top

Plugin update#back to top

Update method 1:

Update method 2:

Thermal printing (advanced)#back to top

Extend the main functionality (advanced)#back to top

Version History (Changelog) #back to top

Changelog

InstaFood QR Menu food delivery,
pickup and dine-in