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.

Auvious widget requires some parameters in order to connect properly. These parameters are split into integration specific and widget specific. Instructons for integration specific can be found below:

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

<app-auvious-widget
  application-id="<your-application-id>"
  chat-mode="<integration-specific-chat-mode>"
  organization="<your-organization-name>"
  ...
  other
  parameters
  ...
></app-auvious-widget>

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

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>

Add this code to before the closing </body> tag

<app-auvious-widget
  application-id="<your-application-id>"
  chat-mode="<integration-specific-chat-mode>"
  organization="<your-organization-name>"
  ...
></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>

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>

Cross-domain support

Under normal circumstances, if an Auvious widget is set up on one domain and the user navigates to a different domain, the widget cannot maintain the conversation. This limitation arises because browser security restrictions prevent session and local storage—used to store widget session data—from being shared across domains.

For these reasons, we provide two methods that allow you to extract the widget’s current state, transfer it to another domain (via a query parameter or a server POST/GET request, for example), and restore the session on the new domain.

getRestoreState()

This method returns a string representing the current state of the widget. The string can be included in a URL or sent to a server. Note that, depending on the state, the string may exceed 2,000 characters. While modern browsers support URLs up to 60,000 characters, it’s important to consider the string’s size when implementing this functionality.

restoreState(state: string)

This method accepts the string exported by the previous method and attempts to restore the widget’s state.

Example

const widget = document.querySelector("app-auvious-widget");

async function getState() {
  const state = await widget.getRestoreState();
  // do something with the state
}

// ...

widget.addEventListener("ready", async () => {
  const state = await getStateFromURL(); // a method that checks the url and returns the state
  // whenever a conversation starts, a key is stored in the localStorage and cleared once the conversation ends.
  // if the key exists, the widget will automatically try to restore the conversation.
  const conversationExists = localStorage.getItem("auvious.conversation.type");
  if (state && !conversationExists) {
    widget.restoreState(state);
  }
});

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

Arabic (ar) | JSON file
German (de) | JSON file
Greek (el) | JSON file
English (en) | JSON file
Spanish (es) | JSON file
Finnish (fi) | JSON file
French (fr) | JSON file
Italian (it) | JSON file
Dutch (nl) | JSON file
Polish (pl) | JSON file
Portuguese (pt) | JSON file
Swedish (sv) | JSON file
Chinese simplified (zh) | JSON file

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>

Right-to-left languages

Auvious widget offers support for right-to-left languages such as Arabic. To enable this you just need to set a css variable like so.

<style type="text/css">
  html:root {
    --av-direction: rtl;
  }
</style>

Events

The Auvious Widget exposes the following events.

Name	Description
`ready`	Fired when the widget is loaded.
`callStarting`	Fired when the customer has landed to the room but has not joined yet, testing his/her devices.
`callStarted`	Fired when the customer has joined the call
`callEnded`	Fired when the customer has left the call
`conversationStarted`	Fired when the chat communication has started. Get the `event.detail` for the conversation id. The id is only available in Genesys Web Chat.
`conversationDataChanged`	Fired when the conversation id is available. Get the `event.detail` for an object that contains the conversation id. Helpful in Genesys Web messaging interactions where you need to send the conversation id via a chat message.
`conversationEnded`	Fired when the chat communication has ended with the agent.
`agentConnected`	Fired when the agent has connected but not yet started the call. Get the `event.detail` for the agent id.
`agentDisconnected`	Fired when the agent has left the conversation.
`queueTimeChanged`	Fired 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"}`
`errorHandled`	Fired 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`.
`notificationOpened`	Fired when a notification is shown. The `event.detail` carries the notification type. Can be one of these: `info`, `greeting`, `success`, `warning`, `error`
`notificationClicked`	Fired 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`
`transfer`	Fired 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
`cobrowseConnecting`	Fired when a co-browse session is about to start.
`cobrowseConnected`	Fired when a co-browse session is established. The `event.detail` carries the auvious session id (that could be the conversation id in specific scenarios).
`cobrowseDisconnected`	Fired when a co-browse session terminated either by the agent or the customer.
`cobrowsePermissionsChanged`	Fired 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.
`queueEstimatedWaitTimeChanged`	Fired when the estimated wait time in queue has changed. Fires every 10 seconds. Get the `event.detail` for an object containing `seconds`. Ex `{seconds: 10}`. Applies only for `genesys-cloud` and `genesys-api`.

