Paragraph elements have a single function: to display messages to your customers. Paragraphs do not collect any data and they don't require any response from the user. Their purpose is simply to present information.
The Paragraph element has a built-in editor that lets you easily format your text and insert tables, hyperlinks, images, media items and variables into the paragraph.
A Paragraph element can be used alone (as the single element on a page), or they can be combined with other elements as needed. Below, the example on the left shows a paragraph that is used as a summary tool at the end of an Interaction. The example on the right shows a paragraph that displays a message to customers before they answer input questions.
A few sample scenarios for using paragraphs include:
- Loan Application Interaction: A paragraph can summarize the loan application information obtained thus far, or provide a list of the next steps in the process.
- Telemarketing Interaction: A paragraph can prompt the customer service representative to give the customer an important terms and conditions statement (which is embedded).
This article explains how to add a Paragraph element to your Interaction, and how to use these special features of the Paragraph editor:
To create a Paragraph:
- From the left side of the Page Editor, select the Paragraph element, and drag the element to the Page map.
On the right side of the Page Editor, the Element tab opens, with the Paragraph editor displayed.
- Enter or paste the text of your paragraph into the Paragraph editor. Use the editing options provided to format the text according to your requirements.
To open the code view and edit the text using HTML formatting, click .
Note: It is recommended to work either in the default view of the Paragraph editor or in the code view, and not to switch between the views. Switching back and forth between views during editing may cause changes to the code.
For detailed information about working with variables, images, media and styles, refer to the sections below.
- The Show/Hide Rule field enables you to show or hide the Paragraph during runtime if a specified Rule condition is met. (A Paragraph 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 Paragraph'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.
- 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.
- To save your changes, at the lower right corner of the Page Editor, click Update Page (or Create Page).
The Page Editor closes, and the Interaction Map is displayed.
To insert a variable, position the cursor at the appropriate point in the paragraph and enter '@' to open the Variable list. Then, select the required variable from the list. Variables can be inserted in both the default view and the HTML code view.
Once a variable has been selected from the variables list, the variable name appears in the Paragraph editor in a gray frame. The following example shows how a formula variable appears in the editor:
Working with Collections
When working with a collection, you can use the .elementAt variable in the Variables list to insert the variable that is located in the position you specify, as shown in the following example:
You can insert a variable into a hyperlink that is used in a Paragraph element. Variables can be inserted in both the display text and the URL field of a hyperlink. Simply enter '@' to open the Variable list while defining the hyperlink, and select (or create) the desired variables via the autocomplete menu.
- You can use more than one variable in a field.
- The content of a field can consist of only a variable.
In the example below, we have added a user variable that references the current Order No, enabling a customer to access it directly from the 'Thank You' message:
During runtime, the Paragraph will display the value of the Order No variable that was referenced in the hyperlink:
Working with Photo Type Variables
You can access photos that were uploaded by a customer (in a Photo Upload question) and display them in paragraphs (and other elements that have HTML editors, such as Resources and Email notifications). To access the photo, a designated user variable of type Image needs to be created to store the uploaded photo. For more information about creating this variable, refer to Using Uploaded Images in Your Interaction.
- In the Paragraph editor, position the cursor at the point where you want to insert the photo. Then, enter '@'to open the Variables list.
- Select the required variable. The variable you select must be of type Image.
A placeholder frame for the photo is inserted at the point selected in the Paragraph editor. The name of the selected variable is displayed inside the frame.
- To edit the presentation of the photo, click on the placeholder frame, and then use the toolbar options to resize or realign the frame. You may also adjust the size of the photo by clicking on a corner of the frame and then dragging until the required size is displayed.
The Paragraph editor supports inserting images that are stored on the Interact Server in a dedicated Image Library. For details about how to add images to your Library using the Jacada Interact Admin Console, refer to Managing Your Image Collection.
- In the Paragraph editor, position the cursor at the point where you want to insert the image. Then, from the toolbar, click .
The Image Library opens.
- Scroll to and select the required image. You may filter the image list by entering a relevant search term (image name or category) in the Search tool, at the top of the Library.
- When you have selected your image, click Use Image.
The image is inserted at the point selected in the Paragraph editor.
- To edit the image, click on it, and then use the toolbar options to resize or realign the image. You may also adjust the size of the image by clicking on a corner of the frame and then dragging until the required size is displayed.
The Paragraph editor supports inserting media items that are stored on the Interact Server in a dedicated Media Library. Media items can be videos or any other item with embedded HMTL code, such as an online map.
For details about how to add media items to your Library using the Jacada Interact Admin Console, refer to Managing the Video Collection.
- In the Paragraph editor, position the cursor at the point where you want to insert the media item. Then, from the toolbar, click .
A list of available media items opens.
- Select the required item.
The item is inserted at the point selected in the Paragraph editor.
Using Formatting Styles
Clicking the icon of the paragraph editor opens the Styles list. The styles listed here are all the ones that are currently defined on the Common Styles page of the Jacada Interact Admin Console.
These styles may be applied to selected paragraph content, as appropriate. If no style is applied, content is displayed in the default style (paragraph).
- In the Paragraph editor, select the text to which you want to apply the style.
- Open the Styles list and select the relevant style.
The style is applied to the selected text.
In the following example, the SUBTITLE style has been applied to the word Fruits: