Skip to main content

Configuration

Auvious widget is a web component to be used on 3rd party websites to initiate a video call from the customer side, without the need to go through the chat channel.

How to setup the widget

Auvious widget requires some parameters from Genesys Cloud in order to connect properly.

All these parameters collected must be set in the html tag like this.

<app-auvious-widget
pc-environment="abc-123-abc-123"
pc-organization-id="abc-123-abc-123"
pc-deployment-id="abc-123-abc-123"
...
other
parameters
...
></app-auvious-widget>

Where abc-123-abc-123 is the actual value.

Please refer to section Plain HTML Integration on how to install the widget on the website. Please refer to section Available Configuration Options for a full list of available options.

HTML integration

Using an HTML tag

caution

Make sure your html page has <meta charset=UTF-8> as a default charset. Safari has a known issue of not loading the scripts properly if the charset is set to another type such as charset=windows-1252

  1. Add this code to the <head> tag of your html
<script
type="module"
src="https://auvious.video/widget/dist/auvious/auvious.esm.js"
></script>
<script
nomodule=""
src="https://auvious.video/widget/dist/auvious/auvious.js"
></script>
  1. Add this code to before the closing </body> tag
<app-auvious-widget
pc-environment="<your-purecloud-environment>"
pc-organization-id="<your-organization-id>"
pc-deployment-id="<your-deployment-id>"
...
></app-auvious-widget>

For more available configuration options please check the table at the Configuration Options section.

Using JavaScript

Creating a widget in code gives you more flexibility on pre-filling customer data dynamically. You can create the widget once your user has logged-in and pre-fill the customer-name field so that your user doesn't need to type it on his own. Furthermore, you can add translations.

1.Add this code to the <head> tag of your html

<script
type="module"
src="https://auvious.video/widget/dist/auvious/auvious.esm.js"
></script>
<script
nomodule=""
src="https://auvious.video/widget/dist/auvious/auvious.js"
></script>
  1. Add this code before the closing </body> tag. You can find a list of all the configuration options at the Configuration Options section.
<script>
let widgetOptions = {
'application-id': '<AUVIOUS_APPLICATION_ID>',
'customer-avatar-url': '<CUSTOMER_AVATAR_URL>',
'registration-type': '<REGISTRATION_TYPE>',
'dark-mode': '<DARK_MODE>',
};

(async () => {
await customElements.whenDefined('app-auvious-widget');
showWidget();
})();

function showWidget() {

// create our widget
const widget = document.createElement('app-auvious-widget');

// get all the widget options and pass it to our widget.
Object.keys(widgetOptions).forEach(key => {
const value = widgetOptions[key];
widget.setAttribute(key, value);
})

// add the newly created widget to the body.
document.body.appendChild(widget);
}
</script>

ES5 & Google Tag Manager

Google Tag Manager requests the code in the page to be writtern in ES5 and not ES6. To support this, we replace arrow functions and async-await with simple functions and promises. Use this sample code to create a custom HTML Tag in GTM.

  <script>

(function () {
var s = document.createElement('script');
s.setAttribute('src', 'https://auvious.video/widget/dist/auvious/auvious.esm.js');
s.setAttribute('type', 'module');
document.head.appendChild(s);

var n = document.createElement('script');
n.setAttribute('src', 'https://auvious.video/widget/dist/auvious/auvious.js');
n.setAttribute('nomodule', '');
document.head.appendChild(n);

})();

var widgetOptions = {
'application-id': '<AUVIOUS_APPLICATION_ID>',
'customer-avatar-url': '<CUSTOMER_AVATAR_URL>',
'registration-type': '<REGISTRATION_TYPE>',
'dark-mode': '<DARK_MODE>',
};


window.customElements.whenDefined('app-auvious-widget')
.then(function () {
showWidget();
});


function showWidget() {

// create our widget
var widget = document.createElement('app-auvious-widget');

// get all the widget options and pass it to our widget.
Object.keys(widgetOptions).forEach(function (key) {
var value = widgetOptions[key];
widget.setAttribute(key, value);
})

// add the newly created widget to the body.
document.body.appendChild(widget);
}

</script>

Localization

If you want to provide your own translations there are two ways. If both ways are implemented on the same page, the external json file prevails.

Supported languages

1st way. Override specific translation strings inline

The first param must be a valid json. Second param is the language it refers to. This is optional. If none is provided, it will default to the locale language. If no locale is provided, it will default to english.

<script>
(async () => {
await customElements.whenDefined("app-auvious-widget");
const widget = document.querySelector("app-auvious-widget");

// inline
// second param is optional. If none provided, it will default to locale language
widget.setTranslations(
{ "Connecting...": "connecting in german..." },
"de"
);
})();
</script>

2nd way. Set translations from an external json file

The first param must be a url of a valid json file. Second param is the language it refers to. This is optional. If none is provided, it will default to the locale language. If no locale is provided, it will default to english. Add this script preferably inside the ready callback event of the app-auvious-widget tag.

info

You can provide translations to languages that we don't currently support. All dates in the widget and all copy in the video call will fall back to english.

<script>
(async () => {
await customElements.whenDefined("app-auvious-widget");
const widget = document.querySelector("app-auvious-widget");

// from external repository
// second param is optional. If none provided, it will default to locale language
widget.setTranslationFile("https://myserver.com/assets/de.json", "de");

// or
widget.addEventListener("ready", () => {
widget.setTranslationFile("https://myserver.com/assets/de.json", "de");
});
})();
</script>

Events

The Auvious Widget exposes the following events.

NameDescription
readyFired when the widget is loaded.
callStartingFired when the customer has landed to the room but has not joined yet, testing his/her devices.
callStartedFired when the customer has joined the call
callEndedFired when the customer has left the call
conversationStartedFired when the chat communication has started. Get the event.detail for the conversation id.
conversationEndedFired when the chat communication has ended with the agent.
agentConnectedFired when the agent has connected but not yet started the call. Get the event.detail for the agent id.
agentDisconnectedFired when the agent has left the conversation.
queueTimeChangedFired when the waiting time in queue has changed. Fires every second. Get the event.detail for an object containing seconds and minutes. Ex {seconds: "04", minutes: "00"}
errorHandledFired when an exception or error was caught by our widget. Does NOT fire for unhandled exceptions or errors in the video call.A HandledError object is returned in event.detail.
notificationOpenedFired when a notification is shown. The event.detail carries the notification type. Can be one of these: info, greeting, success, warning, error
notificationClickedFired when a notification was clicked to dismiss it. The event.detail carries the notification type. Can be one of these: info, greeting, success, warning, error
transferFired when a conversation is transferred to another agent. The event.detail carries the conversation id. Once a new agent joins the call, an agentConnected event is triggered
cobrowseConnectingFired when a co-browse session is about to start.
cobrowseConnected Fired when a co-browse session is established.
cobrowseDisconnectedFired when a co-browse session terminated either by the agent or the customer.
cobrowsePermissionsChangedFired when a permission in a session has been granted or revoked. Get the event.detail for a map of {view: boolean, control: boolean, displayCapture: boolean}. Each of this keys will have a true/false value. view is the first permission automatically granted, which means the co-browse session has now started and the agent can see the customer's page.

HandledError

PropertyTypeDescription
codenumberOne of the available error codes below.
namestringName of the handled error.
messagestringDescription of the handled error.
stackstringStack trace

Error codes

CodeDescription
1Auvious event client error.
2Browser detection failed.
3Copy-to-clipboard failed.
4Error log failed.
5HTML parsing for media player failed. Probably malformed HTML passed to setQueueEmbeddableVideoCode.
6Error while calling a Genesys API. Description has more details.
7Digital connect API error
8Digital connect authentication error. Please verify the touchpoint id, application id etc.
9Digital connect RTC registration error. Could not connect or register to RTC service.
10Could not start Genesys chat service. Probably bad configuration at CXBus.
11A required widget property was not provided. The widget cannot load.
12Not a valid/known Genesys pcEnvironment.
13Not a valid registration type. Expected name, nameEmailSubject, custom
14Not a valid greeting action. Expected audio, video, callback, cobrowse, chat
20Co-browse invalid PIN provided. Could not authenticate user. Check your auvious-environment if it points to the correct environment or the PIN has expired.
21Co-browse API error.
22Co-browse authentication error. Probably an invalid PIN
23Co-browse leave failed.
24Co-browse join failed.
25Co-browse resume session failed.
26Display capture failed.
27Publish display capture stream failed. Could not send stream to other participants
30Genesys Premise File transfer API error.
40Not valid custom fields. Check the ICustomField model
41Missing custom fields. registration-type is set to custom but custom fields are missing.
42A required field is missing
43Not valid customer metadata. setCustomerMetadata expects an object but something else was provided.
50Could not start a new conversation. Check your widget parameters for any typos (deployment-id, organization-id) or if a conversation is already active
51Could not end conversation.
52Could not parse auvious URL to open a pop-up.
53iFrame (video call) was already destroyed while trying to send a message.
54Could not join a co-browse session.
55iFrame (video call) sent invalid metadata.
56Could not parse Genesys web chat message received.
57Genesys client was not able to connect.
58Genesys typing indicator (we wend a 'typing' message to keep the conversaiton alive) failed to send
59Genesys send message failled.
510Genesys Conversation estimated time error. Please check your pc-queue-id or application-id and make sure you have set a client id and secret in auvious settins.
60Media devices are not available. Check browser permissions.
61Could not request for camera or microphone. Check if already used by another application.
62Browser not supported. Please use a modern browser.
70Could not start a new Sketch session.
71Sketch API error.
80Could not authenticate with the OTP provided.
81Could not create a Genesys Cloud Callback.
90Could not load list of Country codes.
91Could not load translation file. Check if json is valid.
400Genesys Web Messaging could not authenticate conversation in authenticated web-messaging flow.
403Genesys Web messaging forbidden. Turn on the Feature Toggle or fix the configuration.
404Genesys Web messaging not found. An object referenced in the request was not found, pass an id that exists.
408Genesys Web messaging request time-out. Was unable to fulfil the request in time. You can retry later.
409Genesys Web messaging Conflict. Session is in read-only mode. Start a new session
429Genesys Web messaging too many requests. Retry later.
4001Genesys Web Messaging file type not supported
4002Genesys Web Messaging file size too big
4003Genesys Web Messaging file content invalid
4004Genesys Web Messaging file name invalid
4005Genesys Web Messaging file name too long
4006Genesys Web Messaging session expired
4007Genesys Web Messaging session not found
4008Genesys Web Messaging attachment expired
4009Genesys Web Messaging attachment not found
4010Genesys Web Messaging attachment upload failed
4011Genesys Web Messaging message length too long
4012Genesys Web Messaging session closed
4013Genesys Web Messaging custom attributes too large
4029Genesys Web Messaging too many requests
4102Genesys Web Messaging file size is missing or 0. Supply a non-empty attachment.

Example

...
const widget = document.createElement('app-auvious-widget');
widget.addEventListener("callStarted", () => {
// do stuff
});
widget.addEventListener("queueTimeChanged", (event) => {
// do stuff
console.log(event.detail)
});
...

Methods

The Auvious Widget exposes the following methods