HandledError

Property	Type	Description
code	number	One of the available error codes below.
name	string	Name of the handled error.
message	string	Description of the handled error.
stack	string	Stack trace
breadcrumbs	`IBreadcrumb[]`	A log of the actions that user has done up to this error. Keeps up to 50 items.

IBreadcrumb

Property	Type	Description
message	string	A description of the action.
timestamp	date	Timestamp of the action.
metadata	any	Any extra information relevant to the message.

Error codes

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

Method	Value
`launch(action: 'video', cobrowseTicket?: string)`	Directly start a subflow, without the user having to press a button. Available options: `audio`,`video`,`cobrowse`,`screenshare`,`chat`,`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: {string: string}, language?: string)`	Override translation keys. If language is not provided, override for current language set in`locale`. 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 in`locale`. If no locale is set, override for default language (english)
`setCobrowseFilters(filters: string[], type?: 'darkBox','blurBox')`	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. You can also change the way the filter is shown on the agent side. The default is a dark box, you can change to show a blurred field and all the field text is replaced with random text.
`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: string]: string})`	Set extra fields to customer metadata object. Throws a promise rejection if metadata are not a valid object. Can be retrieved in Genesys Cloud for web chat interactions with the prefix `context.`. Ex. if we set this object `{token: '123'}` we can retrieve it with this key: `context.token`. In other integrations it is retrieved as sent. Can also be seen in interaction details.
`playNotificationSound()`	Plays the default notification sound or the sound that was set with the property `notification-sound-url`
`setSchedule(schedule: [ISchedule](#ischedule))`	Set the working hours for which one can schedule a callback
`setBeforeLaunchAction(callbackFn: (userSelectedAction: string)=> Promise)`	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.
`setCallQuality(options:` ICallQuality`)`	Overwrite the video quality settings found in auvious settings. This is helpful in situations where you need to configure specific regions to use lower video quality options due to bad network conditions.
`getRestoreState(): Promise<string>`	Retrieves the widget's state (string) that is stored in the local/session storage so that it can be restored in another domain and continue the conversation there.
`restoreState(state:string)`	Restored the widget state (most likely in another domain) and continue the conversation there.
`setAppointmentNotificationHeaders(headers:{ [key: string]: string} )`	Set extra custom headers to an appointment. These headers will be used in the appointment webhook meaning the integrator's webhook service will also receive these headers on appointment status updates.
`setCustomAssets(options: { assetPath: string; assets: string[] })`	Change the default icons. You need to set the asset path and an array of the assets you want replaced. All other assets will be defaulted.
`setCobrowseIFrameOriginFilters(urls: string[])`	Hide specific iframes during a co-browse session. For example you may have an iFrame in a page which is used for authentication. You can hide that from never reaching the agent and interfering with the customer login flow. The strings in the array should be in the format `http(s)://domain:port` where `port` is optional.

ICustomField

info

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

Property	Required	Type	Description
type	yes	`text`, `select`, `email`, `number`	Render either a text field or a select field. For email fields the default browser email validation is used. Same for numeric fields.
name	yes	string	The form field name. Will be sent in the customFields as is. Prefer camelCase
required	yes	boolean	Sets the form field as required or not
label	no	string	Label of the form field.
options	no (required if `type='select'`)	ISelectOption[]	List of available options for this field
pattern	no	Regex compatible with `pattern` attribute	A custom regex pattern that needs to match for the field to be valid.
patternErrorMessage	no	string	A custom error message if the regex pattern is not matching.

