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.
|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|
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:
|###INSTRUCTIONS###||NO||An area where instructions to the user can appear.|
The area where the fields that the user must fill in will appear.
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.|
|YES||Area where one or multiple preview images will appear.|
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.
If present, a pulldown will appear allowing the user to select the size of the preview to be shown.
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.|
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.|
|A "friendly name" for the session, equal to one of the choices made by the user.|
|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.|
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:
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