How to Configure Home Page Widgets?

Updated 

The Home Page in a Persona App is the central workspace where supervisors and agents can view all key widgets on a single screen and take actions directly. It provides a consolidated view of performance, tasks, schedules, and alerts, making it easier to monitor operations and respond quickly.

You can configure the widgets displayed on the Home Page according to your business requirements. These widgets are added and managed through the Record Page of the Home Page, which serves as the underlying structure for customization.

 

The Record Page Editor is used to add, configure, and modify the widgets shown on the Home Page. This allows teams to tailor the layout and content to match operational priorities, reporting needs, and workflow requirements. 

   

Home Page Widgets

You can add and configure the following widgets on the Home Page Record Page to tailor the workspace to your business requirements:

Overall Performance Metrics 

Displays consolidated performance indicators such as case count, agent average handle time, or message volume. Useful for supervisors to monitor operational health at a glance.

 

To Do 

Provides a personalized task list for agents or supervisors, helping them track pending actions and prioritize daily work.

 

My Schedule 

Shows upcoming shifts, meetings, or scheduled activities, ensuring agents and supervisors stay aligned with planned timelines.

 

Knowledge Base Widget 

Offers quick access to articles, FAQs, or process documentation. This helps agents resolve queries faster by referencing approved knowledge resources.

Recently Viewed Dashboards 

Displays shortcuts to dashboards that were recently accessed, allowing users to quickly return to frequently used reporting views.

 

Guided Workflow

Enter the Guided Workflow ID in the widget configuration panel.​ Enable the Should Auto Execute Guided Workflow toggle to render an auto-executed guided workflow.

Escalated Alerts

Input the Upfront alert count to be displayed on the widget.

Contact Us 

Provides a direct communication channel for agents to reach out to supervisors or support teams, simplifying escalation and feedback.

Announcements Widget

The Announcements widget on the Home Page provides supervisors with a quick way to monitor and act on announcements without leaving the main workspace. It consolidates all announcements into a single view, making it easier to stay informed and respond promptly.

Key capabilities:

  • View Announcements: See announcements directly from the Home Page.

  • Status Tracking: View announcements by status, including Pending (not yet acknowledged) and Expired (past their validity period).

  • Acknowledge: Confirm that an announcement has been read.

Extended view:

  • Click Show All to open the full Announcements page in the third pane.

  • The third pane provides detailed information, acknowledgment tracking, and reporting metrics.

  • A Search option allows supervisors to quickly locate announcements using keywords from the title or description.

How to open Home page's Record Page Editor? 

Step 1 – Search for ‘All Settings’ and click on the option as shown below. 

 

Step 2 – Go to ‘Manage Customer’. 

 

Step 3 – Search for ‘Persona Apps Manager’ and click on the icon. 

 

Step 4 – Search for the [Persona Name] whose Home Page needs to be edited. Click on the [Persona Name]. 

A screenshot of a computerDescription automatically generated 

Step 5 – Click on the ‘Home’ tab. 

A screenshot of a search boxDescription automatically generated 

Step 6 – Click on ‘Customise Home Page’. 

 

You land on the Record Page Editor of the Home Page of the [Persona Name]. 

A screenshot of a computerDescription automatically generated 

How to add reporting metrics in the Home page? 

There are 2 ways in which this can be done: 

Using a counter summary widget -  

Step 1 – Choose the reporting dashboard (For example, Record Page Editor 1) whose metrics are required to be displayed on the home page. 

 

Step 2 – Create a new widget by clicking on Add Widget on the top right corner. We create a counter summary widget here. This widget would include the metrics mentioned in all the other widgets whose data is to be displayed in order to have them all together on the home page. Save the widget. 
For example, as shown in the picture below, we have used the metrics Case Count, Agent Average Handle Time and Volume of Published Messages.  

 

 

 

Step 3 – Go to the record page editor of the specific persona to which the widget is supposed to be added.  
All Settings -> Manage Customer -> Persona Apps Manager -> Choose the required persona (Eg. Care Agent) ->  Double-click on the page where the widget is to be added (Eg. Home) -> Click on Customise Home Page  

 

 

 

A screenshot of a computerDescription automatically generated 
 

