1

Introduction: What is SmartSite

2

Why use SmartSite

3

Getting started

4

Under the hood

5

Authentication and security

6

Styling

7

Widget samples

8

Widget configuration options

9

Technical instructions for adding the widget to your website

STEP 1

Review your website and plan how you want to present the SmartSite widgets

STEP 2

Setup your Simplified Products within printIQ and decide which you want to publish on your website

STEP 3

Request IQ to issue your authentication token and whitelist your URL  

STEP 4

Add the widget code to your web pages

STEP 5

Update the widget configuration according to your preferences

Step 6

Style the widget using CSS on your website

SmartSite concept

printIQ functionality that drives this

Shopping cart

The SmartSite module uses the standard printIQ Shopping Cart which is in essence an order / quote within printIQ.  Multiple products can be added to the cart, be it simplified products or products from the IQstore.

Items remain in the cart until checkout is complete.

Non-authenticated user access

The widget itself is driven by a user account within printIQ. The default user account is “widget”, but you can set this according to your preference.  The user account drives access to products and pricing in the same way that any user account does within printIQ. 

Authenticated user access

You have the choice of displaying a login option on your website.  Existing users can login at this point after which the pricing generated from the widget will be based on their customer account.

Non-authenticated account access

Prior to a customer logging in, a guest account is used as an order must reside on a customer account within printIQ.    The default account is “Widget” but again, it can be any customer account within printIQ.

Once the user proceeds to Checkout, we move the order from the “Widget” account to the account created during the registration process so that every online order is placed on a personal account for that customer.

printIQ Simplified Products

The main function delivered by the widget is the Simplified Product layer from within printIQ.  This is our unique, child-proof layer that sits over the quoting engine where you cannot quote something that your factory is not able to produce. A prerequisite to using SmartSite is to have your products already setup.

Within printIQ, products are configured and linked to a Product category.  Within the widget setup, you simply point the widget at a product category.  This allows you to be selective as to what you offer online.

It is important to note that the widget supports the majority of Simplified Quoting functionality, however there are some aspects that are not available. This includes concepts such as Quote Questions, Parameters, component selection, quote approval etc.  Where appropriate, these options are displayed on the Checkout page within printIQ and simply not available on the widget itself.

IQstore products

IQstore products are also available within the widget.  They present slightly differently as there are no specifications, you have thumbnails of the products to choose from and you only need to set the quantity required.

The prerequisite is that you have setup your IQstore with products and they are available for ordering within printIQ.

Pricing

Pricing is driven from printIQ and follows standard pricing principles.  Pricing is based on the customer account that drives the widget which in turn is controlled by a printIQ Pricelist.

Various options are available when it comes to pricing, it can be preset pricing or time/material based.

Web registration

Prior to checkout, the registration process takes place where the user creates a user login and customer account.  The customer account always has credit card / pre-pay terms so that an order is only confirmed once it is paid.

The layout of the registration form is controlled within printIQ and you may also have a standalone link to this function without first accessing the ordering widget.  The idea is that you can add a Register link to your site without making an order.

Checkout

Once a user has added all products to the order, they choose the checkout option which takes them through to the printIQ checkout page.  This takes place regardless of whether the customer is new or existing.

Note, Checkout is not completed on the website.

SSL encryption

printIQ functions by default using the printIQ.com SSL certificate for encryption.  As you are transitioning from your website to printIQ, we recommend that you run your ordering pages on the website using HTTPS.  This will avoid the problem of moving from one site to another and having un-secured content warnings.

Whitelisted URL

While you may add the widget code to any site, to operate, it first needs IQ to whitelist the URLs that will access the printIQ widget.  Any URLs outside of this list will be denied access.

Secured API

All printIQ APIs are secured with a user name, password and authentication token required to be held securely on your website.

Non-authenticated users

Non-authenticated users have guest access to the widget via the “widget” user account within printIQ. No password access is available / stored on the front end.

Authenticated users

Authenticated users’ login on the website with a self-contained API call to the AuthenticateUser API within printIQ. The API returns a token that allows access for a period of time.  No password data is transferred in the request.

General placement, colours and styles

You control the website, so the functionality is only limited by your HTML/CSS skills.  While the widget has pre-set styles, you have the option to use in-line styles or CSS within your own website to control how the widget lays out. This includes whether the widget is laid out vertically or horizontally.

While you may use Javascript to control the widget, it is not supported by printIQ so take care that it does not conflict with the widget functioning correctly.  Where possible, utilise the supported configs and settings outlined below to control the widget behaviour.

Drop down labels

The labels alongside each drop down are controlled by printIQ Filters where you can update the labels and control the order that they appear in.

Drop down contents

The content and order of the drop downs are driven from printIQ operations and Simplified Quoting.  

Widget buttons

The Customise page within printIQ allows you to control the button labels, while your website CSS controls what they look like.

Widget configuration

The javascript placed on your website controls many of the options for layout and functionality.  See below.

Two common settings are:

• Product type drop down (On/Off) which determines if you show the product selector or if you prefer to restrict the content to a single product type to match your marketing content
  
