Support & Training
Generic selectors
Exact matches only
Search in title
Search in content

TouchBistro Loyalty – Setting Up Your Customer Web App

Introduction

The Customer Web App is a platform that allows you to deliver a range of services via the web and your diner’s phones via a web URL. The Customer Web App currently supports the delivery of the two following TouchBistro value-added services:

1.  Loyalty

2.  Digital Gift Cards

This guide will show you how to set up the app, customize it, and pass it on to your customers.

Getting Started

Log into your loyalty portal and click Restaurant Web App Admin Page.

Buttons

The Buttons tab lets you select what features your diners can access from your web app’s Home screen. You can add the following buttons:

ButtonDescription

Locations

This will display the location of your restaurant. If you have more than one venue, this will display all venues using TouchBistro

Loyalty

This will open a screen on the diner’s web app that allows the diner to check-in via a QR code or view/claim possible rewards.

Custom

Custom allows you to provide and highlight an outbound link to one of your web pages, your TouchBistro Dine web page, or your online ordering page.

Overwrite CUSTOM with the button’s name, enter a brief description of the button’s function, and then enter an appropriate URL  Click Save.

If you want to include your TouchBistro Dine, reservation link, copy it from your TouchBistro Dine venue page.

If you want to include your TouchBistro online ordering link, copy it from the Share to Customer page.

For example, if you have specific curbside pickup instructions, you could create a Custom button that directs diners to a web page that gives such instructions.

To set up your buttons, do the following:

1.  Click and hold on a button and then drag and drop it into place on the app preview screen.

2.  After adding a button, you can customize the button’s name and descriptive text. Click Save.

3.  Click Save Changes when you’ve added all your desired buttons.

4.  If you want to preview your app, click View Saved App.

Design

Before You Begin

The Design screens allow you to customize your web app to match your restaurant’s branding. Before you begin to customize your web app, you will want to have the following assets prepared. For files, ensure they are available on your computer’s hard drive.

ImageDescriptionFormat

Your Logo

This logo will be displayed on your home screen. Consider if your image should have a transparent background.

960 px w / 714 px h

JPG/PNG formats

Background Image

You may prefer your web app uses a background image instead of a solid color.

640 px w / 1600 px h

JPG/PNG formats

Brand Colors

Backgrounds, Icons, buttons, and text can be set using your brand colors

Have your colors defined in hex format (e.g., #B123A2)

Fonts

If you have a font associated with your brand, you can use it in various places in the web page.

Your font must be TTF or OTF formats.

App icon

A square image that represents your web app on a phone’s home screen.

Have at least one 80×80
 px in JPG/PNG format.

Diner Contact Email

An email diners can use to contact you at via the web app.

n/a

Loyalty FAQ Link

A link to your website’s FAQ page explaining your loyalty programs.

n/a

FAQ Link

A link to your website’s general FAQ page.

n/a

Home Screen

Here you can add your restaurant’s logo as well as set the app’s background appearance. Click Save Changes when you’re done customizing your web app’s Home screen.

You can control the following design elements:

OptionDescription

Home Screen Top Image

This would usually be your restaurant’s logo. It should be no larger than 960 pixels wide and 714 pixels high. It has to be in PNG or JPG format (no GIF or TIFF formats).

Click Upload New Image to upload an image from your computer’s hard drive. If you’ve already uploaded some images, you can click Select Saved Image and choose one of those.

Home Screen Background

You can set either an image or a solid color to fill the app’s background. If you upload an image to be the background, it should be no bigger than 640 pixels wide and 1600 pixels high. It has to be in PNG or JPG format (no GIF or TIFF formats)

Click Upload New Image to upload an image from your computer’s hard drive. If you’ve already uploaded some images, you can click Select Saved Image and choose one of those.

Home Screen Titles

This section controls the size, color, and font of your button titles.

If you have your own font, one associated with your branding, you can use the Upload New Font button to upload it. It needs to be in OTF or TTF format.

Home Screen Description

This section controls the size, color, and font of your button’s descriptions.

If you have your own font, one associated with your branding, you can use the Upload New Font button to upload it. It needs to be in OTF or TTF format.

Gradient

This section defines the background color boarding your web app.

You should set this for diners using the web app on wider screens like an iPad or computer web browser.

General Screen

The settings on this screen let you customize your app’s Rewards screen. Click Save Changes when you’re done customizing your web app’s General screen.

You can control the following design elements:

OptionDescription

App Background

You can set either an image or a solid color to fill the Reward screen’s background. If you upload an image to be the background, it should be no bigger than 640 pixels wide and 1600 pixels high. It has to be in PNG or JPG format (no GIF or TIFF formats)

Click Upload New Image to upload an image from your computer’s hard drive. If you’ve already uploaded some images, you can click Select Saved Image and choose one of those.

Highlight Text

This section controls the size, color, and font of your reward names and other major titles on the screen.

If you have your own font, one associated with your branding, you can use the Upload New Font button to upload it. It needs to be in OTF or TTF format.

Regular Text

This section controls the size, color, and font of your button’s descriptions.

If you have your own font, one associated with your branding, you can use the Upload New Font button to upload it. It needs to be in OTF or TTF format.

Icons & Button Backgrounds

This section defines the fill color of your reward buttons and any on-screen icons.

Button Font

This section controls the font and color of the reward button’s name.

If you have your own font, one associated with your branding, you can use the Upload New Font button to upload it. It needs to be in OTF or TTF format.

Details

The Details screen allows you to customize the contents of the Help button at the bottom of the web app.

As well, depending on the diner’s device and browser, a diner has the ability to add your web app’s URL to his/her home screen and launch it similar to an app. You can configure how that home screen app appears.

You should complete the following fields:

FieldDescription

Name

This will be the name of your restaurant as it appears in a web browser tab.

Short Name

This will be the name that appears if the diner saves the web app to his/her phone’s home screen.

Help FAQ Link

This URL will be used if the diner taps the FAQ’s button under Help.

Help Email Address

If a diner taps Contact Us, this email will be used to auto-populate that email system’s To: field.

Loyalty FAQ’s Link

If a diner taps the Frequently Asked Question button at the bottom of the Home screen, this URL will be used.

App Icons

Upload icons to represent your web app if a diner adds your web app to his/her home page.

The following settings are not used by TouchBistro:

1.  Description

2.  Checks (leave unchecked)

Clean

If you’ve uploaded a lot of images you do not need, or you want to remove an old logo, click Clean and remove the appropriate image assets. This screen will only show you images not being used.

Passing on the Web App URL

After you’ve configured your web app, you are ready to pass the URL to your diners.

1.  From your portal page, click Restaurant Web App.

2.  This will launch the live web app in a browser. Copy the URL in full.

Return to Table of Contents

Customer Support

Our help site offers helpful guides, videos, step-by-step tutorials, live workshops, and more, for all TouchBistro products. If you can't find what you're looking for, our customer support team is available to you any time, day or night. And yes, even holidays and weekends!

Call us today

North America 1-888-342-0131
United Kingdom +44-0800-051-3311
Latin America +52-55-8526-2122
Rest of the World +1 416-363-5252
Contact
TouchBistro customer support representative wearing a headset and smiling