ISelectOption

Property	Required	Type	Description
value	yes	string	Value of the field. This will be comminucated back to the server.
label	yes	string	Label of the select option.

ISchedule

Property	Required	Type	Description
timeZone	yes	string	The IANA time zone name (column `TZ database name` in wikipedia )
schedule	yes	{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

Property	Required	Type	Description
date	no	string OR string[]	One or more, single day or days interval, with format `[YYYY-]MM-DD[/[YYYY-]MM-DD]`
time	no	string OR string[]	One or more time intervals with format `HH:MM/HH:MM`
weekdays	no	number OR number[]	Days of the week from Sunday (1) to Saturday (7)
reason	no	string	Formal 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.

ICallQuality

Property	Required	Type	Description
bitrate	no	ICallQualityBitrate	Set the bitrate quality of the video stream. You can chose from `low` up to `high`.
viewer	no	ICallQualityViewer	Define how the remote video streams will behave on bad network conditions.
publisher	no	ICallQualityPublisher	Define how your video stream(s) will behave on bad network conditions.

ICallQualityBitrate

Property	Required	Type	Description
user	no	`low`, `mediumLow`, `medium`, `mediumHigh`, `high`	The bitrate quality of the camera facing the user (if more than one cameras). Starts form 64Kbit/s up to 768Kbit/s
environment	no	`low`, `mediumLow`, `medium`, `mediumHigh`, `high`	The bitrate quality of the camera facing the environment (if more than one cameras). Normally the back camera of a phone.
displayCapture	no	`low`, `mediumLow`, `medium`, `mediumHigh`, `high`	The bitrate quality of a shared window or shared desktop.

ICallQualityViewer

Property	Required	Type	Description
autoAdapt	yes	boolean	Adjust remote video quality for poor network conditions based on below settings.
firstReducePublisherVideoBitrate	no	number	As a viewer, lower my video bitrate after X seconds in poor network conditions to save bandwidth. Defaults to 5.
minSecondsBeforeStoppingVideo	no	number	Wait X seconds before stopping a remote video in poor network, to maintain audio quality. Defaults to 5.
minSecondsBeforeStartingVideo	no	number	Wait X seconds before restarting a remote video after network quality improves. Defaults to 15.

ICallQualityPublisher

Property	Required	Type	Description
autoAdapt	yes	boolean	Adjust your video quality in poor network conditions based on below settings.
minSecondsBetweenDecrements	no	number	As a publisher, reduce video bitrate every X seconds in poor network conditions. Defaults to 5.
minSecondsBetweenIncrements	no	number	As a publisher, increase video bitrate every X seconds when network improves. Defaults to 15.

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" },
          ],
        },
      });

      // set call quality options
      widget.setCallQuality({
          bitrate: {
            user: "low",
            displayCapture: "low",
            environment: "low",
          },
          viewer: {
            autoAdapt: true,
            firstReducePublisherVideoBitrate: 5,
            minSecondsBeforeStoppingVideo: 5,
            minSecondsBeforeStartingVideo: 15,
          },
          publisher: {
            autoAdapt: true,
            minSecondsBetweenIncrements: 5,
            minSecondsBetweenIncrements: 15,
          },
        });

      //....

      //terminate
      widget.terminate();

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

Theming

