Brekeke UC Wiki

Webchat Settings

1. Webchat section

on: Enable Webchat
off : Disable Webchat

 

2. Webchat services section

Configure Webchat services.

Item Explanation
Service ID ID of the Webchat service. Set any Service ID.
Description Description of the Webchat service.
Type Type of the targets that Webchats will be forwarded to.

Users -> Webchats will be forwarded to users.

ACDs ->  Webchats will be forwarded to ACD. *1

*1. In the case Webchats are forwarded to ACD, Brekeke UC needs to be integrated with Brekeke CCS.

Target Targets that Webchats will be forwarded to.

Set user ids or acds, with comma separations.

Options Set Webchat options in JSON format.

Refer to “2-1.Webchat service options” for the objects that can be set.

Example:
Item Value
Service ID webchat001
Description Webchat for technical support
Type Users
Target 1001,1002,1003
Options see below
{
    "chat_event_actions": {
        "welcome": {
            "chat_action_type": "auto_message",
            "auto_message_id": "message01"
        },
        "queue_timeout": [
            {
                "chat_action_type": "auto_message",
                "auto_message_id": "message02"
            },
            {
                "chat_action_type": "close_chat"
            }
        ]
    },
    "profinfo_format": "%name%%br%%email%%br%%profinfo.company_name%%br%%profinfo.phone_number%%br%%profinfo.category%%br%%description%",
    "queue_timeout_sec": 60
}

 

2-1. Webchat service options
Webchat services > options

The table shows the JSON formats that can be set at the [Option] field in the Webchat services section.

Key Value
chat_event_actions Set Objects that have events(Keys) and actions(Values).

For the events that can be set, refer to “2-2. Webchat events” .

For the actions that can be set, refer to “2-3. Webchat actions” .

profinfo_format Set the format string for displaying the personal information entered by the customer on the UC user screen.
Refer to “2-4. Webchat service option format variables” for the variables that can be used in character strings.
queue_timeout_sec Set the queue timeout (seconds) for the Webchat service.
file_send_permission Set the character string indicating whether to allow the customer to send files.
“deny”: Deny all file transmissions
“image”: Allow image transmission only
Other string: allow all file transmissions
customer_sip_user Set the format string of the SIP user ID in the cases customers use WebRTC terminal.
The default is “web% conf_id%“.
Refer to “2-4. Webchat service option format variables” for the variables that can be used in the string.
customer_call_target Set the format string of the destination addressin the cases customers use the calling function on the WebRTC terminal.
The default is “%conf_ext%“.
Refer to “2-4. Webchat service option format variables” for the variables that can be used in the string.
call_enabled Set a boolean value indicating whether the customer can or cannot make calls.
Specifying true indicates that calls can be made.
call_target Set the format string of the destination address In the cases agents make calls.
The default is “%conf_ext%“.
Refer to “2-4. Webchat service option format variables” for the variables that can be used in the strings.
webchat_service_code If you want to add a webchat identification code to the webchat service, set the character string.
Duplicate values can be set for multiple webchat services.The value may be referred by the external application.
For example, In the case the Brekeke UC is integrated with Brekeke CCS, and webchats should be distribulted with same ACD to each appropriate projects in CRM, set a value equivalent to DNIS.
primary_app_info In the case that Brekeke UC is integrated with Brekeke CIM, set the object in which each key and value of primary application information is set.
secondary_app_info In the case that Brekeke UC is integrated with Brekeke CIM, set the object in which each key and value of the secondary application information is set.
auto_answer Specify a number to determine whether to automatically answer to web chat.
0 or no value set: Disable Auto answer.
2: Auto answer is conducted when user’s status is available.
255: Auto answer is conducted regardless of user’s status.

 

2-2. Webchat events

The events that can be set at chat_event_actions (Webchat services > options > chat_event_actions)

Event Explanation
welcome Event that occurs just after the customer enters the Webchat room.
queue_timeout Event that occurs when the Webchat service queue timeout time elapses after the customer enters the web chat room and no one responds.
over_max_sessions Event that occurs when the maximum number of guest sessions is exceeded and the customer can not enter the Webchat room.

 

