Nextiva Contact Center: Survey Panels

Panels are how different pages or sections of a user survey are configured and represent the canvas where a survey is designed. They follow a div HTML/CSS programming and design style, meaning panels can be placed inside other panels to create separate boxes or sections inside a page. For example, the Footer and Header Panels are used to apply the boxes at the top and bottom of the survey that can be used to display tab titles and various navigation buttons.

Panels can create as many flexible sections as you like inside a survey and become the essential means of controlling the look and feel of a survey, bringing in dynamic capabilities and collapsible menus and sections.

The Footer panel is generally used at the bottom of a regular panel to display the survey navigation buttons. It can be used in various styles and actions.

A footer must be added to every survey’s “page” panel to navigate back and forth. One notable exception is a “goodbye” style panel, where the end user is not expected to need to navigate back to other panels.

Configuration Fields

The Footer panel will have the following configuration fields:

Field Name	Description
Component Type	Footer
Component Description	A description of the Footer panel.
Type	Footer with (page) Controls or Plain Footer.
Margin	The desired margin in pixels or other formats, following the CSS formatting rules. E.g., 4px, 8px or 0px, 0px, 0px, 4px.
Icon	The icon style that will be used for the action buttons.
Button Size	Use the slider to change the button size of the controls.
Previous Action	Defines what the page control “previously” does: Back – Moves to the previous panel that the End User was on. Move to panel – Goes to the panel specified in the Next Panel field. Previous Page – Navigates to the previous panel in the page order.
Next Action	Defines what the page control does “next”. Move to panel – Goes to the panel specified in the Next Panel field. Next Page – Navigates to the next panel in the page order.
Next Panel	If the Next Action field is set to Next Page, select the panel to which the next action goes.

The Header panel is generally used at the top of a regular panel to display the survey’s navigation buttons. It can be used in various styles and actions.

Configuration Fields

The Header panel will have the following configuration fields:

Field Name	Description
Component Type	Header
Component Description	A description of the header panel.
Margin	The desired margin in pixels or other formats, following the CSS formatting rules. E.g., 4px, 8px or 0px, 0px, 0px, 4px.
Title Color	The clor of the title of the header.
Icon Color	The color of the icon associated with the header panel
Background Color	The background color of the header.
Show Previous	Enable to get the previous page control.
Previous Action	If Show Previous is enabled, define what the page control “previously” does: Back – Moves to the previous panel that the End User was on. Move to panel – Goes to the panel specified in the Next Panel field. Previous Page -Navigates to the previous panel in the page order.
Previous Icon	If Show Previous is enabled, select the icon for the previous button.
Show Options	Enable to present actions that can be taken in the header panel of the survey.
Menu Options	If Show Options is enabled, these are the options that will be presented to a user: Back Previous Page Move to panel Sound Send Transcript
Show Close	Enable to get the Close page control.
Close Panel	If Show Close is enabled, Close Panel defines which panel the close button goes to: Back – Moves to the previous panel that the End User was on. Panel – sets the end-state panel, e.g. the “good-bye” panel.
Title Size	The size of the header title.

Overlay

There can be one or more overlay panels on top of another panel.

Configuration Fields

The Overlay Panel will have the following configuration fields:

Field Name	Description
Component Type	Overlay Panel
Component Description	A description of the overlay panel
Label	Overlay Panel
Label Alignment	The alignment of the component title.
Label Font Size	The font size of the component title.
Description	A description to be displayed beneath the component title.
Description Alignment	The description alignment in the component.
Description Font Size	The font size of the description.
Assistance	A description to be displayed when the assistance button is hovered over.
Tab Label	The tab name that should be displayed above the survey.
Panel Alignment	The alignment desired for the contents of the panel.
Collapsible Menu	Makes the panel content collapsible. Displays only the Panel label and hides other content.
Default View: Content Expanded	If the collapsible menu option has been selected then this toggle will define whether the panel is minimized by default or not. If this option is selected then the panels content will be displayed upon first loading.
Scroll	Enables scrolling of the content of this panel.
Vertical Alignment	Whether the components inside the panel will occupy the full space of the panel or be restricted to the size of the contents inside them.
Direction	Alignment of the content of the panel: row components or column components. The content components will span the width or height of the panel respectively.
Width	The width of the panel in pixels or otherwise, following the CSS formatting rules. E.g., 180px.
Height	The height of the panel in pixels or otherwise, following the CSS formatting rules. E.g., 4px, 8px or 0px, 0px, 0px, 4px.
Margin	The margin of the panel in pixels or otherwise, following the CSS formatting rules. E.g., 4px, 8px or 0px, 0px, 0px, 4px.