• Showing the shopping cart (On/off).  The config controls the display while your CSS controls where you locate it.
  

Setting

Description

Value

Shopping cart

addToCart

addToCart

addToCart

hideCartIfEmpty

The shopping cart does not show if the cart is empty

True/false

useCookies

When true, the user’s cart will persist across page refreshes

True/false

checkoutUsesSimplified

This setting controls the re-direct once they checkout.  When true, proceed to checkout screen otherwise the user will re-direct to the ordering screen for that product to finetune options

True/false

showSignIn

Controls whether the login option is displayed so that existing users may login and retrieve their pricing/options

True/false

delayAddingProductToCart

Prevents the automatic add product to cart once GetPrice is clicked.  When true, the product is added to the cart once the Add to Cart button is clicked

True/false

showAnotherProductButton

When Cart is active, this button is ‘Add to Cart’. If the cart is NOT active this button becomes ‘Another Product’

True/false

Product types

showTreeNodeSelector

Controls if the product (tree node) selector is displayed.  When true, the user can select other tree nodes, otherwise, they are fixed to the preset node

True/false

treeNodeId

The Tree Node ID is the ID number of the product category that you want to display. 

Obtain it from Admin ==> Factory Capabilities ==> Product Categories and open the relevant node

Tree Node ID or ‘null’

isParentTreeNodeSelected

Controls whether the user can navigate to a higher tree node in the hierarchy

True/false

Filter (Drop down) settings

allFiltersMandatory

Set to true if you want all drop downs completed prior to GetPrice.  

True/false

allFiltersMandatory_ErrorMessage

The message to be displayed when all filters are not completed

String

clearFilterValuesOnProductChange

Clears the filters once a product has been added to the cart

True/false

clearSubsequentFiltersOnFilterOpened

When true, subsequent filters will be cleared if you modify a drop down

True/false

Quantity selectors

showKinds

This expands the quantity selection by enabling the user to specify a number of Kinds/Versions

True/false

kindsLabel

Specify the label to appear on the Kinds/Versions drop down

string

showOtherQuantity

Controls if the quantity drop down is restricted to items in the list or if ad hoc quantities can be entered

True/false

quantitiesBasedOnTreeNode

Controls if the quantity list is sourced from the tree node / product category or if read from the product itself

True/false

Pricing

showPrice

This setting governs how the widget is to behave. If set to true, the price is presented to the online user. If set to false it prompts the user to either log on or register to printIQ

True/false

hideGetPriceButtonWhenPriced

Once priced, the setting allows the GetPrice button to be hidden to prevent the user inadvertently adding the product again

True/false

includeGst

Option to control if sales tax is included within the price presented

True/false

code

comments

window.CartWidget_Config = PrintIQ.CartWidget.Init({

appKey: "ABCDEFGH-1234-IJKL-5678-MNOPQRSTUVWX",

appKey from tblAPI_Application for CART widget

UserId: "ZYXWVUTS-9876-RQPO-5432-NMLKJIHGFEDC",

udUserID from tblUserDetail for WIDGET user

container: document.getElementById("myCartWidget"),

hideCartIfEmpty: false,

when true, hide the cart icon when there are no products

useCookies: true,

when true, user’s cart will be persisted across page refresh

checkoutUsesSimplified: true

when true, user will be taken to QuoteDetails page, else they’ll be taken to the

code

comments

container: document.getElementById("myClientWidget"),

where to build the widget

appKey: "A1B2C3D4-E5F6-G7H8-I9J0-K11L12M13N14",

appKey from tblAPI_Application for Client Widget

userId: "ZYXWVUTS-9876-RQPO-5432-NMLKJIHGFEDC",               

udUserID from tblUserDetail for WIDGET user

treeNodeId: null,                                            

tree node to pre-select

showTreeNodeSelector: true,

allow user to select different tree nodes (visible yes/no)

isParentTreeNodeSelected: false,

shortCodes: "",                                               

short codes which pre-select various options

showSignIn: true,                                             

Allows user to login to Widget screen to get their pricing.

showPrice: true,  

user can show price and then proceed to quote; else user will proceed to quote and see price in PIQ

includeGst: false,

include GST in the price shown to user

showKinds: false,

prompt user for number of kinds

kindsLabel: "Versions",

string, sets the label for kinds control

showOtherQuantity: true,

Allow 'Other' quantity

showAnotherProductButton: true,

Used when you are not using the Cart. Add to Cart becomes ‘Another Product’

delayAddingProductToCart: true,

Prevents the products being added to the Cart automatically

allFiltersMandatory: true,

allFiltersMandatory_ErrorMessage: 'Please fill out all selectors',

clearFilterValuesOnProductChange: false,

Whether or not to clear selected values. False allows user to order multiple 'kinds'

clearSubsequentFiltersOnFilterOpened: true,

when True it resets all the following filters on the Widget

quantitiesBasedOnTreeNode: false,   

Determines whether to use the quantity list or the quantities on the product CSV.

hideGetPriceButtonWhenPriced: false