Adding an Agents State Totals Widget

The following describes how to add a widget to a configuration that will allow management users to see how many of the Agents within their domain have specific states applied to them.

Implementation

1. Access the list of configurations for the intended Customer.
   How do I view a list of configurations for a specific Customer?

   1. Access the resources page for the intended Customer.

      How do I access resources for a specific Customer?

      1. Access the details page for the intended Customer.

         How do I access the details of a specific Customer?

         1. Type the Customer’s name into the search field at the top of any page.
         2. Click the intended Customer in the search results. This opens the Customer Details page.

      2. Select the Customer Resources tab.

   2. Click the CC4Web Configurations hyperlink.

2. Launch the intended configuration.
   How do I launch an individual configuration via the portal?

   When viewing the list of available configurations:

   1. If you don't want the configuration to appear in a new window, un-tick the first check box.
   2. Use the first drop-down to select the name of an Agent to simulate when you launch the configuration.
   3. Locate the configuration you want to access, and click its Launch button.

   Always remember to save any intended changes before exiting this mode.

3. Click Enter Design Mode.
4. Click Whole Config Properties. This will open the Properties page for the configuration. On the left-hand side of this page you will see a hierarchy of all current widgets.
5. Click the Add Another Widget option for where you'd like the widget to appear, which can be either the main window or a tab strip.

   You can add a new tab strip here if needed, as explained in Adding a Tab Strip.

6. On the right-hand side of the page, locate the Agents State Totals widget.

   The widgets listed here are sorted according to the type of licence required to operate them.

7. Click Add This Widget. The page will update, and the new widget will be selected, presenting you with its General tab.

s

8. Type a suitable Widget Title.

9. Select the Scope of the widget.

   By default, this will be for all Agents belonging to the Customer that owns the configuration; if needed, you can change this to track everything for the current Customer, the currently logged-in Agent, a specific Agent, a specific group, and more.

10. Under Display Options, use the check boxes to control which aspects of the widget you want to display. Certain options include a numeric component, allowing you to specify—for example—the pixel width of each column in the widget.
11. Select the Columns (States) tab.
12. Use the check boxes in this tab to choose which states to include in the widget.

    Depending on your chosen width of columns, you should take care not to include too many columns in a single widget, as this may make it awkward to evaluate.

13. Each column may have further options available, including:
    • Constraints: Lets you apply additional filtering on the chosen state, for example only showing figures for Agents that have been in the state for more than a specified time.
    • Flash Column Heading if Not Empty: If you want to draw particular attention to certain critical states, you can tick this check box to have the column heading flash whenever there are Agents in the corresponding state.

14. Select the Styles and Layout tab.
15. Use the options provided to fine-tune the appearance of the widget.
    Styles and Layout...

    Header

    Option	Description
    Option: NO_HEADER	Whether the widget’s header should be hidden.

    Font Size and Colours

    Option	Description
    Zoom / Magnification Level	Use the drop-down to select a UI scale for this widget, from 10% (x0.1) to 1000% (x10). This defaults to 100% for all new widgets.
    Highlight (Larger) Font Size and Colour	Use the two drop-downs to select an alternative font size and colour for certain text in the widget, including its heading. The default size is 16, and the default colour is black.

    Widget Background and Borders

    Option	Description
    Background Colour	Use the drop-down to select a background colour of the widget. The default is white.
    Border Colour	Use the drop-down to select a border colour for the widget. The default is black.

    Auto-sizing (to fill window space)

    Option	Description
    Auto-size options	Use the drop-downs to select whether the widget should adjust in response to the browser window being re-sized. This is done individually for horizontal and vertical changes.

    Option: Fill Tab

    If the widget has been placed inside a tab, enabling this option will cause it to occupy the maximum available space in that tab.

16. Click Save Changes to confirm creation of the widget.
17. Repeat this process until you have all the widgets you need.
18. Click Return to Cxp Agent Experience.

    You should ensure each new widget is appropriately sized, positioned, and styled to fit in with the rest of the configuration. This can be done after adding each new widget, if you prefer.

19. When you've finished making changes to the configuration, click Exit Design Mode. It is now safe to close the current window or tab and return to the Admin portal.