How to Create a Kiosk Flow

To create a new Kiosk flow, go to and select the ‘Kiosk’ module on the left-hand side of the list of tools.

Then select the orange button (+) New Flow

From the Template options, choose the first flow ‘Basic Flow’.

(This flow is the standard/default flow)

It will prompt you to name the new Kiosk Flow to continue.

It will automatically add the first page for you, the ‘Welcome Page’.

Let’s break down the kiosk view, pages, and settings.

First, in the upper right-hand corner are options: Save, a Lock Symbol, Down Arrow, and an ‘X’ to close the window:

Lock Symbol

This opens up the ‘Permissions’.

This option only applies to a multi-location establishment.

There would need to be a Parent / Master account setup in order to share it down.

Typically this does not need adjustments.

Down Arrow

This dropdown menu option is where to find 2 main parts, the Flow Settings, and Push an Update to Kiosks option.

The option for Flow Settings can be broken down into 3 compartments but first, let’s discuss the ‘Push to …’ options available.

The option to ‘Push to All Devices’ is referring to the ability to manually force push out an update over to any devices online.

Note that if a device is NOT online, it cannot receive this ‘pushed update’, therefore, a device MUST be online to receive a pushed update.

If you make an edit to or add something to a kiosk flow that is currently in use, that device will not automatically update to that version. In other words, any changes made to a kiosk flow that an iPad is currently using needs to have the kiosk update pushed to the iPad.

There are three things you can do:

1. Push an update to the iPad(s) from this kiosk page.

2. Force Close the kiosk app on the device and reopen it.

3. Power cycle the device.

These three actions are similar in that it will reconnect with the ‘current’ / most up-to-date version of the kiosk flow.

Keep this in mind when making edits to a kiosk flow, and also adding/removing an offer available for redemption.

The Flow Settings has three compartments to edit.

General

This is where you can change the name of the kiosk flow.

The Flow Settings have three options to choose from on the row at the top of the window.

Allows user to Change Name for the kiosk flow.

Also gives the option to add an action upon a ‘Timeout’ event.

Security Codes

Allows the option to add an optional Security Code to the kiosk flow.

Design

This option allows the user to change the ‘Back’ and ‘Next’ button color details.

Next, let’s look on the right-hand side underneath the ‘flow settings’ drop-down arrow, as every Kiosk Page will have these three settings to choose from:
Design

Page

Advanced

Design Settings

Keep in mind that different pages will offer different settings:

Camera Page

Fields Page

Waiver (Document) Page

Selection Page (Opt-In Page)

Offers Page

Identity Page

Video Page

Welcome Page

Message Page, HTML Page, and Splash Page all have very limited options but will be covered in more detail later in this article.

Some of the main takeaways for the DesignSettings is that this is where a BackgroundImage can be added for any page.

For the intended design of the background images keep in mind the positioning of the imaging. For example, the Welcome Screen will have the number pad on the right-hand side take up about a third of the screen.

The ‘Content’ option allows you to copy/paste HTML code.

Other options for this page allow you to edit the color(s) scheme. These colors are already set but can easily be changed.

Page Settings

The Page Settings also houses important settings.

First, this is where you can name the current page of the kiosk flow.

You can also edit the name of the button labels for the forward and back buttons.

You can choose to hide the Top Menu Bar, and Back / Next buttons by selecting the desired checkbox (Optional).

There are two universal settings for all pages under the page settings.

Transition Time

This option references the amount of time it will delay before automatically moving on to the next page. If left alone, it will show a grey 0 as a placeholder and not be used.
Typically this is set for a Splash or Loading page so that it will automatically display that page for a set amount of time.

Display Rule Filter

This option can be used to filter out who can and cannot view a specific page in the kiosk flow. Similar to other filters you can use any of the fields in CityGro to target certain audiences.

This is similar to the other pages where you have the ability to add a rule filter!

(Contacts / Automations / Blasts / SMS or Email Editor)