There are two layers of customisation for our widget

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.
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: ;

    /* video call size when in device setup */
    --av-card-video-width: 440px;
    --av-card-video-height: 480px;

    /* video call size when joined */
    --av-card-video-width-expanded: 640px;
    --av-card-video-height-expanded: var(--av-card-video-height);

    /* video playing while on queue */
    --av-queue-video-width: 400px;
    --av-queue-video-height: auto;

    /* chat bubble colors for the messages sent by the widget user (customer) */
    --av-chat-bubble-background-color: var(--av-color-accent);
    --av-chat-bubble-color: var(--av-color-accent-contrast);
  }

  :root app-auvious-widget[data-av-theme="dark"] {
    /** overwrite any variables for dark-mode */
  }

  :root app-auvious-widget[data-av-device="mobile"] {
    --av-card-video-width: 100vw;
    --av-card-video-height: calc(
      var(--av-mobile-viewport-height) - var(--av-container-round-width) - 10px
    );
    --av-card-video-width-expanded: var(--av-card-video-width);
    --av-card-video-height-expanded: var(--av-card-video-height);

    /* video call position */
    --av-card-video-mobile-top: 0;
    --av-card-video-mobile-left: 0;
    --av-card-video-mobile-right: 0;
    --av-card-video-mobile-bottom: 0;

    /* video call offset relative to (x) button */
    --av-card-video-mobile-offset: calc(var(--av-container-round-width) + 10px);
  }
</style>

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

Property	Required	Default	Values	Description
`position-horizontal`	No	`right`	`left`, `center`, `right`	Where to position the widget horizontally.
`position-vertical`	No	`bottom`	`top`,`bottom`	Where to position the widget vertically
`position-container`	No	`fixed`	`fixed`,`custom`	The widget has by default `position:fixed`. You can change this to custom and then set your preferred position using `--av-floating-position`.

note

If you use a custom position by changing the position-container to custom all the elements in the widget will behave as if it was positioned to the bottom right of a page. If you want the elements to appear in a different orientation, use position-horizontal and position-vertical.

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 we are using 'position-container:custom' */
  html:root{
  --av-floating-position: relative;
  /* The av-floating-margin-* variables control the margin */
  --av-floating-margin-top: 0;
  --av-floating-margin-bottom: 0;
  --av-floating-margin-left: 0;
  --av-floating-margin-right: 0;

  }

  /* We assume that the position is at the bottom right of the page.
     The av-floating-margin-* variables control the top/bottom/left/right of the fixed position
  */
  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>

You can also change the position of the co-browse tray, during a co-browse session. The available css variables are:

/* Defaults to 'absolute'. You can change it to 'fixed' and place it somewhere else in the page */
  --av-cobrowse-tray-position:

   /* Use it to position the element  */;
  --av-cobrowse-transform:

   /* Defaults to 'flex'. Use 'none' to hide the tray */;
  --av-cobrowse-display:

  /* Depends on `position-vertial`. Use it along with 'fixed' to change the default position */
  --av-cobrowse-tray-bottom:
  --av-cobrowse-tray-top:

  /* Depends on `position-horizontal`. Use it along with 'fixed' to change the default position */
  --av-cobrowse-tray-left:
  --av-cobrowse-tray-right:

Custom icons

You can personalize the icons used by the widgets by supplying your own custom SVG files. Note that you will need to host these icons yourself.

Customization is achieved using the setCustomAssets() method, which accepts an object with two properties, as seen below. Each icon requires a light and a dark version to support different themes.

For example, if you want to customize the user icon, you need to provide two files: user-light.svg and user-dark.svg. Simply include the word user in the assets array when calling setCustomAssets(), and the widget will automatically handle the rest.

setCustomAssets(options:{assetPath: string, assets: string[]})

assetPath : The host path that the assets will be available. The path should NOT end with a slash (/)
assets: An array of the available icons you need to be replaced. You can find a list of all the available asset names below.

Example

await customElements.whenDefined("app-auvious-widget");
const widget = document.querySelector("app-auvious-widget");

widget.setCustomAssets({
  assetPath: "http://auvious.video/widget/demos/demo-html/assets",
  assets: ["user", "chat", "close", "send"],
});

Available Icons

attach, calendar-time, cam, chat, chevron-down, chevron-up, close_small, close, cobrowse, cobrowse-screen, copy-document, download, expand,headset, mic, minimize, open, pointer, resize, screen-in, screen-out, screen-stop, send, speaker, speaker-muted, text, user

Configuration options

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

Property	Required	Default	Values	Description
`chat-mode`	No	`genesys-cloud`	`genesys-api`, `genesys-cloud`, `genesys-premise`, `genesys-web-messaging`, `talkdesk-digital-connect`, `cxone-dfo-chat`	Required. Sets what chat service to use.
`chat-attachments`	No	`true`	`true`,`false`	Show or hide the attachment button in a chat session. In `genesys-web-messaging` you also need to enable attachments in the messenger configuration. Also applies to `genesys-premise` and `cxone-dfo-chat`.
`auvious-environment`	No	auvious.video	auvious.video, us.auvious.video, au.auvious.video	Auvious region instance it will send API calls to.
`organization`	No	Auvious		Name of your organization. Max 30 characters long. Used in OTP SMS text.
`application-id`	Yes			Can be found in `auvious settings`
`application-verify-source`	No		`true`,`false`	Verify that the auvious application used to create a cobrowse/screenshare ticket(pin) is the same as the application id used in the auvious widget. This adds an extra security layer where a potential user of the widget will not connect to an auvious application that does not belong to the specific integrator.
`registration-type`	No	name	`name` `nameEmailSubject` `custom`	Indicate 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-url`	No	Auvious logo		The avatar that will be shown for the customer in the PureCloud Conversation. Defaults to auvious logo.
`customer-display-name`	No			Prefill customer name and jump right into a conversation without the need to register a name. Makes`registration-type` redundant.
`customer-display-name-broadcast`	No	`false`	`true`,`false`	Send 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-subject`	No			Optional. Requires`customer-display-name`
`customer-email`	No			Optional. Requires`customer-display-name`
`dark-mode`	No	false		Enable dark mode . White panels become dark.
`color-primary`	No	black	Css color such as red, green etc, or hex ex: #333333	Optional. Changes black color to value provided. Must be a valid css color value.
`color-accent`	No	auvious blue	Css color such as red, green etc, or hex ex: #333333	Optional. Changes blue color to value provided.Must be a valid css color value.
`color-warn`	No	Auvious red	Css color such as red, green etc, or hex ex: #333333	Optional. Changes red color to value provided.Must be a valid css color value.
`locale`	No	en-GR	Available language options`en`, `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.
`language`				Deprecated. Please use`locale`
`queue-extra-seconds`	No	30		Extra 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-seconds`	No	3	Set 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-widgets`	No	video	`chat`, `video`, `callback`, `audio`, `cobrowse`. Example `"video,callback"`	String in csv format.
`kiosk-mode`	No	`false`	`true`,`false`	Sets 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-minutes`	No	5		After 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-horizontal`	No	`right`	`left`, `center`, `right`	Where to position the widget horizontally.
`position-vertical`	No	`bottom`	`top`,`bottom`	Where to position the widget vertically
`close-hidden`	No	`false`	`true`,`false`	Hides `X` button when on an active interaction.
`pop-out-hidden`	No	`false`	`true`,`false`	Hides pop-out button on video card.
`incoming-chat-messages-blocked`	No	`false`	`true`,`false`	Blocks incoming chat messages (from agent). Chat panel will not be shown if on a video call and an incoming message arrives.
`queue-video-url`	No			File url (preferably `.mp4`) to load in a video player while the customer is waiting in queue.
`queue-video-delay-seconds`	No	3		Number of seconds to dealy the appearance of the video, from the time the customer is on queue.
`launcher-image-url`	No			Change the default widget launcher image. This image will be applied either you have only one active widget or multiple.
`confirm-call`	No	`false`	`true`, `false`	Show 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
`cobrowse-display-capture`	No	`true`	`true`, `false`	The customer can share their screen while on a standalone co-browse session
`cobrowse-disclaimer-url`	No		Any valid url	The customer will have to accept in order to start a staldalone a co-browse session
`greeting-action`	No		`audio`, `video`, `callback`, `chat`, `cobrowse`	Define what widget to launch when the greeting notification was clicked
`greeting-sound-on`	No	`true`	`true`, `false`	Plays a notification sound once the greeting is shown
`notification-sound-url`	No		Any 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.
`schedule`	No		A valid `ISchedule` object	It has the same effect as calling `setSchedule()`.
`schedule-picker`	No	`standard`	`standard`, `timeslots`	Change 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.
`schedule-disclaimer-url`	No		Any valid url	The customer will have to accept in order to schedule an appointment.
`test-device-permissions`	No	`false`	`true`,`false`	Requests access to camera and microphone before starting a conversation so as not to request again when the video call starts.
`schedule-interval-minutes`	No	15	Any positive number	Changes 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-check`	No	`false`	`true`, `false`	Applies 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. `organization-id` is also required for Talkdesk
`schedule-overlap-max-concurrent`	No	1	Any positive number	Applies 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.
`schedule-customer-email-required`	No	`true`	`true`, `false`	By default, an email is required when a customer schedules an appointment in order to send the room link. However it can be disabled and use the SMS/Webhook channels instead to send the room link.
`queue-messaging`	No	`false`	`true`, `false`	Send messages to agent while on queue. This is enabled by default in a Genesys Web Messaging configuration.
`video-messaging`	No	`false`	`true`, `false`	The customer can invoke the chat while on a video call. This enables the chat to be used in a video-first interaction.
`ended-notification`	No	`true`	`true`, `false`	Show a 'Thank you' notification once a conversation has ended.
`agent-info-hidden`	No	`false`	`true`, `false`	Hide the agent name and avatar (if available) and use an icon and a text (that can be changed)