2-3. Webchat actions

The actions (JSON format) that can be set at chat_event_actions (Webchat services > options > chat_event_actions).

  • The array that has a single object or multiple objects as elements can be set.
  • If an array is specified, element objects are executed in order.
  • The objects that can be set are shown below.

 

Action “auto_message”

Automatically send a pre-set message to customers.

Key Value
chat_action_type Set the string “auto_message”.
auto_message_id Set an Automated message ID.
Refer to the  “3. Automated messages”  for automated messages.

 

Action “close_chat”

Disconnect all Webchat participants and close the Webchat room.

Key Value
chat_action_type Set the string “close_chat”
2-4. Webchat service option format variables

Variables that can be set at the profinfo_format.

Item Explanation
%name% Customer’s name
%email% Customer’s e-mail address
%description% Description of a Webchat service
%profinfo.<Property name>% Optional property of the customer’s personal information object.
%guest_id% Guest ID.
ID that is automatically assigned to identify UC guest users and does not overlap with other IDs in the past month.
%user_id% User ID.
ID to identify all types of UC users.
%conf_id% Conference ID.
An auto-numbered ID that identifies all types of conferences in UC, and does not overlap with other IDs in the past month.
%conf_ext% Extension number of Conference
%webchat_id% Webchat ID.
An ID that is automatically assigned to identify UC web chat meetings and does not duplicate anything in the past.
%webchat_service_id% Webchat service ID
ID defined at the Webchat services section.
%br% Line Feed

 

3. Automated messages section

Define the messages to be sent automatically.

Item Explanation
Automated message ID ID that identifies the automated message.
Display name Set the character string displayed in the sender name field of the message.
Message Set the message content.

4. Webchat widgets Section

Defines a widget that is the entry point for the Webchat accessed by customers.

Item Explanation
Chat server Set the URL that customers can be used to connect to UC Server.
The URL of the UC server used by administrator for accessing this setting screen is set as default. If necessary, change the URL to the appropliate value. For example, in the case that the administrator accesses from a different network from the customer, the URL should be changed.
Description Description of a widget.
Service ID Set a Webchat service ID.
Type The type of the widget.

  • Pop-up is a style that pastes a tag to an external web page and pops up a window from there.
  • Page is a style where customers directly access the web chat page URL.
Script Set the script to be executed on the web browser on the customer side.
Refer to “4-1.Webchat widget script” for the scripts can be set.
Publish In the case the Type is “Pop-up” : Display an HTML tag for being pasted on a web page.

In the case the Type is “Page” : Display an URL that will be used by customers to access to the page.

4-1. Webchat widget script

The scripts that can be set in the Script field at the Webchat widgets section.

  • You can write JavaScript scripts freely.
    Because the object named option is predefined as a variable, by adding the objects with the following format to option.events, the event handler function can be executed at the timing determined for each event name.
{event name: event handler function, event name: event handler function,...}
  • Only the onBeforeLoad event can be executed by writing the contents of the event handler function in the Script field without using option.events.
    (Function for compatibility with previous versions)

 

Event:

Event Arguments Explanation
onBeforeLoad (option) A script is executed just after the customer accesses the web page and before displaying the personal information input fields.
onBeforePopup (option, window) A script is executed just before loading a popup window.
A script is executed only when the widget type is Popup.
onAfterPopup (option, window) A script is executed immediately just after loading a popup window.
A script is executed only when the widget type is Popup.
onAfterLoad (option, window, UcUiAction, UcUiStore, Phone, inputValues) A script is executed jst after the display of  the personal information input fields is completed.
onBeforeCheckForm (option, window, UcUiAction, UcUiStore, Phone, inputValues) A script is executed just before the input check of the personal information input fields at the start of the chat.
onBeforeSignIn (option, window, UcUiAction, UcUiStore, Phone) A script is executed just after the input check of the personal information input fields is completed and before the sign in action.
onAfterSignIn (option, window, UcUiAction, UcUiStore, Phone, inputValues) A script is executed just after the chat is started.
  • The “option” is an object that has the following properties, and the contents of the widget can be changed by rewriting the properties.
  • The “window” is a window object of the window in which you are chatting.
  • The “inputValues” is an object that has the key and input content of the personal information as a key and a value.

 

