Admin Guides copy

Page tree

The Canvas tab allows you to design the selected page for a Designer Desktop using Selector and Component Editor as per your requirements.

The below screen shows the Canvas tab of Designer builder. Navigate to Designer > Canvas tab.


The Canvas tab offers the following panels and buttons:


Panels

  • Desktops - Displays the selected page which you are going to be designing or updating. See Summary Tab for detailed information.

  • Selector - Provides options to design the page by using Templates and Components panel. See Selector section for detailed information.

  • Component Editor - Provides configuration options for setting components' properties (Content and Style). See Component Editor section for detailed information.

Buttons

  • Options - Allows to change the theme of the page, save the page as Template, and clean the page design. See Options section for detailed information.

  • Preview - Allows viewing the designed page before it will be available to Agent. See section for detailed information. See Preview section for detailed information.

  • Refresh - Updates the display on screen with the latest design of the page.

  • Save - Allows to save the design of the page.

Selector

Click the Selector bar (refer to the above screenshot). The Selector bar displays the available Templates and Components to design the page.

The below screen shows the expanded Selector bar. 

Components Panel

You can enable, disable, and re-arrange different components on the Agent Desktop using Components panel. The components can be pre-built or developed by you.

The below screen shows the pre-built components.

Containers

Containers are the holding place for other components. To add containers, drag the specific container onto the canvas or double click the specific container. The available containers are:

  • Accordion - Allows configuring Accordion panel for agent desktop. This panel can be expanded or collapsed by agents. It displays the components in vertically stacked list.

  • Horizontal Array - Allows configuring a panel for agent desktop which displays the components in horizontally stacked list.

  • Tabs - Allows configuring a panel for agent desktop which displays the components as tabs in the panel.

  • Vertical Array - Allows configuring a panel for agent desktop which displays the components in a vertically stacked list.

Contacts

Contacts are single panel components. The fields and values originates from different sources. For example, Contact manager, Consent management, Scripter, or the database that will be required for Designer application.

For the basic fields of Contact manager and Consent management, see section Contacts Manager - Contacts Tab  in the LiveVox Administrative User Guide.


  • Actions - Allows configuring a panel for agent desktop which enables an agent to set reminders for follow up activity against a record whether that is an email or phone call.

  • Activity History - Allows configuring a panel for agent desktop which displays all multi-channel activity history for the Contact.

  • Detail - Allows configuring a panel for agent desktop which displays selected or all fields within Contact Manager and defines the position, layout, and whether the fields are editable or not.

  • Directory - Allows configuring a panel for agent desktop which displays the phone numbers and email address associated to a record and allows agents to modify or add new ones.

  • Highlight - Allows configuring a panel for agent desktop which display module that shows all customer information for each record for easy validation.

  • List - Allows configuring a panel for agent desktop which displays the entire Contact manager list with Click-To-Dial options and Advanced Search functionality.

  • Notes - Allows configuring a panel for agent desktop which displays any notes that have been added to a record.

Scripts

This is single-panel component that contain subscript directing the agent in performing of specific actions. For Example, credit card collection, welcoming, etc.


  • Script Panel - Allows configuring a panel for agent desktop which displays the configured script (through Script Builder) for the specific service.

Others

With the Other component types, you can optionally display multiple scripts simultaneously in agent's desktop.


  • Banner - Allows configuring a panel for agent desktop which displays the configured image as the banner.

  • External App - Allows configuring a panel for agent desktop which displays an external web application.

  • Home Bar - Allows configuring a bar for agent desktop which displays an account name and search box.

  • HTML - Allows configuring a module which customizes agent desktop panel based on HTML.

  • Arrow () on the title bar of the component allows to collapse or expand the panel.

  • Vertical ellipsis () on the title bar of the component allows to create the customized component.

  • Cross mark () on the title bar allows to delete the component from the page.

Component Editor

Component editor allows you to configure the selected component of page through the Properties panel.

Select the component to edit the properties. You can edit the below configuration options for Containers, Contact, Script, and Other components except for Banner and External App.

  • Content
    • Title - Allows to Specify the name of the component.
  • Styles


    • Header Position - Allows to select the option from Header Position drop down menu. Depending on the selected option, the component heading will be displayed on the agent desktop panel.
    • Theme - Allows you to select the color of the title bar.
    • Panel

      • Header - Select this option to display the header bar in agent desktop panel.

      • Boarder - Select this option to display the boarders in the component of agent desktop panel.


The Component editor of Banner component allows you to configure image along with other properties of component (described above).


The Component editor of External App component allows you to configure URL of the application along with other properties of component (described above).

Templates Panel

You can create template by using the designed page. Canvas tab allows you to create multiple templates and use one of the existing templates to create a new page. The below screen shows the created templates.

Creating a Template


  • Design the page as required.
  • Click Options button from the bottom center of the screen.

  • Select Save as Template option. You get the Confirm pop up.

  • Enter the name of the template.
  • Click Save button.
  • The saved template is available under the Templates tab.


Designing the Page Using Template

  1. Select the page which you want to design.

  2. Under Templates, double-click the required template. The page contains the components as per the template.

    You can also add the other components to the page after adding the template to page.
  3. Click Save.

Options

The Options button is available at the bottom center of the screen. The available functionalities are as follows:

  • Change Page Theme - This option allows to change the theme of the page. To change the of the page, click Options button and select Change Pages Theme option. You get Theme drop down menu. Select the color from the Theme drop down menu to apply the theme. 

  • Save Page as Template - This option allows to save the existing page as a template. For detailed information on templates, see Templates section.

  • Clean Page - This option removes all the components from the page.

Preview

To preview the designed page, navigate to the page you want to preview. Click the Preview button which is available at the bottom center of the screen. You can view the Preview screen of the specific page. The below screen shows the example of page with tabs (Actions, Activity History, Details, and Directory) as components of Contacts container.


  • No labels