Smartlink Apps | Flow

Smartlink Apps | Flow

Introduction

The following article has been written to detail how our standard Flow app can be set up and used for. We have also detailed all of the available options associated with Flow features, styling, product info, renderer option, POS (Point Of Sale) and miscellaneous menus. This app has similar styling to the basic 3 customised but this is specifically designed for multi page printed paper products. This app is specifically designed for customisable blanks, multi page personalised predesigns and print on demand products with galleries. 
Key features of this smartlink app include the use of tabs for unlimited pages or sides and seperating tabs for image upload and editing.
 The app is intended for use on desktop and larger screen sizes and may not display desirably on smaller screens. 

Setting Up Flow Apps

To set up a new Flow 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 "Flow" 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 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, Features, Styling, Renderer Options, Product Indo, Point of sale (POS) and a Miscellaneous 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
Disable User Interface
Toggle
Removes all tools, buttons and input boxes leaving just the preview.
Enable Add To Cart
Toggle
Toggle the 'Add to Cart' button on / off
Enable Sample Save
Toggle
Allows the customised product to be saved as a Sample.
Enable Email Share
Toggle
With this toggle enabled customers can save their designs and share them with an email that they can enter which will share any unfinished designs with them. 
Enable Enquiry
Toggle
With this toggle enabled customers can enquire about the item shown within the app by entering a message that will be shared with yourself. 
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 Sample Quantity
Toggle
Enables a quantity field with '+ ' and '-' buttons to easily increase the quantity to order
Enable Grouped Quantity
Toggle
Is a feature that works specifically with Magento 1 and allows all simple products on a grouped product to show and have its own quantity
Enable Variant Quantity
Toggle
Enables a quantity picker for all variants against the products allowing different ones to be added to be cart at the same time
Enable Quantity Popup
Toggle
Enables a popup on "add to cart" which asks customer to confirm quantity
Enable POS Details Pop Up
Toggle
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.
Enable Drag and Drop (HTML5 Only)
Toggle
Allows touch and click controls directly on the product preview, i.e. dragging and resizing images.
Enable Gallery List View
Toggle
Changes the gallery preview behaviour, from being image thumbnails to a list view of image names. 
Create Print Job When Saving a Sample
Toggle
This toggle should be enabled to ensure that a print job is saved for any of the samples that a customer is ordering through a sample of their product. 
Autoload First Gallery Image
Toggle
Alternatively, placeholders can be set on Image Areas instead. 
Show Colour Areas As Tabs
Toggle
If a product has multiple 'colour areas' - this changes the default dropdown display so that each specified area has its own menu in app.
Persist State Between Products
Toggle
Product Selector. 
Link Galleries By Name To Image Areas
Toggle
This links any galleries specified in the Smartlink to the Image Area on the product with the same name.
HTML5 Safe Product Search
Toggle
With this toggle turned on HTML5 product search will be enabled and this will stop from any unsafe words from being entered into the customisation. 
Image Fill Validation Enabled
Toggle
Cannot 'Add to Cart' unless an Image has been uploaded that covers the entire Print Area on the product.
Image Populated Validation Enabled
Toggle
Cannot 'Add to Cart' unless an Image has been uploaded to all areas.
Product Search
Toggle
Allows a search of product names when the products tab is enabled
Product Info Pop Up
Toggle
This pop up will show the customer product info such as the name, SKU and description which will open up into a pop up. 
Textual Product List
Toggle
the Product display from thumbnail preview to a named list.
Image Area Effects
Toggle
This will allow effects such as full colour, monochrome etc to be displayed on images. 
Text Area Effects
Toggle
This will allow effects as full colour, monochrome etc to be displayed on text entered into the app. 
Dynamic Pricing
Toggle
If a product has additive pricing this should be enabled allowing a single product with 'options' and price that changes based on product options selected.
Image Colour Detection
Toggle
Detects CMYK colours in an uploaded images. Used in conjunction with User Image API v3 Upload Processor Pantone. 
Image Resize Warning
Toggle
If enabled will trigger a warning if images are uploaded at smaller than the minimum recomended pixel sizes set on the product in the platform.
Image Remove Green Screen 
Toggle
Deprecated.  Enabled old automatic green screen removal based on a specific hex code. Replaced by remove.bg. 
Image Upload Auto Downscale
Toggle
Automatically downscales images uploaded by the user in the Preview to reduce bandwidth.  Original image still used in print output generation.
Include Copyright Warning
Toggle
Displays pop up message when using clicks Add to Cart.  Forces them to approve their design and confirm they hold copyright of any images by agreeing to statement and clicking Approve.
Enable Remove Background
Toggle
Toggles visibility of the remove background tool.
Enable Pixlr
Toggle
Enable this option to allow customers to upload images from their Pixlr account. 
Enable HTML Overlay Controls
Toggle
Shows resize and rotate buttons around the user image or image area depending on the 'Image Overlay Fit Mode To Image To Area' setting.
Use Save State Where Possible
Toggle
Forces the use of product state (modern print job creation method) in the app.
Auto Save
Toggle
Regularly save the users progress inside the app in their session allowing the window to be closed and opened again and remember any personalisation or edits made.
Colour Area Colour Spectrum
Toggle
 display if the product has an appropriate colour area with at least two colour options.
