Client WebSettings
WebSettings Request
The Visitor Chat client has various customisable options, such as from styling the colours of the chat box elements to parameters that control where chats are routed. This information is the first point of action to initialise the client chat box with the chat server.
You will need to send a GET request with the identifier of the installation, this can either be the domain name or a custom alphanumeric string set by your account manager.
Here is a basic example using fetch for the VC homepage, identifier has defaulted to the domain as no custom ID was set.
fetch("https://chat2.visitor.chat/api/v2/webSettings?identifier=visitor.chat");
{
// See the Chat Box Configuration section below.
"data": {},
// Chat server socket host address.
"host": "chat.visitor.chat:53087",
// Whether installation has set ajax routing.
"hasAjaxRouting": 0,
// The installations privacy policy URL.
"privacyUrl": null,
// The installation ID.
"installationId": 123,
// See the Qualification Process section below.
"qualificationProcess": [],
// Whether SMS is enabled for this installation.
"hasSms": true,
// The WhatsApp number to send messages to.
"whatsAppNumber": "447123456789"
}
Error Responses
Missing parameters
// Status Code 422
{
"message": "The identifier field is required.",
"errors": {
"identifier": [
"The identifier field is required."
]
}
}
Invalid identifier / inactive installation
// Status Code 422
{
"error": "Unknown installation"
}
Server error
// Status Code 500
{
"message": "Server Error"
}
Chat Box Configuration
Here is an example chat box configuration output from webSettings.
The configuration of the chat box is subject to modifications as updates are periodically implemented to enhance styling and functionality.
{
// Position of the main chat box component.
"position": {
"corner": "bottom_right",
"xOffset": "30",
"yOffset": "40",
"xOffsetSmallDevices": 35,
"yOffsetSmallDevices": 35
},
// The main chat box component.
"chatBox": {
"bgColor": "#ffffff",
// Whether to automatically show the chat box after x seconds. 0 = disabled.
"showAfter": 0,
"showAfterMobile": 0,
"textColor": "#000000",
// Header text is provided if no header image is provided.
"headerText": "",
"headerTextColor": "#276693",
"headerColor": "#ffffff",
"headerImage": "image.png",
"chatMessage": {
"leftBgColor": "#286090",
"rightBgColor": "#D7D7D7",
"leftTextColor": "#ffffff",
"rightTextColor": "#030303"
},
// Whether offline messages are allowed to be submitted.
"leaveMessage": {
"active": true,
// Show the offline message form if chat is not assigned with x seconds. 0 = disabled.
"showAfterNoAnswer": 0
},
"welcomeMessage": "Welcome to Visitor Chat.",
"sendButtonColor": "#286090",
// Whether to show the pre-chat visitor details form.
"detailsFormActive": false,
"qualificationProcess": {
"questionBgColor": "#286090",
"questionTextColor": "#FFFFFF",
"questionAnswerBgColor": "#0CB3E8",
"questionAnswerTextColor": "#ffffff",
"questionAnswerBgColorHover": "#07A6D9",
"questionAnswerOfflineBgColor": "#FFFFFF",
"questionAnswerOfflineTextColor": "#9A9A9A"
}
},
// The call to action component.
"callToAction": {
"text": "Click here to chat with us",
"title": "Live Chat - We're Online",
"active": true,
"bgColor": "#FFFFFF",
// Automatically show this component after x seconds.
"showAfter": 3,
"textColor": "#0791E7",
"titleColor": "#0865E1",
"borderColor": "#286090",
"closeButton": {
"color": "#000000",
"active": true
},
// Whether to show if there are no operators online.
"offlineActive": false,
// Whether to hide for smaller devices / mobiles.
"showOnSmallDevices": false
},
"speechBubble": {
"title": "Live Chat - Can we help you?",
"titleColor": "#0CB3E8",
"text": "We're online and ready to talk!",
"active": false,
"bgColor": "#FFFFFF",
"operator": {
"name": "Visitor Chat",
"avatar": "image.png"
},
// Automatically show this component after x seconds.
"showAfter": 1,
// Whether to show if there are no operators online.
"offlineActive": false,
// Whether to hide for smaller devices / mobiles.
"showOnSmallDevices": false
},
// The floating button component.
"floatingButton": {
"image": null,
"active": true,
"bgColor": "#286090",
"bgColorHover": "#0CB3E8",
"useSvgAlt": false,
// Whether to hide for smaller devices / mobiles.
"showOnSmallDevices": true
}
}
Qualification Process
Here is an example qualification process output from webSettings. The qualification process functions as a pre-chat funnelling system, in which visitors are presented with questions and corresponding clickable answers. This process is designed to guide visitors to the appropriate department. We achieve this through qualification answers, which can be optionally associated with specific teams.
With the example configuration below, if the visitor clicks Sales then this will route to the second question, otherwise choosing Other will enter the chat and assigned to team 123. Here are some screenshots representing this.
[
{
"id": 1,
"installation_id": 123,
"question": "Choose a department",
// Whether this is the initial question, other questions can only be reached from other answers.
"initial": true,
"answers": [
{
"id": 1,
"name": "Sales",
// The order in which to show this answer for the question.
"order": 0,
// The optional image to show for this answer.
"image_path": null,
// The question to route to for the next question. If this is set to null, then continue to chat.
"linked_question_id": 2,
// The optional team ID for this answer to be available.
"account_team_id": null,
"qualification_question_id": 1,
"deleted_at": null,
"created_at": "2024-01-11T16:22:01.000000Z",
"updated_at": "2024-03-06T16:24:48.000000Z",
"all_lead_resolutions": true,
"lead_resolutions": []
},
{
"id": 2,
"name": "Other",
"order": 1,
"image_path": null,
"linked_question_id": null,
"account_team_id": 123,
"qualification_question_id": 1,
"deleted_at": null,
"created_at": "2024-01-11T16:22:01.000000Z",
"updated_at": "2024-02-15T08:57:29.000000Z",
"all_lead_resolutions": false,
"lead_resolutions": []
}
],
"deleted_at": null,
"created_at": "2024-01-11T16:22:01.000000Z",
"updated_at": "2024-01-11T17:44:01.000000Z",
},
{
"id": 2,
"installation_id": 123,
"question": "Choose a location",
"initial": false,
"answers": [
{
"id": 3,
"name": "Location A",
"order": 0,
"image_path": null,
"linked_question_id": null,
"account_team_id": null,
"qualification_question_id": 2,
"deleted_at": null,
"created_at": "2024-03-06T16:24:48.000000Z",
"updated_at": "2024-03-06T16:24:48.000000Z",
"all_lead_resolutions": true,
"lead_resolutions": []
},
{
"id": 4,
"name": "Location B",
"image_path": null,
"linked_question_id": null,
"account_team_id": null,
"qualification_question_id": 2,
"deleted_at": null,
"created_at": "2024-03-06T16:24:48.000000Z",
"updated_at": "2024-03-06T16:24:48.000000Z",
"all_lead_resolutions": true,
"order": 1,
"lead_resolutions": []
}
],
"deleted_at": null,
"created_at": "2024-03-06T16:24:48.000000Z",
"updated_at": "2024-03-06T16:24:48.000000Z",
}
]