CloudCX URL Parameters-Based Dynamic Layout

Owned by SUPPORT
Last updated: Nov 06, 2024
5 min read

For the convenience of software integration for our customers, we have designed this function, which allows users to segment the page and adjust the layout of some pages through URL parameters. Through this function, users can use their imagination and inspiration to customize the system with their style.

Parameter: noLayout

This parameter controls the display and hiding of the left menu and top bar in the Admin Console, and this parameter has the highest priority.

  1. noLayout=true

This means hiding both the left menu and the top bar in the Admin Console.

Example:

URL: https://{{your_domain}}/#/admin/widget/dashboard?noLayout=true
1-20241105-080630.PNG

  1. noLayout=false

This means displaying both the left menu and the top bar in the Admin Console.

Example:

URL: https://{{your_domain}}/#/admin/widget/dashboard?noLayout=false
2-20241105-080950.PNG

Parameter: topLayout

This parameter controls the display and hiding of the top bar in the Agent Panel.

  1. topLayout=true

This means displaying the top bar in the Agent Panel.

Example:

URL: https://{{your_domain}}/#/agentConsole/visitor?includeWs=true&topLayout=true
3-20241105-081609.PNG

  1. topLayout=false

This means hiding the top bar in the Agent Panel.

Example:

URL: https://{{your_domain}}/#/agentConsole/visitor?includeWs=true&topLayout=false
4-20241105-081830.PNG

Parameter: noPopupMenu

This parameter controls the display style of all widgets in the Admin Console.

  1. noPopupMenu=true

This means that all widgets will be displayed in the Chat Plan submenu of the Admin Console.

Example:

URL: https://{{your_domain}}/#/admin/widget/myWidget/chatPlan?noPopupMenu=true
5-20241105-084512.PNG

  1. noPopupMenu=false

This means that all widgets will be displayed in the pop-up menu of the Admin Console.

Example:

URL: https://{{your_domain}}/#/admin/widget/myWidget/chatPlan?noPopupMenu=false
6-20241105-084712.PNG

Parameter: navigationStyle

This parameter controls the menu display style in the Agent Panel.

  1. navigationStyle=Left

This is the default style. The menu will be displayed on the left side of the page. If no navigationStyle parameter is set, the default value of "Left" is used.

7-0-20241105-085758.png

  1. navigationStyle=TopLeft

This means that the menu will be displayed on the top left side of the page.

It will take effect when topLayout=false.

Example:

URL: https://{{your_domain}}/#/agentConsole/message?includeWs=true&topLayout=false&navigationStyle=TopLeft
8-20241105-091104.PNG

  1. navigationStyle=TopCenter

This means that the menu will be displayed on the top center of the page.

It will take effect when topLayout=false.

Example:

URL: https://{{your_domain}}/#/agentConsole/message?includeWs=true&topLayout=false&navigationStyle=TopCenter
9-20241105-091738.PNG

  1. navigationStyle=TopRight

This means that the menu will be displayed on the top right of the page.

It will take effect when topLayout=false.

Example:

URL: https://{{your_domain}}/#/agentConsole/message?includeWs=true&topLayout=false&navigationStyle=TopRight
10-20241105-092020.PNG

  1. navigationStyle=None

When the value of navigationStyle is set to none, the menu will no longer be displayed.

It will take effect when topLayout=false.

Example:

URL: https://{{your_domain}}/#/agentConsole/message?includeWs=true&topLayout=false&navigationStyle=none
11-20241105-092351.PNG

Parameter: showAgentProfile

This parameter controls whether to display the Agent Profile in the Agent Panel. If no showAgentProfile parameter is set, the default value of "false" is used.

It will not take effect when "topLayout=false&navigationStyle=none".

  1. showAgentProfile=true

  • When navigationStyle=Left, the Agent Profile will display in the bottom left corner of the page.

13-20241105-095151.PNG

  • When navigationStyle=TopLeft or navigationStyle=TopCenter or navigationStyle=TopRight, the Agent Profile will display in the top right corner of the page.

14-20241105-100030.PNG

  1. showAgentProfile=false

The Agent Profile will not be displayed in the Agent Panel.

Parameter: autoLogon

This parameter controls whether the Agent automatically logs into the CX system. It is usually used for ifram embedding.

  1. autoLogon=true

The agent will be automatically logged into the CX system with the unique ID (userID).

  1. autoLogon=false

By default, agents will not be automatically logged in to the CX system. Agents need to enter the necessary credentials on the login page to log in to the CX system.

Parameter: displayMode

Although we already have some personalized parameter configurations as above, it is still lengthy to use. For this reason, we have defined some parameter combination patterns to simplify user configuration and use.

For displayMode parameter, the autoLogon parameter will be hide and is true by default.

  1. displayMode= ModeName

The parameter combinations represented by this mode are as follows:

AgentMode1 :autoLogon=true&topLayout=false&navigationStyle=TopLeft AgentMode5 :autoLogon=true&topLayout=false&navigationStyle=left&showAgentProfile=true InboxMode1 :autoLogon=true&isTicket=true

  • AgentMode1

8-0(1)-20241105-102700.png

  • AgentMode5

  • InboxMode1

Example URL:

https://domain/#/agentConsole/message?includeWs=true&company=cloudfon&userId=2&displayMode=AgentMode5 convert to https://domain/#/agentConsole/message?includeWs=true&topLayout=false&navigationStyle=left&showAgentProfile=true

Parameter: lang

This parameter sets the default language used for the Agent Panel.

Value Range

Value: en, fr, pt, es, it

  • en--English

  • fr--French

  • pt--Portuguese

  • es--Spanish

  • it--Italian

Example

https://domain/#/agentConsole/message?includeWs=true&company=cloudfon&userId=2&displayMode=AgentMode5&lang=en

iFrame Permission Parameter

For an iframe, when the child page wants to access the resources of the parent page, the corresponding permissions need to be set. If the permissions are not set, some functions will not work properly on the child page. Here are several common permissions:

Permissions
'allow' attribute permissions

CX Usage

 

Description

 

camera

Used for Video Chat

Allows the embedded content to access the camera.

microphone

Used for WhatsApp Audio msg
Used for Audio Chat

Allows the embedded content to access the microphone.

geolocation

Used for remote login reminder.

Allows the embedded content to access geolocation.

clipboard-write

Used for all channels

Allows writing to the clipboard.

autoplay

Option

Allows media to autoplay.

encrypted-media

Option

Allows the use of encrypted media.

fullscreen

Option

Allows the iframe to enter fullscreen mode.

picture-in-picture

Option

Allows video to be played in picture-in-picture mode.

screen-wake-lock

Option

Allows preventing the device from sleeping.

storage-access-api

Option

Allows access to third-party storage.

usb

Option

Allows access to USB devices.

Here is an example of the 'allow' parameter usage:

<iframe src="https://example.com/#/agentConsole/message?includeWs=true&topLayout=false&navigationStyle=TopLeft&company=Example&userId=123456789&showAgentProfile=false&autoLogon=true&lang=es" width="100%" height="1000px" frameborder="0" allow="geolocation; microphone; camera; encrypted-media; clipboard-write; autoplay"> </iframe>