Text Area Colour Spectrum
Toggle
If enabled, adds an interactive colour picker tool to the Text Area menu in place of the standard text colour swatch
3D Preview
Toggle
nly work if the product has connected 2d and 3d products within Product Manager. 
Image Upload
Toggle
Enables the option to upload a image to product. Requires a image area to be set up on a product. 
Google Plus Upload
Toggle
Enables the option to upload images from your Google Plus account. 
Flickr Upload
Toggle
Enables the option to upload images from your Flickr account.
Instagram Upload
Toggle
Enables the option to upload images from your Instagram account.
Dropbox Upload
Toggle
Enables the option to upload images from your Dropbox account.
Google Drive Upload
Toggle
Enables the option to upload images from your Google Drive account.
One Drive
Toggle
Enables the option to upload images from your One Drive account
Facebook
Toggle
Enables the option to upload images from your Facebook account.
QR Code
Toggle
Enables the option to upload images from your other devices by scanning a QR code.
Fotolia
Toggle
Enables the option to upload images from your Fotolia account. 
Pixabay
Toggle
Enables the option to upload images from your Pixelbay account.
Dreamstime
Toggle
Enables the option to upload images from your Dreamstime account
Native App Framework Upload (Normal)
Toggle
Is used only when using this app layout through our native app framework for uploading images from the device
Native App Framework Upload (Stripped)
Toggle
Is used only when using this app layout through our native app framework for uploading images from the device - this methods auto strips the background from images
Only Show Area For Selected View
Toggle
When enabled, only the image areas and text areas that are associated with the current aspect are available to the user.
Implicit User Image Gallery (requires User Image API v3)
Toggle
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.
Automatic Social Logout
Toggle
This toggle enabled will ensure that once images have been taken from Facebook, Flickr, Instagram etc will automatically sign users out of these accounts once images have been uploaded. 
Eager Aspect Loading 
Toggle
Loads all Aspect preview images on product load (eg: if product has Front/Rear then rear images would load as well as Front even though by default only Front would display). 
Mobile Responsive
Toggle
Deprecated - V3 apps now responsive by default so this toggle is not needed.
Text Alignment
Toggle
Toggles text alignment options within the Smartlink, offering, Left, Center and Right aligned options for Text Areas. Generally only requested for products with a lot of text based functionality, eg Greetings Cards, Posters, Business Cards. 
Load At First Text Area
Toggle
With this toggle turned on the app will automatically load into the first text area that is customisable within your app, this can be ignored if there is no option to personalise text areas. 
Fill Patterns
Toggle
This toggle enabled will allow customers to use fill patterns on a products image area. 
User Image API V3 Upload Processor
Input Field
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". 
Collage Mode
Input Field
Changes the behaviour of the Collages feature to use the print area (and arrange selected images dynamically) or apply to image areas defined on the product.
Image Overlay Fit Mode
Input Field
Used in conjunction with 'Enable HTML Overlay Controls'.  Allows you to choose whether the overlay controls fit around the Area or around the Image.
Auto Downscale Width
Input Field
A width can be set here for the image to downscale to, please note this will not affect any artwork print quality.
Auto Downscale Height
Input Field
A height can be set here for the image to downscale to, please note this will not affect any artwork print quality.
Auto Downscale Format
Input Field
A format can be set here for the image to format to, please note this will not affect any artwork print quality.
Auto Downscale Quality
Input Field
A quality can be set for the image to download in, please note this will not affect any artwork print quality. 
Live Chat URL
Input Field
Here a link to your own live chat can be entered to allow users to get support when using your app. 
Direct Smile Preview URL
Input Field
This field should be used if the customer is using direct smile, allowing for the preview URL to work with Direct Smile
Plain/Branded Attribute Name
Input Field
This field will allow users to specify attributes separate from a products setup to display within the app. 
Bad Word 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. 
Default Selected Country In POS
Input Field
Enter the default country to be displayed when the POS pop up form loads. 
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 features 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. To enable this you simply have to add the URL of the hosted CSS into the input field. 
The styling menu will appear for users like the below. 

