Joanna Z. Longtime-Renter, aged 27, has at last found her dream home, and she is now filling out your bank's online mortgage application. Joanna needs to send you her most recent paystubs as well as proof that she is over age 25.

When your mortgage application Interaction uses Photo Upload, Joanna can take pictures of her documents with her smartphone, and then upload multiple photos with one click. The image formats JPG, PNG and GIF are supported.

In this article, we'll cover:

  • How to use Photo Upload when designing your Interactions
  • How your customers use Photo Upload, and
  • How call center agents see customer input

Some Things To Know Before You Get Started

  • Photo Upload is supported only in newer smartphone versions (iOS: version 6 and later; Android: version 4.4 and later).
  • Supported browsers are native browsers and Google Chrome.
  • Each uploaded photo may be no larger than 10 MB.

Photo Upload in the Interaction Designer 

Photo Upload is a special kind of input question where the expected response is one or more images (instead of text, a date, and so on). Creating a Photo Upload question is therefore very similar to designing any other type of input question. 

To create a Photo Upload input question:

  1. From the left side of the Page Editor, select the Upload Image question element, and drag the element to the Page map.
    On the right side of the Page Editor, the Element tab opens.

  2. If you want, in the Label field of the Element tab, change the default text of the question.
  3. From the Resize on upload dropdown list, select the appropriate compression option: Small, Medium, Large or None.

    Tip: Make the compression choice based on your judgment of what kind of photos will be uploaded. If customers are likely to upload photographs of documents that agents will need to read, it is recommended to select None.
  4. Specify the collection type variable to store the uploaded photos:
    Click on the Saved Selection line, and select the required variable from the Variables list. Only variables of type Collection of Images are listed. 

    If no variables of type Collection of Images have been defined, click the Add icon to create a relevant variable. For more information, refer to The Saved Selection Variable (below).
  5. Configure validation and security settings: 
    If relevant, select the Required Field checkbox. (If the checkbox is selected, customers will not be able to proceed to the next page of the Interaction if they haven't uploaded at least one image.)
  6. The Show/Hide Rule field enables you to show or hide the Photo Upload question during runtime if a specified Rule condition is met. (An input question is always displayed by default.) To add a Show/Hide rule, click on the plus icon and enter the condition to meet using the Rule Editor that appears:

    After adding the condition, select Show or Hide from the dropdown menu at the lower right to set the question's display status. To delete a Rule, click on Delete rule at the top right corner of the Rule Editor.

    For more details and an example, click here.
  7. The HTML Reference ID field stores the response in order to make it available for use outside of Interact, for example in CSS or application extensions. A unique name is automatically assigned to this field by default, but you can assign a more descriptive name to make it easier to identify.
  8. To save your changes, at the lower right corner of the Page Editor, click Create Page (or Update Page).
    The Page Editor closes, and the Interaction Map is displayed.

The Saved Selection Variable

When you design a Photo Upload question, you need to specify a variable that will hold the customer's answer (i.e., the uploaded photos). The variable you specify must be a Collection of Images variable type. You can then use this variable elsewhere in the Interaction to access the uploaded photos and display them in Paragraphs, Resources, and Email notifications

If no Collection of Images variable types currently exist, you will be prompted to create one when you click the Saved Selection line:


Click  to open the Variable Editor. The type (Collection of Image) is selected by default, and may not be changed. Simply specify a name for the new variable, and click Save Variable.

For more detailed information about defining variables, refer to Creating User Variables.

Photo Upload: What Your Customers See and Do

When customers reach a Photo Upload page, all they need to do is tap the Add icon, and then choose the pictures they want to upload from their phone's photo albums. You can design the Photo Upload page to give them more instructions and information. For example: 


After customers have selected photos, previews of the images appear on the page:

Note: Once ten photos have been selected, the Add icon is automatically hidden.

Clicking on a photo lets customers delete the photo, or view the full size image.

Photo Upload: What Call Center Agents See

When customer service representatives view the customer's Interaction instance using Jacada's Agent Application, all photos uploaded by the customer are visible in the History Flow tab (in the Answers and the Flow sub-tabs). For more information about the History Flow view, click here.