For Filter Settings, this example shows a rule that means only people who have NEVER checked in (#Checkins Less than 1) can see that page.

Another example would be that on the opt-in page, if they have already opted in (SMS On is = YES), then they won’t see the page asking them to opt-in again.

Advanced Settings

Advanced Settings is where you can find more important ways to configure the kiosk flow.

The first checkbox at the top is to ‘Sync’ information with our server so that it will update statistics in real-time. 

You can set the action or event that occurs from the dropdown menu.

(For example, Check-in Started / Finished, contact info updated, points used / offer redeemed)

There are at least two ping events during a check-in, once in the beginning and once at the end of the check-in process.

For example, by default, the Welcome Page will ping the server after the first page is completed to update the information to our server that a ‘Check-In has started’.

But the second ping event would need to be added.

This second event can be added before the last page, for example, the ‘Thank you Page’, could sync that a ‘Check-In has completed.’

Another important setting is the ‘Automatically Set Field Values’.

When selected, it will prompt you to add a field to set.

This example shows that this page will automatically set the ‘Spin to Win Counter to 0’, and the Time of the 1st Spin of the Day be set to 6 hours in the past.

The very last option is available to Add a Security Code. This can be set from other locations as well, but if desired to set a specific security code for a specific page, that option exists here. 

Most of the other settings on this page will not require an adjustment or setup.

So this would conclude most of the basic settings that are editable on any kiosk page.

Now let’s look at the different types of pages that can be set up!

There are 11 different kiosk flow pages!

Some of the pages are used more than others.

While they are pretty straightforward in their functionality, let’s look into some of the Page Settings for each of these different Kiosk Flow Pages.

Camera

The Camera Page allows the addition of an image to a contact profile.

The ‘Data Field to Store Picture’ has a drop-down menu but the only option to select is to set it as the Profile Picture.

There is an optional checkbox to Require a Picture to Continue.

You can also set the Default Camera to be the front-facing camera or rear-facing camera.

The last option Automatically Start Camera, you can set it to Always, Never, or only if the contact checking in does not have a picture on file.

Fields

The Fields Page is where you can add fields to the kiosk flow so that customers can input their data using the CityGro fields.

Click the (+)Add button to include a field to the kiosk page.

You can adjust how the field will appear on the kiosk, although it is entirely optional and not required.

This is an example of how this email field could appear on a kiosk:

The appearance of the field/text can be edited through 3 different settings: General, Advanced, and Filter settings.

General

You can choose to add/edit a Field label, and this text/label appears above the field.

There are also some checkboxes to choose from:

Require the field to be completed

Make the field Read-Only

Hide this field when completed

There are different input types and each type depends on the field type.

These input types are mostly straightforward, just keep in mind that if the field can include both numbers and letters it is still considered input type as ‘Text’ (like an address).

Advanced

This is where you can find the 3 options to edit text for the:

Prefix

Placeholder

Suffix

This is not required to complete but is available.

Filter

The filter settings are similar to the other filters that can be used.

The example below means that the field would only appear for a return customer.

The number of contacts that match the filter will appear to the right.

HTML

The HTML page is basically a blank canvas where you can input (copy/paste) your own HTML code.

There are no other options or settings available on this page!

Identity

The Identity Page can be used for circumstances where multiple people could sign up under the same number.

Common usage would be for a minor to check in at a gun range. So the minor could create a new identity under the same number.

Message

This Message Page is very similar to the HTML page, being that it is blank and allows you to copy/paste your own HTML code or message in the blank space.

The only difference is that the Message page allows for a Header.

Offers

The Offers Page allows you to add SmartOffers so that they will appear on the kiosk.

Once added they will be listed with any other already added SmartOffers.

If you create a SmartOffer, this is how and where you would Add a SmartOffer to the Kiosk. Once the offer is added, it should appear on the customer’s end so long as that offer is activated for that particular person.

You can also select the checkbox to ONLY show these offers, meaning that it won’t show ALL available offers from the account on the kiosk flow, but only those offers added to this page.

If you click on the edit pencil, it will take you to the specific SmartOffer and its settings.

This Offers Page also has a couple of unique settings on the ‘Page’ settings.

It allows you to associate a punchcard with the kiosk flow and gives the option to be able to adjust points right from the kiosk.

There is a special checkbox that pops up and it ‘Allows this Page to Change Points’. If selected, another option automatically appears asking about the Requirement for a security code to be entered to change the points.

You can choose between Never, Always, and When points are modified.

If you choose to allow the page to change points, we recommend requiring a security code to do so to prevent systemic abuse.

There is a Punchcard option, which allows you to attach a punchcard to this page and flow. It will also allow adjustment to the settings for how points are awarded to that punchcard.

Here you can adjust how many points are added for each check-in, and how long in between check-ins is needed before more points can be awarded.

Selection

The Selection Page provides a list of options to choose from on the kiosk flow.

Oftentimes this type of page is used for asking customers to opt in.

The example shows that if YES is selected, it will set the opt-in status:

SMS On and Email On to Yes.

You can edit the label/name for the selection and even use an image to ‘select’ the option.

Keep in mind you can also edit the ‘Header’ of this page from the ‘Design’ settings.

You can also add Filters on this page - either for the available selections to be chosen or for the selection to even appear for certain customers.

There is also a setting that allows for the available options to appear in two (or more) columns. This way the available selections can be arranged in a single column or appear.

You can also set it up so that only one button can be selected, and once one button is selected the kiosk flow moves on to the next page automatically (without hitting the NEXT button).

Splash

This page is typically renamed as a ‘Loading’ page, or even a ‘Thank You’ page.

Usually, a background image is added and the name of the page is changed but that’s about it for this page.

Think of this page as a temporary page that appears during the check-in process but then goes to another page.

Maybe this could serve as an opportunity to advertise an upcoming event or special sale!

A key takeaway is that this page will automatically include the setting to ‘Force Transition After 3s’.

Video

The Video Page allows you to upload a video to play when this page is reached.

Settings for this page include hiding buttons, automatically starting the video, or advancing the screen after the video completes.

You can also include (optional) controls for the video while it is playing.

Waiver

When adding the ‘Waiver’ page, in the page settings, it will ask which document you would like to attach.

If you have more than one waiver/document, it will list those that are available.

Once a document is attached, this kiosk flow page will automatically load the waiver/document to be completed.

There can only be one waiver per page, so if multiple waivers need to be completed, multiple kiosk flow pages will need to be added.

Welcome

The Welcome Page utilizes an ‘Identifier’.

This Identifier is what is used for people to check-in.

For the most part, a phone number is almost exclusively used as the identifier for check-ins, however, there is an option available to allow customers to check in using an email address. This option to check in using an email address must be added. 

To add this or any other option, simply click the ‘+Add’ button, and choose email address as the identifier.

Also unique to the Welcome Page is the Terms & Conditions.

By default, this will not need to be adjusted, but the options regarding information about the T&C with CityGro are available here.

Once you have added your pages they will be listed on the left-hand side.

You can click and drag to change the positions of the page if desired.

Notice that there are certain icons at the top and bottom of certain pages.

At the top there are 3 icons that serve different functions:

Copy    Duplicate Page     Delete Page

At the bottom, an icon will appear if there are settings included for that page.

Sync with Server     Has a Timeout setting    Includes a filter

Automatically set Field Value    Permissions

 

If you have any questions or would like someone from our team to review your Kiosk flow use the TextChat widget located in your account or email us at support@citygro.com