Properties of option.initOption.configurations object:

Property Explanation
signInFormStyles If you want to change the settings of the style sheet for the personal information input screen, set the object that defines the style object for each class name.
Specify as follows:{
Class name to apply style: {
property name: value,
property name: value,

},

}Style property names are described in camel-case.
signInButtonLabel Set the caption of the chat start button with a character string.
Valid only when signInButtonInnerHTML is not specified.
signInButtonInnerHTML Specify the caption of the chat start button in HTML.
profinfoInputsLabel Set the caption to be displayed at the top of the entire personal information input form with a character string.
Valid only when profinfoInputsInnerHTML is not specified.
profinfoInputsInnerHTML Set the caption to be displayed at the top of the entire personal information form in HTML.

(Available from Brekeke UC version 1.2.2.7 or later)

profinfoInputs Set an array whose elements are the objects that define the personal information entry fields.
In key, specify the property name of personal information corresponding to the input field.
Specify as follows:
[
{
key: “name”, “email” or “profinfo. <property name>”,
label: caption string (only valid if innerHTML is not specified),
innerHTML: caption HTML,
default: default value,
mandatory: If true, input is required, if false, chat can be started without input, if regular expression string is specified, input that matches the regular expression is required,
error: Display error message when the mandatory check is failed.
options: String array of choices, free entry field if not specified,
placeholder: Placeholder character string (valid only for free entry fields)
},

]
webchatOptionsLabel Set the caption of the web chat option selection field as a character string.
Valid only when webchatOptionsInnerHTML is not specified.
webchatOptionsInnerHTML Set the caption of the web chat option selection field in HTML.
webchatOptions Set an array of objects that define the options for web chat options.
The web chat option selection field is displayed only when an array of two or more elements is specified.
Set as follows:
[
{
label: caption string,
value: JSON string of web chat options
},

]
If you include the string “{0}” in the web chat options JSON string, a text box will also be displayed, and the string entered there will replace “{0}”.
By default, the following array is included. <Service ID> is the web chat service ID.[
{
label: ” “,
value: “{\”properties\”:{\”webchat_service_id\”:\”<Service ID>\”}}”
}
](As of version 1.1.4.x, only properties.webchat_service_id can be set for the web chat option, so there is no need to change the default.)The version 1.2.3.5 or later, you can also specify a property called properties.room in the web chat options.
If two or more guests start chatting in the same webchat_service_id and the same room, the second and subsequent guests will be in the same meeting as the first, and can chat with three or more people including UC users. However, only the first person is treated as a customer.
autoSignIn If false is specified, even if the personal information input screen can be skipped, it will not be skipped.
confirmUnload If false is specified, no confirmation is displayed when trying to close the page during a chat.
sendButton If false is specified, the submit button will not be displayed.
cameraButton If false is specified, the camera button will not be displayed. (Available in Brekeke UC version 1.2.5.7 or later.)
screenButton If false is specified, the screen share button will not be displayed. (Available in Brekeke UC version 1.2.5.7 or later.)
webRTCTypeName Set WebRTC type as a character string. If it is not specified, a default WebRTC type will be used. (Available in Brekeke UC version 1.2.5.7 or later.)
menuOptions Set an array whose elements are strings that represent the contents of the option menu.
When you click “Options”, the menu items will be displayed in the order specified here.
“end” is the “end chat” menu, “file” is the “send file” menu, “call” is the “make a call” menu, and “separator” is the separator.
By default, it contains the array [“end”].

 

Properties of the option.widgetProps object:

Property Explanation
windowTitle Set the window title
language Set the language of the widget.
“en” is English, “ja” is Japanese, unspecified is automatic.
useWebRTC define whether the widget uses the WebRTC calling feature or not.
If you set true, it will be used.

 

Properties of the option.sidetabStyle object (only valid when widget type is Pop-up):

