Examples

A catalogue of ready-made widget setups. Pick an example, copy the snippet, or fill in your own connection settings and run it live on this page.

Every example builds on the same two steps described in Configuration: the scripts go in <head>, and the <app-auvious-widget> tag goes before the closing </body>.

Which ID goes where

The widget takes its routing details from the contact centre you connect to, so the attribute name changes per integration. Use the one that matches your chat-mode:

Integration	`chat-mode`	Routing attributes
Genesys Cloud	`genesys-cloud`, `genesys-web-messaging`	`pc-deployment-id`, `pc-organization-id`, `pc-environment`
Genesys Engage	`genesys-premise`	`data-url`, or the `comet-*` set
Talkdesk	`talkdesk-digital-connect`	`dc-touchpoint-id`
NICE CXone	`cxone-dfo-chat`	`nc-brand-id`, `nc-channel-id`, `nc-environment`

The plain deployment-id attribute is a different thing: it points to a Deployment created in Auvious Settings, which carries the rest of the configuration for you. Only set it if you have created one. It never replaces pc-deployment-id or dc-touchpoint-id.

note

Running an example loads the widget from auvious.video and starts a real conversation against your own contact centre, so an agent may be alerted. The settings you type below stay in your browser's local storage.

Your connection settings5 to fill in

These stay in your browser and are used by every example on this page. The full page demos share them too, apart from the buttons, which each demo pins itself. Nothing is sent to Auvious from here.

Widgets to show

active-widgetsPick at least one. An example that sets its own overrides this.

Application IDrequiredapplication-idAuvious / Settings / Application Configuration.

Organization nameorganizationMax 30 characters. Used in the OTP SMS text.

Auvious regionauvious-environmentThe region your organization lives in.

Auvious Deployment IDoptionaldeployment-idCreated in Auvious Settings. Not the Genesys deployment key or the Talkdesk touchpoint.

Contact centrechat-modeOptional: defaults to genesys-cloud, so the snippets leave it out when that is the one you pick.

Genesys Cloud — Web Chat setup guide

The deployment key of your Third Party widget belongs to pc-deployment-id, not to deployment-id.

Genesys environmentrequiredpc-environment

Genesys deployment keyrequiredpc-deployment-idContact Center / Widgets / your Third Party widget.

Queue namerequiredpc-queueAdmin / Queues.

Genesys organization IDrequiredpc-organization-idAccount Settings / Organization settings / Advanced.

Callback queue namepc-callback-queueRequired when the callback widget is enabled.

Advanced

Other attributesAny other widget attribute, one name=value per line.

Start here

Customer info

Look and feel

Where it sits

Language

Starting a call

Features

For developers

Full pages

Kiosk screennew tab Checkout with co-browsenew tab Logged-in customernew tab

The simplest widget

Just the widget tag plus your connection settings. A video button shows up in the bottom right corner.

Reference: HTML integration

Nothing running

Code for your page

<!-- 1. In <head> -->
<meta charset="UTF-8" />
<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>

<!-- 2. Before </body> -->
<app-auvious-widget
  application-id="<your-application-id>"
  pc-environment="<pc-environment>"
  pc-deployment-id="<pc-deployment-id>"
  pc-queue="<pc-queue>"
  pc-organization-id="<pc-organization-id>"
></app-auvious-widget>