Adding a Vertical Line to a Configuration

The following describes how to add a widget to a configuration that will display a straight vertical line of a specific colour and thickness. Such lines can be used to visually separate and organise other widgets in an intuitive and logical manner.

See also: Adding a Horizontal Line to a Configuration

Implementation

  1. Access the list of configurations for the intended Customer.

    1. Access the resources page for the intended Customer.

      1. Access the details page for the intended 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.
      1. Select the Customer Resources tab.
    1. Click the CC4Web Configurations hyperlink.
  1. Launch the intended configuration.

    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.

  1. Click Enter Design Mode.
  2. 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.
  3. 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.

  4. On the right-hand side of the page, locate the Vertical Line widget.

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

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

Use the options in this tab to configure the line as needed.

Widget Overview

OptionDescription
Line ColourUse the drop-down to select a suitable colour for the line. This defaults to blue.
Line widthChoose the thickness of the line, in pixels, by specifying a number here.

Auto-sizing (to fill window space)

OptionDescription
Auto-size optionsUse 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.

  1. Click Save Changes to confirm creation of the widget.
  2. Repeat this process until you have all the widgets you need.
  3. 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.

  4. 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.

Further Reading