Configuration

How to setup the widget

HTML integration

Using an HTML tag

Using JavaScript

ES5 & Google Tag Manager

Cross-domain support

getRestoreState()

restoreState(state: string)

Example

Localization

1st way. Override specific translation strings inline

2nd way. Set translations from an external json file

Right-to-left languages

Events

HandledError

IBreadcrumb

Error codes

Example

Methods

ICustomField

ISelectOption

ISchedule

IScheduleEntry

ICallQuality

ICallQualityBitrate

ICallQualityViewer

ICallQualityPublisher

Example

Theming

CSS Variables

Widget positioning

Custom icons

setCustomAssets(options:{assetPath: string, assets: string[]})

Example

Available Icons

Configuration options

Configuration

How to setup the widget​

HTML integration​

Using an HTML tag​

Using JavaScript​

ES5 & Google Tag Manager​

Cross-domain support​

getRestoreState()​

restoreState(state: string)​

Example​

Localization​

1st way. Override specific translation strings inline​

2nd way. Set translations from an external json file​

Right-to-left languages​

Events​

HandledError​

IBreadcrumb​

Error codes​

Example​

Methods​

ICustomField​

ISelectOption​

ISchedule​

IScheduleEntry​

ICallQuality​

ICallQualityBitrate​

ICallQualityViewer​

ICallQualityPublisher​

Example​

Theming​

CSS Variables​

Widget positioning​

Custom icons​

setCustomAssets(options:{assetPath: string, assets: string[]})​

Example​

Available Icons​

Configuration options​

How to setup the widget

HTML integration

Using an HTML tag

Using JavaScript

ES5 & Google Tag Manager

Cross-domain support

getRestoreState()

restoreState(state: string)

Example

Localization

1st way. Override specific translation strings inline

2nd way. Set translations from an external json file

Right-to-left languages

Events

HandledError

IBreadcrumb

Error codes

Example

Methods

ICustomField

ISelectOption

ISchedule

IScheduleEntry

ICallQuality

ICallQualityBitrate

ICallQualityViewer

ICallQualityPublisher

Example

Theming

CSS Variables

Widget positioning

Custom icons

setCustomAssets(options:{assetPath: string, assets: string[]})

Example

Available Icons

Configuration options