Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Modifying the Interaction Portal UI

Updated on March 19, 2021

When users first access the Interaction Portal, they see the Home page, which typically contains information about the user, a menu along the left side, and various sections such as My cases and My workbaskets that display information to a customer service representative (CSR). You can customize the user interface and display any data that you have integrated into your application.

Pega Customer Service Implementation Guide Pega Customer Service Implementation Guide Pega Customer Service Implementation Guide Pega Customer Service Implementation Guide Pega Customer Service Implementation Guide Pega Customer Service Implementation Guide Pega Customer Service Implementation Guide

Configuring the user portals

To ensure a more effective user experience, determine the contents of the Interaction Portal and, if applicable, the Back Office Operations portal. Also, determine how all users will enter the application.

  1. In the header of Dev Studio, click Launch web interfaceInteraction Portal.
  2. Open the Dashboard section.
  3. To edit and personalize the dashboard, click the Personalize dashboard icon.
  4. In the Edit dashboard section, choose your layout template and add your own widgets or select from the set of available widget options.
  5. Click Publish to publish your settings. You can choose to publish the settings to the default dashboard or to the access group.
  6. Review the My Reports, Manager Tools, and Pulse and determine if any modifications are required based on your business needs.
  7. Define the application entry point.
    The Pega Customer Service portal can be accessed as is, or individual processes can be embedded as a mashup in an existing portal or application.
    1. Review features provided by Pega Web Mashup.
    2. Discuss these options with the resource currently managing the application in which you want to embed your process.
    3. Decide on the most appropriate entry point for your site.
      These processes can also be made available to your customers directly.

Modifying the interaction header

You can customize the interaction header area of the Interaction Portal to best meet the needs of the CSRs handling the interaction. Changes can include adding, deleting, or editing sections and fields located in the sections of the header.

The application provides a variety of design templates that you can select to configure the interaction header.

  1. Open App Studio by logging in to your application with your administrator credentials.
  2. In App Studio, launch an interaction.
  3. Click Design.
  4. To modify the header section, click the Workarea icon in the header.
  5. To change the template, click Change and then select a template of your choice.
  6. To add sections in the template, click the Add icon and drag and drop the section of your choice to the header.
  7. To delete a section, click the section and then click the Remove this section icon.
  8. To edit the fields of the section, click the section, highlight the field that you want to edit, and then click the Edit this field icon.
  9. Update the required fields in the right corner of the page and click Apply.

    Note: The modifications that you made are auto-saved.

Hiding header icons for unused features

In the Interaction Portal header, hide icons for unused features so that CSRs can more quickly find the tools that they use most.

The following figure shows the Interaction portal header icons that CSRs use during customer interactions:

Interaction Portal header icons
Interaction Portal header icons that can be shown or hidden

You can hide any of the icons in the top-right section of the Interaction Portal header except for the user icon. The default header section includes an extension section so that you can add customized icons if required.

Note: The following icons are hidden automatically if appropriate:
  • The Chat routing icon is hidden if you do not have a chat server configured.
  • The Phone icon is hidden if you do not have a CTI phone system configured.
  • The Messaging system health icon is hidden if you do not have manager privileges.
  • The Start My Day icon is hidden if you have not enabled that feature in the Robotics settings.
  1. To hide the Call center volume indicator, clear the Display call volume indicator check box in the Agent productivity settings. For more information, see Configuring agent productivity settings.
  2. To hide the Email cases icon, select the Hide email cases check box in the Agent productivity settings. For more information, see Configuring agent productivity settings.

Disabling the Add Task button conditionally

Prevent the creation of a new task during an interaction by conditionally disabling the Add Task button in the Interaction Driver pane. For example, prevent CSRs from beginning new tasks when there are more than two tasks that are already in progress. When you disable the Add Task button, the button is dimmed and not available.

Configure this feature by using an extension point, the cyDisableAddTaskButton When rule.

The following figure shows the dimmed appearance of the Add Task button when the button is disabled:

Disabled Add Task button
Conditionally disable the Add Task button to prevent the creation of new tasks.
  1. In the header of Dev Studio, search for and select the cyDisableAddTaskButton when rule.
  2. On the Advanced tab, configure the conditions for which the system disables the Add Task button by default.
    The default value is false, meaning that the Add Task button is always active. To disable the Add Task button, change the value to true, and then click the Edit icon to configure the condition for which the system disables Add Task button.
    For example:

    To disable the button when there are two or more tasks in progress, use the following expression:

    @countInPageList("in-progress","IntentType",D_CSRecents[InteractionId:Primary.CurrentInteractionID].pxResults)>=2
  3. Click Save.

Hiding completed tasks conditionally

Hide completed tasks in the Interaction Driver pane so that CSRs have better visibility of the tasks that are in progress. To hide completed tasks for an interaction, define the conditions that trigger the system to hide the completed tasks from the Interaction Driver pane. that hide the completed tasks.

Configure this feature by using an extension point, the cyShowCompletedTasksExt When rule.

The following figure shows the appearance of the Interaction Driver pane when completed tasks are hidden. A completed task contains a check mark icon, while an in-progress task contains a clipboard icon.

Completed tasks are hidden
Conditionally hide completed tasks for an interaction
  1. In the header of Dev Studio, search for and select the cyShowCompletedTasksExt when rule.
  2. On the Advanced tab, configure the conditions that trigger the system to hide the completed tasks for this interaction in the Interaction Driver pane.
    The default value is true, meaning that the completed tasks are always displayed in the Interaction Driver pane. To hide the completed tasks, change the value to false and then click the Edit icon to configure the condition for which the system hides completed tasks.
    For example:

    To hide completed tasks when there are two or more completed tasks, use the following expression:

    @countInPageList("complete","IntentType",D_CSRecents[InteractionId:Primary.CurrentInteractionID].pxResults)<=2
  3. Click Save.

Modifying other Interaction Portal elements

You can update the other elements of Interaction Portal that may require Dev Studio to reflect the style of your business. The following steps guide you to identify the sections and the fields that you want to modify.

  1. Click the Live UI icon.
  2. Select the element that you want to change.
    When an element is selected, Live UI provides information about that element, such as the sections and harnesses that the element is a part of.
  3. Click the Open rule in Dev Studio icon to open that rule in Dev Studio and update it as needed.

Tags

Pega Customer Service 8.7 Pega Customer Service for Communications 8.7 Pega Customer Service for Financial Services 8.7 Pega Customer Service for Healthcare 8.7 Pega Customer Service for Insurance 8.7

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us