The JavaScript SDK is the easiest way to add the Glassix chat widget to your site. This guide walks you through the process from start to finish: creating a widget snippet in Glassix, configuring it, adding any widget options, and embedding the script on your website.

📘
There are two other ways to install the chat widget besides copying and pasting the standard script.

Custom iframe: embed the widget inside your own iframe element when you need custom behavior. Learn more

RequireJS: embed the widget using RequireJS, a loading optimizer for sites with a lot of JavaScript. Learn more

The standard method is described below. If you need one of the other methods, follow the links above.

Overview

Installing the Glassix chat widget involves four steps broadly:

Create a new widget snippet in Glassix and configure its branding and behavior.
Add any widget options you need (for example, custom popup text or skipping the new conversation form).
Copy the generated script from the Widget installation screen.
Paste the script onto your website before the closing </body> tag.

Each part is covered in detail below.

📘
Creating and installing widget snippets is only available to admins, typically department admins or workspace admins (for partners).

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 Widget installation screen.

Step 1: Create and Configure a Widget Snippet

A snippet is a single, self-contained configuration of the chat widget. Everything, branding, fonts, sizing, colors, your logo, and which features are turned on, is configured per snippet. Each snippet has its own unique snippet ID, so you can create different widgets for different sites or pages.

In Glassix, go to Settings → Channels → Web Chat.
Open the Chat widget design & settings tab.
Click the + (plus) button at the top to create a new snippet.
Configure the snippet with your branding: fonts, sizing, colors, logo, and any other design settings.
Turn widget features on or off depending on where you plan to embed it.
Click Save once done.

📘
All design and behavior settings are configured per snippet. If you create a second snippet, you'll need to reconfigure these settings for it, they are not shared between snippets.
The name you give a snippet here is the name you'll see later in the dropdown list on the Widget installation screen, so choose something you'll recognize.

Step 2: Add Your Widget Options

You can find the widget script at the Widget Installation tab.

Before you copy and paste the script, this is the point to add any widget options you want to apply. Widget options are configured in the widgetOptions object inside the script and control the widget's behavior and appearance.

For example, you might set custom popup text or skip the new conversation form:

var widgetOptions = {
    apiKey: "your-api-key",
    snippetId: "your-snippet-id",
    chatNowPopText: "Need help? Chat with us!",
    newConversationWithoutForm: true
};

For the full list of available options, configuration, design, and field options, see the Options page.

⚠️
Widget options are added to the widgetOptions object in the script before you paste it onto your site, not in the Glassix dashboard. This is a common point of confusion, so make sure you edit the script with your chosen options before embedding it.

Step 3: Copy the Script

In Glassix, go to Settings → Channels → Web Chat.
Open the Widget installation tab.
Select the snippet you just configured from the dropdown list (it appears under the name you gave it in Step 1).
Copy the script.

The script looks like this:

<!-- Start of Glassix Chat Widget -->
<script>
var widgetOptions = {
     apiKey: "your-api-key",
     snippetId: "your-snippet-id"
};

(function(n){var u=function(){GlassixWidgetClient&&typeof GlassixWidgetClient=="function"?(window.widgetClient=new GlassixWidgetClient(n),widgetClient.attach(),window.glassixWidgetScriptLoaded&&window.glassixWidgetScriptLoaded()):f()},f=function(){r.src="https://cdn.glassix.net/clients/widget.1.2.min.js";r.onload=u;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-widget-script",r=t.cloneNode(),t.onload=u,t.src="https://cdn.glassix.com/clients/widget.1.2.min.js",!document.getElementById(t.id)&&document.body)&&(i.parentNode.insertBefore(t,i),t.onerror=f)})(widgetOptions)
</script>
<!-- End of Glassix Chat Widget -->

Step 4: Paste the Script on Your Website

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

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

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

  <!-- Start of Glassix Chat Widget -->
  <script>
  var widgetOptions = {
       apiKey: "your-api-key",
       snippetId: "your-snippet-id"
  };

  (function(n){var u=function(){GlassixWidgetClient&&typeof GlassixWidgetClient=="function"?(window.widgetClient=new GlassixWidgetClient(n),widgetClient.attach(),window.glassixWidgetScriptLoaded&&window.glassixWidgetScriptLoaded()):f()},f=function(){r.src="https://cdn.glassix.net/clients/widget.1.2.min.js";r.onload=u;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-widget-script",r=t.cloneNode(),t.onload=u,t.src="https://cdn.glassix.com/clients/widget.1.2.min.js",!document.getElementById(t.id)&&document.body)&&(i.parentNode.insertBefore(t,i),t.onerror=f)})(widgetOptions)
  </script>
  <!-- End of Glassix Chat Widget -->

</body>
</html>

Once the script loads, the chat bubble appears on your page, and visitors can start a conversation.

📘
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.

🚧
Using this standard installation method, you can only have one widget per page. If you need more than one widget on a single page, you must use either the custom iframe or RequireJS installation method instead.