Smartlink Apps | Kiosk
Introduction
The following article has been written to detail how our standard Kiosk app can be set up and used for. We have also detailed all of the available options associated with Kiosk features, POS, Styling and Renderer Options menus. The Kiosk app itself was specifically created to provide an instore experience for a variety of different product types such as blanks and virtuals.
Key features of this smartlink app include the support of 2D products, no need for CSS to customise menus, ability to be internalised for multiple langiages and choice between a portrait or landscape based kiosks.
The app is intended for use on instore kiosks and larger screen sizes and may not display desirably on smaller screens. How To Set Up A Kiosk App
To set up a new Kiosk app users need to head into the Settings menu and select the "Smartlink Apps" option highlighted below.
Once in the "Smartlink Apps" menu simply search for "Kiosk" or select it from the available default options.
Here you can set up new "Configurations", "Language Packs" and "Details" from within the sub menus.
We have broken down each section of the submenus in the remainder of this article.
How to Set A Kiosk Configuration
The following tables added below outline the available configuration options that can be used to tailor the App to meet specific requirements. To access every menu simply click the arrow pointing down and the menu will expand for you to customise.
Within the setup of configuration there are multiple menus detailed below for General setup and Features menu
Once created users will be left with a unique 15 digit config code that can then be used to add config to the smartlink.
General Menu
The general menu will allow you to set the name of your config as well as the ability to enable multiple different locale options. This menu has been shown below.
Locale options link into Language packs which has been detailed further down in this article. Essentially these act as app translation locales that can be listed into this menu for languager or terminology translations to key elements of the app such as "Add to cart", "add text" or "add Image".
Features Menu
The following table details every single option that can be enabled within the Features menu located on your set configuration.
Option Name | Setting Option | Description |
Enable Image Upload | Toggle | Enabled by default, this allows users to upload an image to the image upload option. |
Enable Facebook | Toggle | Enables the option to upload images from your Facebook account. |
Enable Flickr | Toggle | Enables the option to upload images from your Flickr account. |
Enable Instagram | Toggle | Enables the option to upload images from your Instagram account. |
Enable Dropbox | Toggle | Enables the option to upload images from your Dropbox account. |
Enable QR | Toggle | Enables the option to upload images from your other devices by scanning a QR code. |
Enable Remove Background | Toggle | Toggles visibility of the remove background tool. |
Enable Products | Toggle | Adds an additional menu for a Product Selector to be used in the App. Please note that this only works if the Smartlink contains the necessary pc=xxxxx parameter to reference a product category |
Enable Product Placement | Toggle | With this toggle enabled there will be options to place image and text on the products, this is usually fixed areas so is disabled by default. |
Product Search | Toggle | Allows a search of product names when the products tab is enabled |
Textual Product List | Toggle | Requiring the use of a Product Selector, this will change the Product display from thumbnail preview to a named list. |
Persist State Between Products | Toggle | Changing between products in the Smartlink will retain your personalisation - this requires use of a Product Selector. |
Implicit User Image Gallery | Toggle | Requiring the use of Image API V3, this creates a dynamic image gallery in the app from the images the user has selected. |
Persist Implicit User Image Gallery | Toggle | Implicit user image gallery will be retained if user switches product. |
Display Category & Product Names | Toggle | Enabled by default, this will display the category and product names set in Catalog. |
Desktop Version | Toggle | This app is designed for kiosk environments but this can be enabled to allow for users to load the app into a desktop version. |
Display Add Your Text At The End | Toggle | With this toggle enabled an option to add text to the product will be displayed st the end before heading to the POS input fields as a way to force customers to add text to their product. |
On Screen Keyboard | Toggle | With this enabled an on screen keyboard will appear allowing users to use their mouse or fingers to enter text - this is ideal for any apps set with the "Desktop Version" toggle enabled. |
Display Price | Toggle | Enabled by default, the price of the products will be displayed for customers to see, this will only work assuming the products have accurate pricing set within the ecommerce section of a products setup. |
Use Image Area Name In Text | Toggle | With this field enabled the name of any of the image areas will appear in the app. |
Show Aspects | Toggle | With this toggle enabled the aspects of the product will be disable, this is disabled by default as for some designs you may just want the customer to see the design on a garment and not the blank back of a garment. |
Text Colour Spectrum | Toggle | Enabled by default, this adds an interactive colour picker tool to the Text Area menu in place of the standard text colour swatch. |
User Image API V3 Upload Processor | Dropdown | From this dropdown you can select from the different types of image processors they wish to set with their products. The options include "Standard", "Embroidery" and "Pantone". |
Layout Version | Dropdown | There is a dropdown to select from 2 different versions of the app layout, the options are for 1 and 2 and must be defined here. |
Max Number Of Characters For Inputs | Input Field | Here a max number of characters can be set by default for all associated text areas connected to the products. |
Default Selected Country In POS | Input Field | Enter the default country to be displayed when the POS pop up form loads. |
Info Text 1 - 2 | Input Field | These field will display within the app to offer some information about the kiosk, products or company. The choice of what is displayed is up to you. |
Below gives you a look at how this menu will appear for users.
Simply scroll through the features menu and once happy with your changes select "Save" and move onto the next menu in the sequence.
Point Of Sale (POS) Menu
The POS menus refer to point of sale elements such as receiving customer details or validation when an order is placed through this type of Kiosk app in a kiosk environment.
Option Name | Setting Option | Description |
Enable POS Details Popup | Toggle | Disabled by default this enables a pop up form to capture customer address details, can bypass a payment gateway or be connected to stripe. This is used for point of sale smartlinks like Instore Kiosks. |
POS Validation | Toggle | Enable to make POS Pop up form fields mandatory, this is used to collect customer data. |
Name | Toggle | Enabled by default this displays the customers name within the POS details popup window. |
Telephone | Toggle | Enabled by default this displays the customers telephone number within the POS details popup window. |
Email | Toggle | Enabled by default this displays the customers email address within the POS details popup window. |
Address 1 | Toggle | Enabled by default this displays the customers address line 1 within the POS details popup window. |
Address 2 | Toggle | Enabled by default this displays the customers address line 2 within the POS details popup window. |
Town | Toggle | Enabled by default this displays the customers town within the POS details popup window. |
Postcode | Toggle | Enabled by default this displays the customers postcode within the POS details popup window. |
Country | Toggle | Enabled by default this displays the customers country within the POS details popup window. |
Additional POS Terms | Toggle | This option requires the POS Details Popup being filled in and the POS Terms will display once filled in. |
Additional POS Terms Mandatory | Toggle | This toggle makes it mandatory that the customer reads the POS Terms. |
POS Shipping Country | Input Field | Enter the default country to be displayed when the POS pop up form loads. |
Additional POS Terms Read More URL | Input Field | This allows you to set a URL that may contain more information and terms being displayed on a website. |
Below gives you a look at how this menu will appear for users.
Simply scroll through the POS menu and once happy with your changes select "Save" and move onto the next menu in the sequence.
Styling Menu
Styling refers to the appearance of the app and how to create external CSS that can be used against your app.
Option Name | Setting Option | Description |
External CSS | Input Field | Here you can add external CSS to change the appearance of the smartlink. |
Logo Image URL | Input Field | An image URL can be set here which will act as the main logo within the kiosk environment. |
Banner Image URL | Input Field | An image URL can be set here to act as a banner image to go across the top of the main kiosk screen. |
Footer URL | Input Field | A URL cn be set here to go to the footer of the kiosk, an example of this could be your main company URL so it can be seen as branding within your Kiosk app environment. |
Categories Columns | Input FIeld | By default a value of 2 will be seen here, this will take the product categories of which your designs are found and ensuring images are added to these categories these will appear within the app. |
Products Coumns | Input Field | By default a value of 2 will be seen here, this will take the product options of your kiosk designs. These will appear within the app as clickable product design options in the kiosk. |
Category Title | Input Field | This will be the main category title that is visible within the Kiosk app, the title of "Instant Gifts" is set by default for this field. |
Subcategory Title 1 - 2 | Input Field | This will be the subcategory title visible within the app, preset text of "Choose Your Collection Below" or "Choose Your Character To Start Creating!" will be found in these fields already. |
Subcategory Subtitle 1 - 2 | Input FIeld | A Subtitle can be added to the subcategory such as alert about lead times. This field is left blank by default |
Products Title | Input Field | A Title can be set for the products to show when displayed in the kiosk app, some default text of "Choose Your Product" is set here. |
Scrollbar Colour | Input Field | A default hex colour of turquoise (#005161) will be set here to set the scrollbar colour, simply overwrite with your relevant hex code and change the colour. |
Search Colour | Input Field | A default hex colour of turquoise (#005161) will be set here to set the search bar colour, simply overwrite with your relevant hex code and change the colour. |
Button Colour | Input Field | A default hex colour of turquoise (#005161) will be set here to set the button colour, simply overwrite with your relevant hex code and change the colour. |
Finish Button Colour | Input Field | A default hex colour of turquoise (#005161) will be set here to set the finish button colour, simply overwrite with your relevant hex code and change the colour. |
Back Button Colour | Input Field | A default hex colour of turquoise (#005161) will be set here to set the back button colour, simply overwrite with your relevant hex code and change the colour. |
Footer Colour | Input Field | Simply set your relevant hex code and change the colour of the footer which is white be default |
Loading Image URL | Input Field | A loading image can be stored here, an example could be a spinning gif which will display when anything is loading within the app. |
Category Arrow URL | Input Field | A specified image can be set here to display as the in app mouse when working through the setup. |
Flag 1 - 5 URL | Input Field | There can be up to 5 different flag URLS that can be set, these are flags that can link out to different popup windows within the Kiosk app. |
Flag Image Height | Input Field | The flag image height can be controlled by entering a value here, a value of 30 pixels will be set by default here. |
Flag Image Width | Input Field | The flag image width can be controlled by entering a value here, a value of 50 pixels will be set by default here. |
Badword Set | Input Field | Set up a blacklist of certain words that cannot be typed by a user. List the ref associated with the bad word list created within Catalog. |
Text Box Last Page | Input FIeld | This field can be set to display once the POS popup has been completed, an example could be thanking the customer for an order and referring to the lead time of the product. |
Google Analytics Code | Input Field | Enter your Google Analytics ID here, Starting with UA. |
Mouseflow Website ID | Input Field | Mouseflow is a third party that tracks user activity within your app. Simply add the Mouseflow website ID they will have created for you and this will track activity. |
Below gives you a look at how this menu will appear for users.
Simply scroll through the Styling menu and once happy with your changes select "Save" and move onto the next menu in the sequence.
Renderer Options Menu
Renderer Options refers to how the app will first render and second the options that can be set for print job generation when an order is received from a customer.
Option Name | Setting Option | Description |
Draw Surface Area Borders | Toggle | By default, a blue dotted line visually represents the Print Areas on the product. This can be toggled to turn them off/ on depending upon preference, gives a clean app appearance. This is most commonly best used on photo upload product to highlight where the decoration area is. Generally not needed for virtual products as they already feature a design. |
Below gives you a look at how this menu will appear for users.
Renderer Options is the last menu within the configuration, users will than have a unique 15 digit code that they can use when using smartlink builder or default apps.
Language Packs
As mentioned before on this article language packs can be set to define the shown text for menu options such as "Add To Cart" which users may want to change to either "Add To Bag" or spelling add to cart in French which would be "Ajouter au panier". To set a new language pack simply click the "+ Create Locale" button shown below.
Once clicked users can select the language type from the dropdown which is set to English by default, as well as options to set a unique identifier as well as a name.
With these basic details now set users can expand the menu with the arrow which will show the Translations options which must be entered into the "To" column. These can be changed at a later date by simply amending the app.
Once the "To" translations have been set simply save the Locale which can than be entered into the "Enabled Locales" menu within the config which will ensure this locale is used for the app.
Example Of The App
We have created an example of the app for customers to use, this is using a test product variety of the different features and config options shown below, this is taken from an app we created for Universal Studios for their Halloween Horror Nights.
Users can access this Kiosk App link here - Click Here
Related Articles
Smartlink Apps | Smartlink Builder Overview
Overview Smartlinks can be configured to suit different use cases and offer control over the end user journey. The available apps that the user can choose from will be detailed within this article. This article will offer information on the core ...Smartlink Apps | Eris
Introduction The following article has been written to detail how our standard Eris app can be set up and used for. We have also detailed all of the available options associated with Eris General, Miscellaneous and Image menus. This app has similar ...Platform | Product Manager App Defaults
What Is App Defaults? "App Defaults" is an option found within Catalog > Product Manager and is accessible when setting up or modifying a product. The main menu is found within "Product Details" and the tab "App Defaults" which is shown below. ...Smartlink Apps | 3Column3
Introduction The following article has been written to detail how our standard 3Column3 app can be set up and used for. We have also detailed all of the available options associated with 3Column3 features, styling, product info, renderer option and ...Smartlink Apps | Stepped3
Introduction The following article has been written to detail how our standard Stepped 3 app can be set up and used for a stepped app experience. We have also detailed all of the available features associated with Stepped 3 general, features, ...