Introduction

The ZenStudio IFRAME integration is an easy method of integrating ZenStudio into your e-commerce application. As the name suggests, you can embed the client into your own page by adding an IFRAME to the HTML. Parameters from your application to the client are passed through the URL of the IFRAME's SRC attribute, and return information from the client after it is finished is passed back through a postback URL.


The IFRAME URL is: http://client.zenprint.com/iframeClient.aspx (to which you must add the required URL parameters defined below).


The IFRAME url parameters allow for customization of the client's appearance and behavior to a great degree; you can pass your own CSS stylesheet, change the names on the completion buttons, adjust the available zoom levels for the preview, and even supply your own custom layout file to arrange the client sections in any manner you wish, interspersed with your own text and HTML elements.

The parameters in the URL are in the well-known querystring format, where a question mark follows the page URL and URLencoded parameters immediately follow, in a NAME=VALUE format. Upon completion of the customization session, the end user will either click a Save button or a Cancel button, and the client will send a FORM POST to the postback URL with the session ID, friendly name for the session, exit status, and the values of all user choices.


URL Parameters

Parameter Name
Required
Type
Purpose
Sample
Interactive
Standard Forms
docCode
YES
GUID String
Identifies which template is used for the document session. docCode=cf39438e-88fc-4150-a1b1-8ad610d3a608 X
X
docPwd
YES
GUID String
Password for the template docPwd=1e482b74-8be0-485c-b0f0-11869d9f53f2 X
X
postbackURL
YES
URL
Page that will receive the final postback with the session results postbackURL=https://yoursite.com/addtocart
X
X
cssURL
NO
URL
Link to a CSS stylesheet to be applied to the standard forms based client cssURL=https://yoursite.com/stylesheet.css

X
layoutURL
NO
URL
Link to an HTML file describing the standard forms based client layout to be used. (See Layout File section) layoutURL=https://yoursite.com/layout.html

X
addToCartButton NO
string Text label for the addtoCart button (only used for a new session) addToCartButton=Complete

X
addToCartCausesUpdate NO
boolean Normally the user must press the Update Cart button to send field changes to the server. When this is true, the Add To Cart button will do an Update Cart too. Prevents changes from being lost because the user had forgotten to press Update Cart before finishing. addToCartCausesUpdate=true
X
cancelButton NO
string Text label for the cancel button (used for both kinds of session) cancelButton=Cancel
X
updateButton NO
string Text label for the updateCart button (only used for re-editing an existing session) updateButton=Update
X



Layout File

To completely customize the arrangement of the sections of the client, you can provide your own layout file. This is a standard HTML file with the sections of the file marked in it with special tags like ###CHOICES###. When the client loads, it reads this layout file and substitutes its own controls for the tags. Any other content you put in the HTML file is copied literally. The tags are:


Tag
Required
Purpose
###INSTRUCTIONS### NO
An area where instructions to the user can appear.
###CHOICES### YES

The area where the fields that the user must fill in will appear.

###DATAMAP### NO

If the template uses vdp functionality (variable data – lets  the user upload a data file and have a copy of the document generated for each record in the data), this is where the "data map" will appear that lets the user

match fields in his data file with fields in the template.

###RESPONSESET### NO
If the template has "response sets" defined, a pulldown selector will appear letting the user select a response set.

###PREVIEWIMAGE###

###PREVIEWIMAGES=n###

###PREVIEWIMAGES=ALL###

YES
Area where one or multiple preview images will appear.
###PAGESELECTOR### NO

If present, a radio button list will appear for selecting which page or pages of the document to preview.

Note: if all pages are currently shown, the selector will be hidden.

###SIZESELECTOR### NO

If present, a pulldown will appear allowing the user to select the size of the preview to be shown.

###UPDATEBUTTON### YES

Area where the update preview button will appear. This is required so that changes the user make can be sent back to the ZenStudio server.

###COPYRIGHT### YES
Shows a label with the branding of the client
###CONFIRMATION### NO
If present, the client can display a thank you message after the session is finished.


Postback
When the user presses one of the three session-ending buttons – add to cart, update cart or cancel – the results of the edition session will be sent as a FORM POST to the postbackURL that was provided. The inputs that will be sent are:
docSession
a GUID string identifying the session. This should be saved so that your application can later retrieve  the final output file for printing.
docSessionCancelled True if the cancel button was clicked, false if the add or update button was clicked.

docSession_id

A "friendly name" for the session, equal to one of the choices made by the user.

docSession_fieldName

For each choice made by the end user, a variable will be sent giving that choice's results. If the choice was a file upload, the filename that it was saved under (not necessarily the original file) will be provided here.  The fieldname refers to the name of the field in the ZenStudio template.


Sample Integration
To help you get started, a code for a sample integration is provided below.  Feel free to use and/or copy the included ZenPrint CSS and Layout files.

IFRAME SRC with no custom CSS or Layout:
http://client.zenprint.com/iframeClient.aspx?docCode=cf39438e-88fc-4150-a1b1-8ad610d3a608&docPwd=1e482b74-8be0-485c-b0f0-11869d9f53f2&postbackURL=close&addToCartButton=Finished%20Editing&cancelButton=Cancel%20Order&approveWhenDone=true

IFRAME SRC with custom CSS and Layout that show All Pages:
http://client.zenprint.com/iframeClient.aspx?docCode=cf39438e-88fc-4150-a1b1-8ad610d3a608&docPwd=1e482b74-8be0-485c-b0f0-11869d9f53f2&postbackURLclose&cssURL=http://www.zenprint.com/stylesheets/studio_style.css&layoutURL=http://www.zenprint.com/stylesheets/studiolayout_all.html&addToCartButton=Add to Cart