WebSDK Widget

<script src="https://websdk.ujet.co/v3/widget.js"></script>

Setup

interface TokenResponse {
  token: string;
}

interface CobrowseMessages {
  confirmSessionTitle: string;
  confirmSessionContent: string;
  confirmRemoteControlTitle: string;
  confirmRemoteControlContent: string;
  confirmFullDeviceTitle: string;
  confirmFullDeviceContent: string;
  allowText: string;
  denyText: string;
  endSessionText: string;
}

interface ClientOption {
  companyId: string;
  authenticate: () => Promise<TokenResponse>;
  tenant?: string;
  host?: string;
  lang?: string;
  bridge?: string;
  cobrowse?: {
    enabled: boolean;
    template?: string;
    root?: Element;
    messages?: CobrowseMessages;
    api?: string;
    license?: string;
    trustedOrigins?: string[];
    capabilities?: string[];
    registration?: boolean;
    redactedViews?: string[];
    unredactedViews?: string[];
  };
}

<div id="ujet-widget"></div>

const ujet = new UJET(option: ClientOption)

ujet.mount("#ujet-widget")

Config

interface ConfigOptions {
  accent?: 'default' | 'blue' | 'green' | 'purple' | 'orange' | 'yellow' | 'gold' | 'red';
  logo?: string;
  menuKey?: string;
  ticketId?: string;
  preferredChannel?: string;
  disableAttachment?: boolean;
  customData?: string | Record<string, any>;
  messages?: Record<string, unknown>;
}

ujet.config(options: ConfigOptions)

Custom messages

ujet.config({
  messages: {
    en: {
      button: {
        yes: 'YES',
      },
      home: {
        start: '',
      },
    },
  },
})

Accent Colors

UJET Web SDK provides predefined accent colors:

• blue
• green
• purple
• orange
• yellow
• gold
• red

You can set the accent color with:

ujet.config({ accent: 'blue' })

CSS

If the predefined accent colors don't match your design, you can customize the style with CSS variables:

#ujet-widget {
  --accent-1: #fbfdff;
  --accent-2: #f4faff;
  --accent-3: #e6f4fe;
  --accent-4: #d5efff;
  --accent-5: #c2e5ff;
  --accent-6: #acd8fc;
  --accent-7: #8ec8f6;
  --accent-8: #5eb1ef;
  --accent-9: #0090ff;
  --accent-10: #0588f0;
  --accent-11: #0d74ce;
  --accent-12: #113264;
  --accent-contrast: white;
  --accent-a1: #0080ff04;
  --accent-a2: #008cff0b;
  --accent-a3: #008ff519;
  --accent-a4: #009eff2a;
  --accent-a5: #0093ff3d;
  --accent-a6: #0088f653;
  --accent-a7: #0083eb71;
  --accent-a8: #0084e6a1;
  --accent-a9: #0090ff;
  --accent-a10: #0086f0fa;
  --accent-a11: #006dcbf2;
  --accent-a12: #002359ee;
}

Note: you need to change #ujet-widget to the mount element according to your implementation.