An example of the kind of CSS you can set using the Flow app can be seen below. Here we have changed the colour of the buttons and increased the size of the images. 

CSS is optional but recommended as it allows for your own company branding to match with the selected app. 
Once styling has been added users can move onto the next menu within the sequence. 

Product Info menu

Product Info allow for optional settings appearing within the app such as names, descriptions and pricing. The table below shows all of the available options that can be enabled.       
Option Name
Setting Option
Description
Show Product Price
Toggle
Toggle to make 'Product Price' visible. This will require appropriate Pricing Data against the Product.
Show Product Name
Toggle
Toggle to make 'Product Name' visible, this requires an EPA parameter to work. 
Show Product Description
Toggle
Toggle to make 'Product Description' visible, this requires an EPA parameter to work. 
Show Dynamic Pricing Summary
Toggle
Toggle to display Dynamic Pricing Summary based on user selected options. This requires an EPA parameter as well as appropriate Pricing Data against the Product/s. 
Show Setup and Total Price
Toggle
Toggle to show Setup and Total Price, this requires appropriate Pricing Data against the Product/s.
Help Text
Input Field
Used if additional information or guidance is required during the app order journey. Please note that the help text is displayed on all stages of the app. 
The Product info menu will appear for users like the below, please note all options will be disabled by default. 

If changes are made hit the "save" button and move onto the next menu within the configuration 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 Border
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.
The renderer options menu will appear for users like the below. 

If changes are made hit the "save" button and move onto the next menu within the configuration sequence. 

Point Of Sale (POS) menu

The next menu allows you to specify what Point of sale information you wish to ask for, these are detailed in the below table. 
Option Name
Setting Option
Description
Show Product Price
Toggle
Toggle to make 'Product Price' visible, this does require appropriate Pricing Data against the Product. 
Show Product Name
Toggle
Toggle to make 'Product Name' visible, please note that this requires an EPA parameter.  
POS Shipping Options
Toggle
There are multiple toggles that can be set here to appear within the POS Menu and those include the name, telephone, email, address line 1-2, town, postcode and country. 
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
A URL can be entered here that will display more information on a link, this could include terms and conditions that you may not want to be on the app screen. 
Default Selected Country In POS
Input Field
Enter the default country to be displayed when the POS pop up form loads.
The POS menu will appear for users like the below. 

If changes are made hit the "save" button and move onto the next menu within the configuration sequence. 

Miscellaneous Menu

Miscellaneous options refer to options that do not really relate to the other menus including the displayed order of the app tabs. 
Option Name
Setting Option
Description
Tab Order
Matrix
Change the order or appearance for selected menus within the App based on numerical order,
eg. 1 = Appears first / topmost.
Specific menus can also be disabled to remove them from the app entirely.
Print Style Thumbnail Type
Dropdown
From this dropdown you can specify the type of print job that will be generated by the system - this can either be left at PNG by default or updated to generate as JPG.
Style
Dropdown
You can choose between some preset style options:
- Standard: Functionality menus appear on the right side of the screen
- Minimal: 
- Left: Moves the functionality menus over to the left side of the screen
Allowed Image Upload File Extension
Input Field
Specify which image file extensions are to be accepted when uploaded within the Smartlink. Any uploaded images that do not match the specified file extensions will fail to upload. Please note that multiple extensions can be specified if comma separated.
Print Job Number Of Thumbnails
Input Field
With this input field users can specify the number of thumbnails that can be produced with every artwork generation from this app. This is set to "-1" by default to not produce these thumbnails but users of multi aspect product can update this to produce a thumbnail for each page. 
Print Size Thumbnail Size
Input Field
The thumbnail size will be set to 500 pixels by default but users can update this to produce bigger or smaller thumbnails for each generated print job. 
Add To Cart Terms
Input Field
testPlain text field. Enter the text here you want to display as the message for the add to cart terms.
The Misc matrix will appear for users like the below image shows. 

Misc 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 and test galleries while using a variety of the different features and config options shown below. 

Users can access this Flow App link here - Click Here

    • Related Articles

    • 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, ...
    • Smartlink Apps | Proof3

      Introduction The following article has been written to detail how our standard Proof 3 app can be set up and used for. We have also detailed all of the available features associated with Proof 3 features. This app is designed for the B2B market and ...
    • 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 | Garment 3

      Introduction The following article has been written to detail how our standard Garment 3 app can be set up and used for. We have also detailed all of the available options associated with Garment 3 features, styling, renderer option and miscellaneous ...
    • Smartlink Apps | Pluto 3

      Introduction The following article has been written to detail how our standard Pluto app can be set up and used for. We have also detailed all of the available features associated with Pluto general, features and styling menus. The point of Pluto is ...