Step 4 – Hover over the widget where the new widget is to be added until you can see the plus sign as shown in the picture. Click the ‘+’ sign to proceed. 

 

Step 5 – Clicking the ‘+’ sign opens the widget library. Choose Reporting Widget. 

 

 

Step 6 – Select the correct Dashboard and the Counter Summary widget previously created and give a suitable title. You can choose to let the widget be collapsible or not and provide a refresh interval for the widget.  

A screenshot of a computerDescription automatically generated 

Step 7 – Click on Save. The widget will now be visible on the Home Page of the Care Agent persona. 

A screenshot of a computerDescription automatically generated 

Note: Drawbacks of this method is that all the different widgets in the counter summary widget need to have the SAME data source. Also, if different filters are used for different metrics, the above method cannot be used (for example – Number of Pending Cases and Number of New Cases will use the same metric (Case Count) but with different filters).  

This can be resolved using the following method -

Adding individual widget configurations in the JSON editor of the Persona Home Page -  

Step 1 – Open the record page of the desired persona where the widget is supposed to be shown following the same process as before. Select the widget and open its JSON editor. 

A screenshot of a computerDescription automatically generated 

Step 2 – Replace the code starting from “templateId” with the following piece of code. 

"templateId": "@sprinklr/widget/SupervisorHygieneMatrix", 

  "persistedId": null, 

  "name": "TWO", 

  "order": 0, 

  "children": [], 

  "props": { 

    "collapsible": true, 

    "title": "Overall Performance Metrics for the past 24 Hours", 

    "iconName": "solid/Graph", 

    "config": { 

      "widgetInfoList": [ 

        { 

          "primaryLabel": "New Cases", 

          "iconName": "solid/Asset", 

          "isSentimentInverselyProportional": true, 

          "currentPeriod": { 

            "widgetId": "64b79458b73188151e31b1a9", 

            "duration": "1d" 

          } 

        }, 

        { 

          "primaryLabel": "Assigned Cases", 

          "iconName": "solid/Asset", 

          "isSentimentInverselyProportional": true, 

          "currentPeriod": { 

            "widgetId": "64b7945eb73188151e31b2ce", 

            "duration": "1d" 

          } 

        }, ... 

      ] 

    } 

  }, 

  "context": null, 

  "uiEvents": null, 

  "formLayout": null, 

  "tableLayout": null, 

  "buttons": null, 

  "valueSource": null, 

  "evaluatedValue": null, 

  "translations": null 

Step 3 – In the widgetInfoList in the above piece of code, each block represents a different widget. You can change the widget id to what you want to be displayed and change the primaryLabel as well which is the display name of the widget.  
You can add the config for more widgets in the widgetInfoList. 

You can secure the widget id in the following manner –

Care Reporting -> Choose dashboard -> Right-click on the screen and select Inspect 
-> Go to Network Tab -> Refresh the UI page -> Chose REPORTING as shown in the picture below -> In the Preview Tab, open the widgets list and you will see a numbered list of the widgets present in widgets present in the dashboard -> Open the numbered dropdown and you will find at the bottom the id and widget name.  

 

You can copy the widget id and replace it with the widget id in the code previously pasted in the record page editor of the persona.

How to add drilldowns to a widget?

Drilldowns can directly be added using Explore lenses. Refer to this article.

How to add Time Filter in Home Page widget?  

Step 1 – Open the Record Page Editor of the desired persona (for example: Care Agent) using the steps mentioned above and open the Home Page editor. 

 

Step 2 – Add a New Widget by clicking on the ‘+’ icon and add a Reporting Widget. 

 

Step 3 – Choose the required dashboard and the widget to be displayed (For example: Refer to the picture below) 

 

Step 4 – Go to the JSON Editor. 

 

Step 5 – Add the following block of code in the “props” section (Refer to the attached picture) and click on Apply Changes and Click on Save.

"headerActions": [ 
      { 
        "id": "TIME_FILTER", 
        "props": { 
          "upfrontTimeRangeOptions": [ 
            "TODAY", 
            "THIS_WEEK", 
            "THIS_MONTH" 
          ] 
        }, 
        "initialValues": { 
          "timeRange": "TODAY" 
        } 
      } 
    ] 

The time filter has now been added.

 

Open the Persona View to find the Time Filter added onto the widget.