Panel

A panel is a basic component of any survey; it’s the main box where content is displayed. Every survey must have at least one panel that contains the other components. A panel may have more than one other panel inside it. This makes it easy to build “box inside a box” surveys, maintaining good control over the positioning of the survey content.

Configuration Fields

The Panel component will have the following configuration fields:

Field Name	Description
Component Type	Panel
Component Description	A description of the panel.
Label	The component title.
Label Alignment	The alignment of the component title.
Label Font Size	The font size of the component title.
Description	A description to be displayed beneath the component title.
Description Alignment	The description alignment in the component.
Description Font Size	The size of the description font.
Assistance	Description to be displayed in the assistance button hover over.
Tab Label	The tab name as it should be displayed above the survey.
Panel Alignment	The alignment desired for the contents of the panel.
Collapsible Menu	Makes the panel content collapsible. Displays only the Panel label and hides other content.
Default View: Content Expanded	If the collapsible menu option has been selected then this toggle will define whether the panel is minimized by default or not. If this option is selected then the panels content will be displayed upon first loading.
Scroll	Enables scrolling of the content of this panel.
Show Scroll Bar	If enabled, there will be a visible scroll bar on the panel.
Vertical Alignment	Whether the components inside the panel will occupy the full space of the panel or be restricted to the size of the contents inside them.
Direction	Alignment of the content of the panel: row components or column components. The content components will span the width or height of the panel respectively.
Width	The width of the panel in pixels or otherwise, following the CSS formatting rules. E.g., 180px.
Height	The height of the panel in pixels or otherwise, following the CSS formatting rules. E.g., 4px, 8px or 0px, 0px, 0px, 4px.
Margin	The margin of the panel in pixels or otherwise, following the CSS formatting rules. E.g., 4px, 8px or 0px, 0px, 0px, 4px.
Background Color	The background color of the panel.
Panel Shadow	If enabled, shadows will be added to panels used in the survey.
Panel Border Radius	Creates a border radius around the panel. Can be entered as pixels or percentages.
Show Overlay	Allows a new panel to be opened/closed on top of another panel. NOTE: There can be no overlay on top of another panel.
Show Header	If enabled, the header of the user survey will be visible.
Title Header	Creates a header that goes on top of the survey. NOTE: The title won’t show unless you click on the header panel and change the title color or background color as needed.
Allow Panel in Dashboard	If enabled and there’s a panel configured in a dashboard, this is the panel that will be displayed in the dashboard to show statistics

URL

This panel displays an external web page or a URL script inside of it. Companies can use this to show their personal scripts to agents without rebuilding them if they already have them in web format.

Configuration Fields

The URL panel will have the following configuration fields:

Field Name	Description
Component Type	URL
Component Description	A description of the URL panel.
Label	The component title.
Label Alignment	The alignment of the component title.
Label Font Size	The font size of the component title.
Description	A description to be displayed beneath the component title.
Description Alignment	The description alignment in the component.
Description Font Size	The size of the description font.
Assistance	Description to be displayed in the assistance button hover over.
Tab Label	The tab name as it should be displayed above the survey.
Panel Alignment	The alignment desired for the contents of the panel.
Vertical Alignment	Whether the components inside the panel will occupy the full space of the panel or be restricted to the size of the contents inside them.
Direction	Alignment of the content of the panel: row components or column components. The content components will span the width or height of the panel respectively.
URL	The URL that points to the desired page to be displayed.
Condition	A JavaScript expression for displaying the component. The component will show if the expression returns True.
Use Reverse Proxy	For websites with enhanced security protocols like reverse proxy it is important to mark this toggle for the URL to be displayed.
Properties	If a URL requires header properties, then use this section to create the key value pairs which will be called when getting information from the target site.
Width	The width of the panel in pixels or otherwise, following the CSS formatting rules. E.g., 180px.
Margin	The margin of the panel in pixels or otherwise, following the CSS formatting rules. E.g., 4px, 8px or 0px, 0px, 0px, 4px.

