Embed the widget on your website

The quickest way to get the Univerx widget running on your website is to paste a single <script> tag into your HTML. No build tools, no package manager — it works on any website or CMS.

If you are building a JavaScript app and need a custom UI or fine-grained control, see the Client SDK instead.

Before you start

You must have an Admin or Owner role in your Univerx organization.
You need an active widget configured in your dashboard with at least one queue assigned. See Set up your website widget.
Copy the widget key from Admin console → Widgets → your widget → Embed code.

Add the script tag

Paste the following snippet just before the closing </body> tag on every page where you want the widget to appear.
```
<script
  src="https://cdn.univerx.ai/widget@latest/index.js"
  defer
></script>
```
Pin a specific version in production (e.g. widget@1.0.0) to avoid unexpected changes from future releases.

Initialize the widget

Directly after the script tag, add an initialization snippet with your widget key:

<script>
  window.addEventListener('univerx:ready', function () {
    window.UniversxWidget.init({
      widgetKey: 'YOUR_WIDGET_KEY',
    });
  });
</script>

Replace YOUR_WIDGET_KEY with the key you copied from the dashboard.

Verify it works

Open the page in your browser. A support button should appear in the bottom-right corner. Click it to confirm the widget loads and connects to your queue.

If you see a 401 Unauthorized error in the browser console, double-check:
- The widget key is correct.
- The domain you are testing on is listed under Widgets → your widget → Domains.

Full example

Here is a minimal HTML page with the widget embedded:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My website</title>
  </head>
  <body>
    <h1>Welcome</h1>

    <!-- Univerx widget -->
    <script
      src="https://cdn.univerx.ai/widget@1.0.0/index.js"
      defer
    ></script>
    <script>
      window.addEventListener('univerx:ready', function () {
        window.UniversxWidget.init({
          widgetKey: 'YOUR_WIDGET_KEY',
        });
      });
    </script>
  </body>
</html>

Configuration options

Pass additional options to init() to customize the widget’s appearance and behavior.

<script>
  window.addEventListener('univerx:ready', function () {
    window.UniversxWidget.init({
      widgetKey: 'YOUR_WIDGET_KEY',

      // Position the button ('bottom-right' | 'bottom-left')
      position: 'bottom-right',

      // Override the display language ('en' | 'de')
      locale: 'en',

      // Custom theme colors
      theme: {
        primaryColor: '#0055FF',
        fontFamily: 'Inter, sans-serif',
      },
    });
  });
</script>

Option	Type	Default	Description
`widgetKey`	`string`	—	Required. Your widget key from the dashboard
`position`	`'bottom-right' \| 'bottom-left'`	`'bottom-right'`	Corner where the button appears
`locale`	`string`	Browser locale	Override the display language
`theme.primaryColor`	`string`	Dashboard setting	Button and accent color (hex or CSS variable)
`theme.fontFamily`	`string`	Inherited	Font used inside the widget

Embed in popular platforms

In the WordPress admin, go to Appearance → Theme file editor (or use a plugin like Insert Headers and Footers).
Paste both script tags before the closing </body> tag in your theme’s footer.php.
Save and preview your site.

In the Shopify admin, go to Online store → Themes → Actions → Edit code.
Open layout/theme.liquid.
Paste both script tags before the closing </body> tag.
Save the file.

Troubleshooting

Confirm the script tag is on the page by inspecting the page source.
Make sure you are listening for univerx:ready before calling init() — calling it too early (before the script has loaded) will throw a reference error.
Check the browser console for errors.

`401 Unauthorized`

Your widget key is invalid or your domain is not allowlisted. Go to Admin console → Widgets → your widget and add your site’s origin (including protocol, e.g. https://example.com) to the Domains list.

No agents are online or the widget is not assigned to a queue. Check Admin console → Queues and ensure at least one agent has an active session.

Content Security Policy (CSP) errors

Add the Univerx CDN and API origins to your CSP header:

Content-Security-Policy:
  script-src 'self' https://cdn.univerx.ai;
  connect-src 'self' https://api.univerx.ai;
  frame-src 'self' https://meet.univerx.ai;

Next steps

Set up your widget Create and configure widgets, queues, and precall forms in the admin console.

Client SDK Build a fully custom UI with the npm package — for React, Angular, Svelte, and more.