MethodValue
launch(action: 'video', cobrowseTicket?: string)Directly start a subflow, without the user having to press a button. Available options: audio,video,cobrowse,callback. Specifically for a co-browse action, if you also provide a co-browse ticket(OTP) a co-browse session will automatically start.
setAuthenticatedSessionCode(token: string)For usage by authenticated users only, call this method on every ready event emitted by the widget. A value of null resets mode back to guest. Currently available for Genesys web-messaging only.
setTranslations(map: <key, value> json, language?: string)Override translation keys. If language is not provided, override for current language set inlocale. If no locale is set, override for default language (english)
setTranslationFile(url: string, language?:string)Fetch translation json. URL must serve a valid json. If language is not provided, override translations for current language set inlocale. If no locale is set, override for default language (english)
setCobrowseFilters(filters: string[]Set an array of css selectors that will be filtered out on the agent side. Used mainly to filter out credit card or password forms.
terminate(confirm: boolean = true)Ends any active flow. Like clicking the ( X ) button. Expects an optional boolean parameter, whether to show the confirmation panel or not. Defaults to true.
setQueueEmbeddableVideoCode(code: string)Set an <iframe /> embeddable code (youtube etc) to be show to the customer while on queue.
setCustomFields(fields: ICustomField[])Sets custom fields to the contact form. Needs registration-type to be custom.
setCustomerMetadata(map:<key, value> json) : Promise<void>Set extra fields to customer metadata object. Throws a promise rejection if metadata are not a valid object. Can be retrieved in Genesys Cloud with the prefix context.. Ex. if we set this object {token: '123'} we can retrieve it with this key: context.token
playNotificationSound()Plays the default notification sound or the sound that was set with the property notification-sound-url
setSchedule(schedule: ISchedule)Set the working hours for which one can schedule a callback
setBeforeLaunchAction(callbackFn: (userSelectedAction: string)=> Promise<void>)Set a function to be executed when the user clicked any of the available widget actions (start a video call, co-browse etc). The function should return a promise. If the promise is rejected, the user-initiated action will not be executed. The user-selected action is passed as the first parameter of the callback function.

ICustomField

info

At least one custom field should be named firstName for a conversation to start.

PropertyRequiredTypeDescription
typeyestext,selectRender either a text field or a select field.
nameyesstringThe form field name. Will be sent in the customFields as is. Prefer camelCase
requiredyesbooleanSets the form field as required or not
labelnostringLabel of the form field.
optionsno (yes if type='select')ISelectOption[]List of available options for this field

ISelectOption

PropertyRequiredTypeDescription
valueyesstringValue of the field. This will be comminucated back to the server.
labelyesstringLabel of the select option.

ISchedule

PropertyRequiredTypeDescription
timeZoneyesstringThe IANA time zone name (column TZ database name in wikipedia )
scheduleyes{open?: IScheduleEntry, closed?: IScheduleEntry}An object with optional open and closed properties.

By default, it is assumed the store is always open. You can restrict its schedule to a certain periodic time range or specific dates by providing open. The closed takes precedence over open, and excludes ranges from it. Each entry in both properties only apply to one or more days interval, all having a common inter-day time schedule. Order does matter, as the first one that matches a day, is the one enforced.

IScheduleEntry

PropertyRequiredTypeDescription
datenostring OR string[]One or more, single day or days interval, with format [YYYY-]MM-DD[/[YYYY-]MM-DD]
timenostring OR string[]One or more time intervals with format HH:MM/HH:MM
weekdaysnonumber OR number[]Days of the week from Sunday (1) to Saturday (7)
reasonnostringFormal reason for being closed, if applied, to inform user

When both weekdays and date are supplied, only days of the week that are included in the date interval are matched. A date without year, matches all years and more generally, anything not provided, its whole interval is assumed by default.

Example

<script>
(async () => {
await customElements.whenDefined('app-auvious-widget');
const widget = document.querySelector('app-auvious-widget');

// launch action
widget.launch(‘video’);

// co-browse filters
widget.setCobrowseFilters(['.password-field', '#credit-card-container input']);

// set custom fields. Don't forget to set 'registration-type' to 'custom'
// at least one field should be named 'firstName' for a conversation to start
widget.setCustomFields([
{ type: "text", name: 'firstName', required: true, label: 'First name *' },
{ type: 'text', name: 'lastName', required: false, label: 'Last name' },
{
type: 'select', name: 'subject', required: true, label: 'Subject', options: [
{ value: 'subject-returns', label: 'Returns' },
{ value: 'subject-tech', label: 'Techical support' }
]
},
{
type: 'select', name: 'testField', required: false, label: 'Test field', options: [
{ value: null, label: '-- please choose --' },
{ value: 'test-1', label: 'Test Field 1' },
{ value: 'test-2', label: 'Test Field 2' }
]
}
])

// set embeddable video (iframe) to be shown while waiting on queue.
widget.setQueueEmbeddableVideoCode(
'<iframe width="560" height="315" src="https://www.youtube.com/embed/abc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'
)

// Customer metata. Can be retrieved in PureCloud as 'context.myproperty' etc.
widget.setCustomerMetadata({ 'myproperty': 'value' });

// set schedule
widget.setSchedule({
timeZone: "Europe/Athens",
schedule: {
open: [
{ weekdays: [2, 4, 6], time: "09:00/14:30" },
{ weekdays: [3, 5], time: ["09:00/15:00", "17:30/21:00"] },
],
closed: [
{ date: "2022-09-30", time: "12:45/13:30", reason: "Maintenance" },
{ date: "2022-12-30/2023-01-02", reason: "New Year" },
{ date: "05-01", reason: "International Workers' Day" },
],
},
});

//....

//terminate
widget.terminate();

// Please check “Localisation” on how to use setTranslations | setTranslationFile
})();
</script>

Theming

There are two layers of customisation for our widget

  1. You can use the configuration options below to select a primary and accent color as well as set a dark mode or change the launcher icon if needed. Read the Configuration options section for more details.
  2. You can use our exposed css variables to do more fine-grained customisation.
info

If you set both css variables and configuration options, the configuration options are used.

info

The CSS variables are also passed into the call, meaning you can further theme the call UI. Read the theming section for more information.

CSS Variables

Add this code snippet to the <head> node of your HTML page and use and modify only the css variables that are needed for your theming

<style type="text/css">
html:root {
--av-font-family: /* font family to be used. Don't forget to include the link for the fonts. Defaults to sans-serif */ ;
--av-font-family-monospace: ;
--av-font-family-serif: ;
--av-border-radius-container: /* roundness of corners for all containers. Defaults to 10px */ ;
--av-border-radius-button: /* roundness of corners for square buttons. Defaults to 5px */ ;
--av-box-shadow-container: /* shadow of containers. */ ;
--av-box-shadow-confirm: /* shadow of confirmation notification. */ ;
--av-background-color-tray: /* background color of the tray area. Defaults to black. */ ;
--av-color-tray: /* font color of the tray area. Defaults to white. */ ;
--av-font-size: ;
--av-font-color: ;
--av-font-color-dark: /* text color in all light containers (dark-mode off). */ ;
--av-font-color-light: /* text color in all dark containers (dark-mode on) */ ;
--av-font-muted-opacity: ;
--av-background-color: ;
--av-color-primary: /* background color of primary buttons (launcher ) */ ;
--av-color-primary-contrast: /* color of primary buttons (launcher ) */ ;
--av-color-accent: /* background color of secondary buttons */ ;
--av-color-accent-contrast: /* color of secondary buttons */ ;
--av-color-accent-dark: /* darker background color of secondary buttons */ ;
--av-color-danger: /* background color of errors. Used in text as well as backgrounds */ ;
--av-color-danger-contrast: /* color of errors. */ ;
--av-color-success: /* background color of success messages. used in text as well as backgrounds */ ;
--av-color-success-dark:/* darker background color of success messages. */ ;
--av-color-success-contrast: /* color of success messages. */ ;
--av-color-warning: /* background color of warning messages. Used in text as well as backgrounds */ ;
--av-color-warning-contrast: /* color of warning messages. */ ;
--av-color-info: /* background color of info messages. Used in text as well as backgrounds */ ;
--av-color-info-contrast: /* color of info messages. */ ;
--av-color-gray: ;
--av-color-gray-light: ;
--av-color-gray-lighter: ;
--av-color-gray-lightest: ;
--av-color-gray-dark: ;
--av-color-gray-darker: ;
--av-color-gray-darkest: ;
--av-color-black: ;
--av-color-white: ;
--av-link-color: ;
--av-card-background-color: /* background color of cards */ ;
--av-card-background-blur-color: /* background color of cards where backdrop blur is supported. We need transparency for the effect to work */ ;
--av-card-background-secondary-color: ;
--av-card-color: /* font color of cards */ ;
--av-card-border-color: ;
--av-card-border-top-color: ;
--av-card-separator-color: ;
--av-card-form-input-background-color: ;
--av-card-link-color: ;
--av-card-menu-item-color: ;
--av-card-menu-item-background-color-hover: ;
--av-card-menu-item-background-color-active: ;
--av-separator-color: ;
--av-separator-color-light: ;
--av-separator-color-dark: ;
--av-box-shadow-container: ;
--av-form-input-background-color: ;
--av-form-input-color: ;
--av-form-input-border-radius: ;
--av-form-input-search-border-radius: ;
--av-spinner-color-light: ;
--av-spinner-color-dark: ;
--av-menu-item-color: ;
--av-menu-item-border-radius: ;
--av-menu-item-background-color-hover: ;
--av-menu-item-background-color-active: ;
--av-table-row-hover: ;
--av-table-row-active: ;
--av-table-row-border-color: ;
--av-table-row-border-width: ;
--av-tootlip-background-color: ;
--av-tooltip-color: ;
--av-tile-background-color: ;
--av-tile-background-surface-color: ;
--av-tile-color: ;
--av-tile-border-color: ;
--av-tile-border-width: ;
--av-backdrop-color: ;
--av-container-round-width: ;
--av-floating-margin-top: ;
--av-floating-margin-bottom: ;
--av-floating-margin-left: ;
--av-floating-margin-right: ;

html:root[data-av-theme="dark"] {
/** overwrite any variables for dark-mode */
}
}
</style>

Widget positioning

You can anchor the widget in any the four corners of a page and also in the center of the horizontal axis. To do so you can use the below configuration options

PropertyRequiredDefaultValuesDescription
position-horizontalNorightleft, center, rightWhere to position the widget horizontally.
position-verticalNobottomtop,bottomWhere to position the widget vertically

If you require more control over the exact margins on each corner, you can overwite the exposed css variables like so.

<style type="text/css">
/* We assume that the position is at the bottom right of the page */
html:root {
--av-floating-margin-bottom: 20px;
--av-floating-margin-right: 20px;

/* other available variables */
--av-floating-margin-left: 20px;
--av-floating-margin-top: 20px;
}

/* different margins for mobile devices */
html:root[data-av-device="mobile"] {
--av-floating-margin-top: 5px;
--av-floating-margin-bottom: 5px;
--av-floating-margin-left: 5px;
--av-floating-margin-right: 5px;
}

</style>

Configuration options

This widget exposes the following properties. For Genesys specific properties please visit the Genesys section.

PropertyRequiredDefaultValuesDescription
chat-modeNogenesys-cloudgenesys-api, genesys-cloud, genesys-premise, genesys-web-messaging, talkdesk-digital-connectRequired. Sets what chat service to use.
auvious-environmentNoauvious.videoauvious.video, us.auvious.video, au.auvious.videoAuvious region instance it will send API calls to.
organizationNoAuviousName of your organization. Used in OTP SMS text as the sender’s name.
application-idYes*Can be found in Genesys purecloud / auvious virtual counselor integration / settings
* Required if callback is enabled.
registration-typeNonamename nameEmailSubject customIndicate whether to caputer only name or show a popup that captures first name, last name,email and subject before the video call begins. Set to custom to load your own fields.
customer-avatar-urlNoAuvious logoThe avatar that will be shown for the customer in the PureCloud Conversation. Defaults to auvious logo.
customer-display-nameNoPrefill customer name and jump right into a conversation without the need to register a name. Makesregistration-type redundant.
customer-display-name-broadcastNofalsetrue,falseSend the customer's name as a chat message. Convenient when the customer's name does not appear on the agent side (such as in Genesys Web Messaging)
customer-subjectNoOptional. Requirescustomer-display-name
customer-emailNoOptional. Requirescustomer-display-name
dark-modeNofalseEnable dark mode . White panels become dark.
color-primaryNoblackCss color such as red, green etc, or hex ex: #333333Optional. Changes black color to value provided. Must be a valid css color value.
color-accentNoauvious blueCss color such as red, green etc, or hex ex: #333333Optional. Changes blue color to value provided.Must be a valid css color value.
color-warnNoAuvious redCss color such as red, green etc, or hex ex: #333333Optional. Changes red color to value provided.Must be a valid css color value.
localeNoen-GRAvailable language optionsen, el, de, es, fi, nl, pl, sv, tr, zh or any custom translation provided. Country: all ISO country codes.First part is the language, second part is the country (2-digit-ISO). Note: the country ISO is used as the default country in the callback panel.
languageDeprecated. Please uselocale
queue-extra-secondsNo30Extra seconds to wait for an agent if none of the agents are responding. Starts counting when in queue and the agent didnt answer the call and is waiting to 'make eligible for interactions'
wait-for-greeting-secondsNo3Set to -1 if you don't want any greeting popup. Otherwise, any positive number.How many seconds to wait before it shows the greeting.
active-widgetsNovideochat, video, callback, audio, cobrowse. Example "video,callback"String in csv format.
kiosk-modeNofalsetrue,falseSets the video call to the full width/height of the browser window. The customer is not presented with the ‘check your devices’ screen and directly joins the call. To fully automate customer joining to the call, set the customer-display-name as well.
queue-max-minutesNo5After X minutes on queue, the customer will get a notification that no agents are available. Set -1 to disable and have the customer wait as long as he wants.
position-horizontalNorightleft, center, rightWhere to position the widget horizontally.
position-verticalNobottomtop,bottomWhere to position the widget vertically
close-hiddenNofalsetrue,falseHides X button when on an active interaction.
pop-out-hiddenNofalsetrue,falseHides pop-out button on video card.
incoming-chat-messages-blockedNofalsetrue,falseBlocks incoming chat messages (from agent). Chat panel will not be shown if on a video call and an incoming message arrives.
queue-video-urlNoFile url (preferably .mp4) to load in a video player while the customer is waiting in queue.
queue-video-delay-secondsNo3Number of seconds to dealy the appearance of the video, from the time the customer is on queue.
launcher-image-urlNoChange the default widget launcher image. This image will be applied either you have only one active widget or multiple.
confirm-callNofalsetrue, falseShow a confirmation popup before starting the call with the agent. If rejected, the agent will have to send a new link via chat to ask again for a call
greeting-actionNoaudio, video, callback, chat, cobrowseDefine what widget to launch when the greeting notification was clicked
greeting-sound-onNotruetrue, falsePlays a notification sound once the greeting is shown
notification-sound-urlNoAny valid sound file url (preferably https)Use this sound instead of the default one when the greeting sound plays or when the playNotificationSound() method is called.
scheduleNoA valid ISchedule objectIt has the same effect as calling setSchedule().
schedule-pickerNostandardstandard, timeslotsChange the way of setting up a scheduled call. The standard option uses a time picker whereas the timeslots option uses a list of timeslots. The timeslots can be restricted to specific hours using the setSchedule() method.
test-device-permissionsNofalsetrue,falseRequests access to camera and microphone before starting a conversation so as not to request again when the video call starts.
schedule-interval-minutesNo15Any positive numberChanges the duration of the time picker in the standard schedule picker in a schedule request or the duration of timeslots. We advice to not go below 15 minutes for usability issues.
schedule-overlap-checkNofalsetrue, falseApplies ONLY to appointments. If another call has already been scheduled for that specific time, that time unit will not be available for selection in the widget. If customer B takes the timeslot of customer A, while A is scheduling it, customer A will not be able to proceed to book.
schedule-overlap-max-concurrentNo1Any positive numberApplies ONLY to appointments and assuming the schedule-overlap-check is enabled. By default only one appointment per timeslot can be scheduled. Increase this number to allow up to X apointments per timeslot to be scheduled.

scheduleOverlapMaxConcurrent