Property Explanation
className Set the class name of the tab as a string.
If not set, “BrUCClientSidetab” is used by default.
innerHTML Set the innerHTML of the tab as a string.
If not set, ” ” is used by default.
extraStyle Set additional styles with CSS format like the follows:
“<Style property name>:<style value>;”
extraStyleOnHover Specify the style that will be used when the mouse is hovering over the tab.
delay Set the delay time (milliseconds) between opening a web page and displaying a tab.
parentId Specify the ID of the tab’s parent element as a string.
If not specified, the “document.body” will be used as the parent element.
getParent Specify a function to get the tab’s parent element.
If specified, parentId will be ignored.
showFunction Specify the function to set the tab.
The tab element will be set as an argument.
If this is specified, parentId, getParent will be ignored.
windowUrl Specify the URL of the popup window as a character string.
If not specified, “about:blank” will be used, but with that URL, accessing the microphone will not be allowed with Chrome.
To use the call function, you need to specify any dummy page in the same domain as the parent window.
(The browser access to the dummy page for a moment immediately after the popup, and it is overwritten immediately by the UI of the web chat widget)
windowName Specify the name of the popup window as a character string.
set it as the format in the windowName argument of the window.open() method.
windowFeatures Specify the optional argument of the popup window as a character string.
Describe by specifying in the features argument of the window.open() method.

 

Example setting when the widget type is Pop-up:

function onBeforeLoad(option) {
option.initOption.configurations.signInButtonLabel='START CHAT';
option.initOption.configurations.profinfoInputsLabel='CHAT INQUIRY';
option.initOption.configurations.profinfoInputs=[{
    key: 'name',
    label: 'Name',
    mandatory: true
}, {
    key: 'profinfo.company_name',
    label: 'Company Name',
    mandatory: false
}, {
    key: 'email',
    label: 'E-mail',
    mandatory: true
}, {
    key: 'profinfo.phone_number',
    label: 'Phone Number',
    mandatory: true
}, {
    key: 'profinfo.category',
    label: 'Category',
    options: [
        '',
        'Questions about products or services',
        'Questions about resellers',
        'Questions about product support'
    ],
    mandatory: true
}];
option.widgetProps.windowTitle='CHAT';
option.sidetabStyle.extraStyle="background:url('http://test.example/webchat_tab.png');width:30px;height:30px;top:40px;bottom:auto;border-radius:3px 0px 0px 3px;";
option.sidetabStyle.extraStyleOnHover="width:130px;height:30px;";
}
option.events={
    onBeforeLoad: onBeforeLoad
};

Example configuration, a widget of type is “Page” and personal information can be specified in URL queries:

function onBeforeLoad(option) {
var queryObject = {};
var queryString = window.location.search;
if (queryString) {
    var index = queryString.indexOf("?");
    if (index >= 0) {
        queryString = queryString.substr(index + 1);
    }
    var parameters = queryString.split("&");
    for (var i = 0; i < parameters.length; i++) {
        var kv = parameters[i].split("=");
        if (kv.length === 2) {
            var key = decodeURIComponent(kv[0]);
            var value = decodeURIComponent(kv[1]);
            queryObject[key] = value;
        }
    }
}
option.initOption.configurations.profinfoInputs = [{
    key: 'name',
    label: 'Name',
    options: queryObject['name'] ? [ queryObject['name'] ] : null,
    mandatory: true
}, {
    key: 'profinfo.company_name',
    label: 'Company Name',
    options: queryObject['company_name'] ? [ queryObject['company_name'] ] : null,
    mandatory: false
}, {
    key: 'email',
    label: 'E-mail',
    options: queryObject['email'] ? [ queryObject['email'] ] : null,
    mandatory: true
}, {
    key: 'profinfo.phone_number',
    label: 'Phone Number',
    options: queryObject['phone_number'] ? [ queryObject['phone_number'] ] : null,
    mandatory: true
}];
option.widgetProps.windowTitle='CHAT';
}
option.events={
    onBeforeLoad: onBeforeLoad
};
Yes No
Suggest Edit