Paragraphs: Show Information to Your Customers
You use Paragraph elements to display messages to your customers. Paragraphs do not collect any data and do not require any response from the user. Their purpose is simply to present information.
The Paragraph element provides a built-in rich text editor to let you easily format your text and also insert variables, hyperlinks, tables, images and media items into the text displayed to the user.
A Paragraph can be used as a single element on a page or it can be combined with other elements as needed.
 |
Above, the example on the left shows a paragraph that is used as a summary tool at the end of a Flow. 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 Flow: A paragraph can summarize the loan application information obtained thus far, or provide a list of the next steps in the process.
Telemarketing Interaction Flow: A paragraph can prompt the customer service representative to give the customer an important terms and conditions statement (which is embedded).
Creating a Paragraph Element
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 Paragraph settings displayed:
Enter or paste the text of your paragraph into the Paragraph editor. Use any of the editing options provided to format the text according to your needs.
To open the code view and edit the text using HTML formatting, click the Source
icon.Note
It is recommended to use either the default view of the Paragraph editor or the code view, and not switch between views. Working with both views simultaneously while editing the text may cause unexpected changes to the code.
For details about working with variables in a Paragraph, click here.
For details about formatting rich text or using hyperlinks, styles, tables, images and media, click here.
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 Flow Map is displayed.
Using Variables
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:
 |
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:
 |
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 type of variable, click here.
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.
