The JavaScript SDK is the easiest way to add the Glassix agent widget to your site. This guide walks you through the process from start to finish: getting your install script, whitelisting your domain, and embedding the script on your website.

📘
There is one other way to install the agent widget besides copying and pasting the standard script.

Custom iframe: embed the widget inside your own iframe element when you need custom behavior. See the iFrame section below.

Overview

Installing the Glassix agent widget involves three steps broadly:

Whitelist the domain where you plan to embed the widget.
Copy the generated script from the Agent widget installation screen.
Paste the script onto your website before the closing </body> tag.

Each part is covered in detail below.

📘
Unlike the chat widget, the agent widget does not currently support configurable design or branding options through a snippet. The script ships with a default userName value, which you'll need to override using JavaScript if you want to sign in different agents dynamically. See Customizing the Username below.

Prerequisites

An active Glassix account with admin access.
Access to the website where you want the widget to appear (you'll need to edit the page HTML).

If you already have an account, you can jump straight to the JavaScript code on the Agent widget installation screen.

Step 1: Whitelist Your Domain

Before the agent widget loads on your site, you need to add your domain to the list of allowed domains. This is a security measure that prevents the widget from being embedded on unauthorized sites.

🚧
This step does not exist for the chat widget it is specific to the agent widget. If your domain is not whitelisted, the agent widget will not load.

Step 2: Copy the Script

In Glassix, go to the Agent widget installation screen.
Copy the script. The script looks like this:

<!-- Start of Glassix Agent Widget -->
<script>
var widgetOptions = {
     departments: ["departments ids you want to sign into"],
     userName: "your-user-name",
     snippetId: "your-snippet-id"
};

(function(n){var u=function(){GlassixAgentClient&&typeof GlassixAgentClient=="function"?(window.agentClient=new GlassixAgentClient(n),agentClient.attach()):f()},f=function(){r.onload=u;r.src="https://cdn.glassix.net/clients/agent.1.3.min.js";document.body&&document.body.removeChild(t);i.parentNode.insertBefore(r,i)},i=document.getElementsByTagName("script")[0],t=document.createElement("script"),r;(t.async=!0,t.type="text/javascript",t.crossorigin="anonymous",t.id="glassix-agent-widget-script",r=t.cloneNode(),t.onload=u,t.src="https://cdn.glassix.com/clients/agent.1.3.min.js",!document.getElementById(t.id)&&document.body)&&(i.parentNode.insertBefore(t,i),t.onerror=f)})(widgetOptions)
</script>
<!-- End of Glassix Agent Widget -->

Note that userName is hardcoded in the script above as "your-user-name". This works if every agent on this page shares the same identity, but most setups need to dynamically sign in different agents. See the next section for how to do that.

Customizing the Username

By default, the userName value is hardcoded directly in the script's widgetOptions object. This means the widget will always sign in as that one user unless you override it with JavaScript before the widget initializes.

To dynamically set the username, for example, based on the agent who is currently logged into your internal system, replace the hardcoded value with a variable populated by your own logic:

var widgetOptions = {
     departments: ["departments ids you want to sign into"],
     userName: getCurrentAgentUsername(), // replace with your own logic
     snippetId: "your-snippet-id"
};

getCurrentAgentUsername() is a placeholder for how your site determines the currently signed-in agent, for example, by reading from session storage, a cookie, or by making an API call to your backend.

Step 3: Paste the Script on Your Website

Paste the copied script just before the closing </body> tag on every page where you want the agent widget to appear.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Internal Tool</title>
</head>
<body>

  <!-- Your page content goes here -->

  <!-- Start of Glassix Agent Widget -->
  <script>
  var widgetOptions = {
       departments: ["departments ids you want to sign into"],
       userName: "your-user-name",
       snippetId: "your-snippet-id"
  };

  (function(n){var u=function(){GlassixAgentClient&&typeof GlassixAgentClient=="function"?(window.agentClient=new GlassixAgentClient(n),agentClient.attach()):f()},f=function(){r.onload=u;r.src="https://cdn.glassix.net/clients/agent.1.3.min.js";document.body&&document.body.removeChild(t);i.parentNode.insertBefore(r,i)},i=document.getElementsByTagName("script")[0],t=document.createElement("script"),r;(t.async=!0,t.type="text/javascript",t.crossorigin="anonymous",t.id="glassix-agent-widget-script",r=t.cloneNode(),t.onload=u,t.src="https://cdn.glassix.com/clients/agent.1.3.min.js",!document.getElementById(t.id)&&document.body)&&(i.parentNode.insertBefore(t,i),t.onerror=f)})(widgetOptions)
  </script>
  <!-- End of Glassix Agent Widget -->

</body>
</html>

Once the script loads, the agent widget appears on your page, and agents can sign in.

📘
Glassix creates the widget by injecting an iframe element into your page and filling it with the widget. You don't need to add any markup yourself, the script handles it.

iFrame

Use this method if you want to embed the agent widget inside your own iframe element rather than using the default injected widget.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
</head>
<body>
<iframe></iframe>
<script src="https://cdn.glassix.net/clients/agent.1.3.min.js"></script>
<script>
var widgetOptions = {
     departments: ["departments ids you want to sign into"],
     userName: "your-user-name",
     snippetId: "your-snippet-id"
};
window.agentClient = new GlassixAgentClient(widgetOptions);
agentClient.getIframeUri().then(function (uri) {
    console.log(uri);
    var iframe = document.getElementsByTagName("glassix-agent-iframe")[0];
    iframe.src = uri;
});
</script>
</body>
</html>

Parameters

Name	Type	Description	Default Value
`apiKey`	string	Mandatory
`snippetId`	string	If you have more than one script for your department
`culture`	string		en-US
`participantName`	string
`participantPhoneNumber`	string
`uniqueIdentifier`	Guid	If your visitor is uniquely identified, this will override our cookie.
`tags`	Array[string]	Set the ticket tags
`field1`	string	Optional dynamic parameter value
`field2`	string	Optional dynamic parameter value
`field3`	string	Optional dynamic parameter value
`field4`	string	Optional dynamic parameter value