Waiting for Agent

Waiting panels present waiting messages, they are configured, so that after a certain event happens, the survey will automatically move to a separate section. The standard waiting panel is used in customer-facing surveys and waits for an agent to be available for a Chat workitem. The panel displays a waiting message, before moving on to the Chat conversation panel when an agent becomes available.

Configuration Fields

The Waiting for Agent panel will have the following configuration fields:

Field Name	Description
Component Type	Waiting for Agent
Component Description	A description of the Waiting for Agent panel.
Label	The component title.
Label Alignment	The alignment of the component title.
Font Size	The font size of the component title.
Description	A description to be displayed beneath the component title.
Description Alignment	The description alignment in the component.
Font Size	The size of the description font.
Assistance	Description to be displayed in the assistance button hover over.
Tab Label	The tab name as it should be displayed above the survey.
Waiting Message	Custom waiting message.
Waiting Message Font Size	The waiting message font size.
Waiting Icon	The waiting icon to be displayed.
Waiting Icon Font Size	The size of the waiting icon.
Waiting Icon Color	The size of the waiting icon.
Display	Size of the waiting message panel content: full panel or fit to content.
Panel alignment	The alignment desired for the contents of the panel.
Panel Vertical Alignment	Whether the components inside the panel will occupy the full space of the panel or be restricted to the size of the contents inside them.
Direction	Alignment of the content of the panel: row components or column components. As such the content components will span the width or height of the panel respectively.
Width	The width of the panel in pixels or otherwise, following the CSS formatting rules. E.g., 180px.
Margin	The margin of the panel in pixels or otherwise, following the CSS formatting rules. E.g., 4px, 8px or 0px, 0px, 0px, 4px.
On Agent Available Panel	The panel to move to when the agent becomes available.
Timer	Set a time-out for the waiting panel.
Timeout Panel	The panel to move to if the timer runs out.
On Terminate	The action to be taken when the call is terminated. The options are: Message Move to panel None
Terminate Message	If Message is selected in the On Terminate field, this is the message that will display when the termination happens.
End Panel	The panel to move to.
Use Reverse Proxy	For websites with enhanced security protocols like reverse proxy it is important to mark this toggle for the URL to be displayed.

Waiting on Event

The Waiting on Event panel is displayed to the agent while the customer is going through a workflow.

Configuration Fields

The Waiting On Event panel will have the following configuration fields:

Field Name	Description
Component Type	Waiting On Event
Component Description	A description of the Waiting on Event panel.
Label	The component title.
Label Alignment	The alignment of the component title.
Font Size	The font size of the component title.
Description	A description to be displayed beneath the component title.
Description Alignment	The description alignment in the component.
Font Size	The size of the description font.
Assistance	Description to be displayed in the assistance button hover over.
Tab Label	The tab name as it should be displayed above the survey.
Message Variable Update	A JavaScript expression that contains the variable with the event message updates.
Waiting Message	Custom waiting message.
Waiting Message Font Size	The waiting message font size.
Waiting Icon	The waiting icon to be displayed.
Waiting Icon Font Size	The size of the waiting icon.
Waiting Icon Color	Select a color for the icon.
Waiting Icon Animation Speed	The speed at which the animation icons rotate through.
Display	Size of the waiting message panel content: full panel or fit to content.
Panel alignment	The alignment desired for the contents of the panel.
Panel Vertical Alignment	Whether the components inside the panel will occupy the full space of the panel or the size of the contents inside them.
Direction	Alignment of the content of the panel: row components or column components. The content components will span the width or height of the panel respectively.
Width	The width of the panel in pixels or otherwise, following the CSS formatting rules. EG: 180px.
Margin	The margin of the panel in pixels or otherwise, following the CSS formatting rules. EG: 4px, 8px or 0px, 0px, 0px, 4px.
Panel	Panel to move to when the process is completed successfully.
Set Variables on Success	Sets variables in the workitem when the process is completed successfully.
On Error Panel	The panel to move to when the process is completed unsuccessfully.
Set Variables On Error	Sets variables in the workitem when the process is completed unsuccessfully.

Need additional help? Click here.

Was this article helpful?

Yes No